Gap, Inc. | UI Framework
My Role
UX/UI Direction
Product Lead
Product Strategy
Type of Work
UX/UI Design
Product Strategy
Prototyping
Branding
Design Research
Background
Our Gap-wide tech stack and UI was a mess. Every enhancement was stacked on top of a legacy code base, making even the smallest font or color changes time-consuming and risky. Divergent brand requirements moved Gap Inc away from a single shared platform capabilities resulting in an inflexible, monolithic system that required extreme expertise and far too many resources to support change.
Meanwhile, in 2023-2024 all four brands asked for even more flexibility in brand expression: executive leaders engaged with design agencies to deliver north star aspirational concepts that include new style guidelines, capabilities, UI, page templates and more. Our legacy code base and bolted-on UI wasn't able to keep up with the demand.
We therefore kicked off a project to create a design system that would support brand differentiation on the surface layer while optimizing for speed by standardizing templates and capabilities.
Discovery
Discovery was rough, I'm not going to lie. We had four brands current web and apps. Three brands had engaged three different agencies for comprehensive web and app redesigns. New executive leadership ushered in fresh thinking about branding, content, and features...
We started by auditing the four brands' current and proposed experiences using a neutral third party, Baymard Institute, for usability and general UX. This gave us a relatively unbiased scoring of what to keep and what to improve upon. We also worked with the Product teams, UX team, various agencies, and brand teams to develop a list of capabilities for ranking.
Design
We then collated the numerous pages and interactions down to a common underlying UI framework. In concert with the Design System team, we developed designs for each brand to show how the common design system would flex for premium brands (BR and Athleta), and for price-sensitive brands (i.e. Factory stores).
I collated each brand's wish list of capabilities (i.e. "Messaging Center", "Buy Online Reserve In Store", etc) into a master list of over 200 features. I scored each entry using a modified RICE framework (Reach, Impact, Confidence, Effort).
-
Reach How many brands would use the feature?
-
Impact Customer value (measured by concept testing)
-
Confidence Business value (brand and PM teams)
-
Effort Estimated Level of Effort
(Reach x Impact x Confidence) ÷ Effort = Net Score
We used the net score to weed out low impact, high effort features, and to bubble up high impact features. Finally, we accomodated these higher-scoring features in the design system to ensure the system was future-proof.
Product
The Design Stystem team developed guidelines of the overall design system for web, mobile web and app, then we created each brands' toolkit in concert with each brand's agency of record (see BR at left).
Sounds super simple huh?
The result is a modern, flexible core that is easier to maintain, supports each brand's unique digital expression, and is able to keep up with the pace of innovation.