Product Groupings
2025
How I prevented a $17M launch failure by finding critical UX flaws
"Just add selectors to the page, it should be simple"
The Highlight
The Problem
Users couldn't find what they wanted, even if it existed
Brand Goal
To replicate the in-store experience of easily seeing all product variants (length, fit, pockets, etc.) without leaving the page.
Success Metrics
Primary: Add-to-Bag
Secondary: Conversion rate, Bounce rate
Why leadership underestimated complexity:
Early designs explored selectors, but tested them in isolation without the bigger picture. Engineering timeline was set based on these designs.
What was at stake:
A $17M marketing launch campaign was riding on this timeline
70% of all traffic comes from mobile — the solution needed to work on small screens.
I had just 3 weeks, from design to eng handoff, to meet the established timeline
Design goals
How I turned exploratory concepts to shippable assets in three weeks
Systemic thinking at a startup pace
Design the solutions
Pushback - I showed what happens without guidelines I detailed the prototypes, comprehensive grouping guidelines, all edge cases I created net-new designs from scratch as a solution
Secure buy-in to delay
I walked through the solution with design leadership I pitched to brand leaders (all 4 brands) on how poor UX hurts launch goals I recruited UXR for overnight validation
Solutioning
I discovered three interconnected flaws creating cascading failure: the hidden domino effect
Systemic prevention, not screen fixes
My systemic solution
I addressed the root causes and delivered a scalable framework across four brands and four platforms.
I created 15+ Figma prototypes mapping every failure scenario with real-time inventory — not just the happy path.
An interactive Figma prototype example that showcases what the user experiences if there is no additional context provided. User can't see changes in price, imagery, or color options.
After several iterations, the new “sticky container” design created helps keep users oriented without disorientation.
Through multiple rounds of UXR for prioritization, it provides the following for the selected product:
Price
Rating
Color Selected
Size Selected
Top-level imagery
I created grouping guidelines and limits based on Baymard recommendations on cognitive load and UXR findings.
Influencing
How I convinced leadership to change timelines
1.
Design Leadership Alignment
I walked Design Leadership/VP through the prototypes. I got buy-in that the problems were launch-blocking.
2.
Rapid UXR Validation
I recruited UX Research for overnight validation on the proposed solution to cut through opinions with data.
3.
Brand Leadership Pitch
I pitched to Brand leadership and showed how poor UX hurts individual launch goals. Brand leaders are engaged.
Results
The results validated my concerns
Brands that followed my guidelines succeeded. Brands that didn't, failed.
The images below are screenshots taken from the live online experience across mobile devices during the A/B tests.
Performed well: there was a slight positive lift to add-to-bag and conversion rates. Test ramped to 100%. These brands followed my framework—smaller, complete product groups.
Negative impact—halted mid-test. FullStory analysis showed brands ignored my guidelines—groups were too incomplete, where disabled selectors confused users exactly as I'd warned—hundreds of dead clicks.
Old Navy
Impact
Systems thinking prevents expensive mistakes.
Future work
After multiple rounds of UX research, I designed the comparison table post-launch to catch incomplete product groups (thus eliminating the dead click/disabled button scenario) and this solution is now in development.
Product Groupings Comparison Table
Original design (designated for simple groups)
Lasting impact
My guidelines became the official company standard:
Guidelines are now used for future product grouping decisions across all four brands — even job aids have been updated to reflect grouping guidelines for site merchants loading products onto the site.
The “Sticky Container” design pattern was adopted into the design system for future use.
There have been planned explorations and rapid tests for additional uses of the sticky container (such as a sticky add-to-bag).
