Improving Product Discoverability by 34% Through Strategic Visual Hierarchy
How intuitive color grouping and visual reorganization reduced user confusion<br /> and increased engagement for multi-variant beauty products
CLIENT
.png)
BUDGET
$1.6K
$1.6K
DURATION
3 MONTHS
3 MONTHS
ROLE
UX/UI DESIGNER
UX/UI DESIGNER
SOFTWARES 
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
Visual Hierarchy: Grouped shades by undertone (cool, neutral,
warm) matching user mental models
Mobile-First Touch: 44px minimum touch targets with swipe
gestures for browsing
Progressive Enhancement: Base experience loads instantly,
rich features added progressively
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.