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 categories
- Multi-device testing and validation
Tools & Methods
Design: Figma, Principle for prototyping
Research: User interviews, A/B testing, heatmap analysis
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
new text
Validation Results
A/B Testing: 4 weeks, 8,500 users, 95% statistical confidence
User Research Insights:Based on 12 moderated sessions + 847 user surveys
61% → 82%
(+34%)
Discovery Rate
4.2% → 4.8%
(+15%)
Conversion Rate
3.2 → 2.3 minutes
(-28%)
Task Completion
3.1/5 → 4.2/5
(+35%)
User Satisfaction
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 essential.
- 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 do differently
- Include colorblind users earlier in the research phase.
- Test with varied network conditions from project start.
- Implement more frequent stakeholder check-ins for expectation management.