Product Detail Page: Size Selection Enhancements
Platform
UA.com Mobile Web & Desktop
MY ROLE
Sole Product Designer
TIMELINE
Design: 1 Sprint
The Challenge
Our size display on pants with numeric sizes of waist/length, golf gloves and Unisex sizes are confusing. The list becomes way too long and it's hard for customers to find their size.
The Goal
If we update the size selection to require two selections it will reduce the number of sizes displayed to the customer and ultimately would reduce size selection friction on the product page.
KPIS:
• Reduce Bounce Rate
• Add to Cart Rate
• RPV
Opportunity Screens
Men’s Pants, Golf Gloves, and Unisex Shoe sizing are overwhelming the screen, pushing color selection out of view on mobile and the CTA below the fold on desktop.
Looking at the Competition
Discovered across 15+ competitors 4 different size selection approaches:
Single Size Selection
Double Size Selection
Push to a Modal or Dropdown component
Interactive toggle
Design Iterations
V1: Single Page Double Selection
Quick selection
Color chips & fit scale are now always in view
Carousel swipe interaction
V2: Push to a modal
More focused selection
Reduces clutter on PDP buy section
Size & Fit Guide captured in modal
Opportunity to feature photos from reviews in modal
🚫 Takes an extra step
Toggle Exploration
Final Designs
Mobile
Color chips & fit scale are now always in view
Carousel swipe interaction
Size chips meet accessibility with 44px x 44px invisible box
Desktop
In-line grid size chips on desktop
Max of two lines for each selected until ‘Show More’ or ‘Show Less'
