CDW
UI refresh on a tight turnaround? Design System to the rescue!
CDW wanted a refresh of their sales incentive portal, AMP. The scope and complexity of their programs made migration to PerformX impractical at the time, but it was being explored as a long-term goal. I proposed using the refresh to take a first step in that direction by using the PerformX Design System.
My Involvement
- Prototyping
- Design System
- UI Survey
- QA and UAT
Objective
Update the UI design, and facilitate future migration efforts by aligning the front end with product standards.
Outcomes
Improved visual design and enhanced usability by reducing inconsistent design patterns.
Brought much needed consistency and optimizations to the front end codebase.
Improved the maintainability of the site and empowered dev teams to make informed UI decisions in the future by establishing a design system.
Challenges
AMP is a long-running and extensive application that has grown organically over many years. In the absence of well-documented design standards, widespread inconsistencies had evolved in the site's design. Many of the development patterns, often hard-coded on the page level, made it difficult to implement global styling updates.
Before and after samples of the AMP portal refresh
Before UI refresh
After UI refresh
Benefits of this project also flowed upstream.
AMP is a very data-rich application and has many lengthy and complex forms. To keep these pages manageable I created dense variants of several input components—including text fields that are 25% more compact—which were incorporated back into PerformX, providing a much needed update to the Design System.
Early draft of the design with the default input dimensions.
Final design, showing the same form with the dense inputs.
More Projects
