Improving Product Discoverability by 34% Through Strategic Visual Hierarchy
How intuitive color grouping and visual reorganization reduced user confusion and increased engagement for multi-variant beauty products
CLIENT
.png)
BUDGET
$1.6K
DURATION
3 MONTHS
ROLE
UX/UI DESIGNER
SOFTWARES
Team
Cross-functional collaboration with Senior Designer, Product Managers, Engineers, and Accessibility Experts - Led design strategy while supporting broader team vision
Platform Scope
- Responsive web optimization (mobile-first approach)
- Focus on beauty and cosmetics product categorie
- Multi-device testing and validation
Tools & Methods
Design: Figma, Principle for prototyping<br /> Research: User interviews, A/B testing, heatmap analysis<br /> Collaboration: Cross-team workshops, stakeholder presentations
Impact Summary
- • 18% improvement in users discovering available product variants
- • 23% reduction in product page bounce rate
- • 31% increase in shade exploration behavior
- • 22% faster task completion (3.2 → 2.5 minutes average)
- • 8% increase in beauty category conversion rates
- • User satisfaction improved from 3.1/5 to 3.8/5
- • Full accessibility compliance achieved (WCAG 2.1 AA)
Business Context
ASOS Beauty was experiencing significant user drop-off in their cosmetics category, particularly for products with multiple shade variations. With over 60% of beauty products having 10+ variations, the existing discovery mechanism was creating friction in the purchase journey.
Success Metrics:
• Primary: Reduce bounce rate from PDP
• Secondary: Increase shade exploration
• Tertiary: Improve conversion rates
• Accessibility: WCAG 2.1 AA compliance
Problem Discovery
Design Process
Key Design Decisions
Reflection
The Problem
User Research Insights (18 interviews + analytics from 150K sessions):
I had no idea there were 40+ shades available. I almost left thinking they only had 3 options. — Sarah, 28, Mobile User"
- Hidden variants in dropdown menus
- Cognitive overload on mobile
- Poor comparison capabilities
- Accessibility barriers for screen readers
Research Methodology
- Cognitive Load:Users overwhelmed by long dropdown lists
- Visual Clarity:Couldn't distinguish between similar shades
- Mobile Usability:Tiny swatches difficult to tap accurately
- Decision Paralysis:Too many options without clear guidance
Understanding User Behavior
Research Methods:
- 12 user interviews across mobile and desktop
- Usability testing with variant-heavy products
- Analytics review of 25K product page sessions
- Competitive analysis of leading beauty e-commerce sites
Key Insights: Users scan for product variants in predictable patterns but get frustrated when options are hidden or hard to compare. Mobile users expect larger touch targets and visual clarity.
Design Process
3 Concepts Tested
- Full Grid Display — Overwhelming for 40+ variants (72% felt overwhelmed)
- Carousel — Hidden content issues (58% missed variants)
- Smart Progressive Disclosure — ✅ Selected (89% task completion)
Research Insights:Based on 12 moderated sessions + 847 user surveys
Final Solution: Display 8-12 primary variants with intelligent Show More expansion, organized by color families with enhanced mobile interactions.
- Cognitive Load:Users overwhelmed by long dropdown lists
- Visual Clarity:Couldn't distinguish between similar shades
- Mobile Usability:Tiny swatches difficult to tap accurately
- Decision Paralysis:Too many options without clear guidance
Key Design Decisions
My main goal was to ensure a seamless experience across devices. Every decision—from visual grouping to interaction patterns—was guided by user behavior insights and accessibility standards.
Key Learnings
What worked well
- Iterative Testing:Multiple rounds of user testing revealed optimization opportunities..
- Cross-Functional Collaboration:Early involvement of accessibility and performance experts prevented late-stage redesigns.
- Mobile-First Approach:Designing for mobile constraints created better experiences across all devices.
Critical insights
- User Assumptions:35% of our initial design assumptions were incorrect—user research was essentia..
- Accessibility as Innovation:Designing for screen readers improved information architecture for everyone.
- Performance Balance:Users preferred slightly fewer features with faster load times.
What I’d differently
- Include colorblind users earlier in the research phrase.
- Test with varied network conditions from project start.
- Implement more frequent stackeholder check-ins for ecpectation management.