Helping customers find their perfect shade with confidence.
ROLE
Lead UI/UX Designer
TOOLS
Figma
DELIVERABLES
Shade Match Guide Page
Before & After
Swipe below to compare old vs. redesigned experience.
Overview
ILIA Beauty is a fast-growing cosmetics brand celebrated for its clean ingredients, modern aesthetic, and inclusive shade ranges. Its hero product, the Super Serum Skin Tint SPF 40, combines coverage, skincare benefits, and sun protection.
Discovery & Research
Context & Problem
As ILIA’s digital presence expands, one challenge has become clear: customers struggle to find the right shade when shopping online without the benefit of in-store testing.
“Customers often struggle to identify their shade online, leading to hesitation, abandoned carts, and trial-and-error purchases.”
User Journey Before & After Redesign
Below is the emotional arc of the shade matching experience — before and after the redesign.
Objective
- Simplify shade comparison across products
- Boost user confidence in selecting shades
- Streamline purchase flow (PDP / Quick Add)
Target Audience
- Primary Users: Online shoppers (25–64), often new to ILIA, who are comfortable buying beauty products digitally but struggle to select the right shade or formula.
- Secondary Users: Beauty enthusiasts who experiment with new products and want quick shade confirmation. Customers transitioning from in-store swatching to online shopping.
Research Methods
- 🗣️ 3 User Interviews – Gathered firsthand feedback on shade-matching frustrations.
- 🖱️ Usability Testing – Observed how participants interacted with the old guide.
- 🔍 Competitor Analysis – Benchmarked shade tools from NARS and others.
- 💬 Customer Feedback Reviews – Analyzed comments and support tickets for recurring issues.
“Feels like a textbook.”
→ Too much text, poor hierarchy.
“Too long, hard to scan.”
→ Need filters and better layout.
“I wish I could filter shades.”
→ Confirmed opportunity for category filters.
Key Findings → Opportunities
Finding: Too much text
Opportunity: Simplify layout & hiearchy
Finding: Shade list too long
Opportunity: Add filter categories
Finding: No visual cues
Opportunity: Add thumbnails + color fills
Finding: Missing product links to PDP
Opportunity: PDP/Quick-add integration
Design Solution
Final Design Comps
Design Principles: Simplicity • Visual-first • Mobile-first
Interactive Figma Prototype
Engage and interact with the final design prototype for Desktop and Mobile.
Mobile:
Desktop:
Impact & Results
User Feedback (Usability Outcomes)
“The new design made it much easier to find my my shade especially with the colors shown for each shade.”
- Erika E.
“Swiping and filtering on mobile made it much easier to browse shades and products.”
- Amber T.
✅ Sticky product menu kept users oriented while scrolling, making it clear which product each shade belonged to.
Business Value (Expected Impact)
- Fewer shade-related returns & exchanges.
- Increased cross-sell between Skin Tint and other complexion products.
- Improved mobile add-to-cart conversion.
- Strengthened customer trust in buying online.
Success Metrics (Future Measurement)
- Shade guide completion rate.
- Add-to-cart conversion increase.
- Return rate reduction.
- Engagement with filters and sticky menu interactions.
Redesigned ILIA’s Shade Match Guide into a mobile-first, visual tool that simplifies shade selection, boosts user confidence, and drives stronger online conversions
