e.l.f. Shade Finder
Designing a seamless, AI-powered experience for users to virtually match their foundation shade
As part of my UX/UI Design Internship at e.l.f. Beauty, I was placed on a project tasked with creating a virtual shade-finder experience using face-scanning AI. I worked as one of the lead UI designers and UX researchers, conducting competitive analysis, building flows, and running Maze usability tests to refine visual and interaction design. The result: a clean, confident, user-centric experience that removed the guesswork from shopping for complexion products online.
DEMO/LIVE PROTOTYPE
Try it in the e.l.f. app. Look up “Soft Glam Satin Foundation“, scroll down, and hit the “Find My Shade“ option!
ROLE
Lead UX/UI Designer, alongside Ramon Martinez (Senior UX Manager)
TIME
3 Months
TOOLS
Figma, Maze
Please note: This project was launched publicly by e.l.f. Beauty, but please do not share or distribute this work. 🔐
PROBLEM
What problem am I trying to solve?
Users had no reliable way to find their correct foundation shade online.
🎨
Visual Ambiguity
Tiny color swatches weren’t helpful across skin tones or screen variations.
🤳
Lack of Trust
Users preferred in-store testing due to the unreliability of virtual tools.
⚠️
Frustrating Flow
The initial shade-finder was buggy, vague, and visually confusing.
This led us to design based off of a guiding question:
“How might we help users confidently find their ideal shade virtually - without trial, error, or guesswork?”
INITIAL RESEARCH
Understanding & Sympathizing
Why is the problem important?
Many users avoid buying complexion products online due to uncertainty about shade accuracy - leading to returns, low confidence, and in-store reliance. In fact, 67% of beauty shoppers prefer testing foundation in-store for this reason. A virtual shade finder that's intuitive and trustworthy addresses a big e-commerce gap for makeup users.
Source: NielsenIQ Beauty Trends Report
Who am I solving for?
Target Audience 👯♀️
Beauty shoppers aged 18–35 who regularly purchase makeup online - especially those seeking convenience, accuracy, and inclusivity in complexion product matching. Many are mobile-first users who want fast, low-effort shade recommendations with minimal friction.
Market Insight 📈
With the rise of online beauty shopping, tools like AI-powered shade finders are becoming a key differentiator. Brands that offer trustworthy, easy-to-use digital shade-matching can improve user trust, reduce returns, and boost conversion.
PROBLEM STATEMENT
“As an online shopper for foundation, tinted products, and concealers, I am unsure what shade best matches my skin because I cannot try on the product in person.”
UX RESEARCH
Competitive Analysis
I started by conducting an in-depth, annotated audit of 8+ shade finder tools - including NARS, Fenty, L’Oreal, and more.
I evaluated each based on:
Clarity of instruction
Visual cues and AI flow
Time to completion
Confidence in recommendations
Fenty’s experience stood out for its ease and flow - clear instructions, fast scanning, and user-friendly visuals - making it our North Star.
Our Existing Flow
The current shade finder was clunky:
No visual confirmation that face alignment was correct
Long loading times and vague instructions
Unclear next steps
We needed to overhaul not just the design, but the entire interaction logic.
Feature Recommendations
Based on user pain points and competitor benchmarks, I created a feature wish list:
Task Flows
To serve different user types (logged-in vs. guest, first-time vs. returning), I mapped out multiple task flows.
These flows helped streamline the process and identify potential discrepancies between use cases. We ensured users would experience a consistent and accessible shade-matching journey, regardless of how they interacted with the tool.
DESIGN PROCESS
Mockups & Ideation
I created mockups of top-performing competitor flows using e.l.f. branding to understand key UI decisions. We took a “smart reuse” approach - adapting high-performing patterns rather than reinventing the wheel.
Layout & Visual Strategy
I explored and experimented with a variety of ways to communicate scanning readiness - like outlines, live visual feedback, and countdowns.
After several rounds of iteration and landing on a design, I plotted out the entire flow from login to the shade recommendation to get a feel of the product so far. Keeping brand consistency, I aligned typography, iconography, and spacing with e.l.f.’s evolving style guide.
A few strategic decisions included:
🎯 Short, directive instructions
🎯 Bold CTAs to improve conversion
🎯 Cross-sell opportunities post-shade match
Branding Review
I led a branding deep dive to test subtle variations:
Soft gradients and muted colors kept the scanner UI non-distracting
Success states were styled to celebrate the match moment without overwhelming the interface
Here’s what I ended up with afterwards.
USABILITY TESTING
Set Up
I designed a usability test with this format:
1
Screener
Understanding the backgrounds of the users and their experience with online makeup shopping/products like shade finders.
2
Scenario
Situation for users to immerse themselves in before using our product: “Imagine you have found a new cosmetic product on the e.l.f. Mobile app, but you’re not sure which shade to purchase. You open the shadefinder to help you make a decision.”.
3
Survey
Gaging the users’ experience through post-task questions using multiple formats - rating scales, open responses, and qualitative feedback.
Feedback
Here’s what users thought about the current iteration of the shade finder.
👍
Positive Feedback
88% of users found the interface intuitive and appreciated the autonomy in finding their shade without the need for assistance.
👎
Challenges
Some shade recommendations were inaccurate, leaving 50% of users uncertain about their match. Users wanted more detailed visuals and explanations to boost confidence in the results.
FINAL TOUCHES
Design Decisions
With this testing data, I went back to the drawing board and made several adjustments.
1
Credibility Screen
Added a credibility screen explaining the AI technology behind the tool to enhance trust.
2
Instructions
Shortened the initial instructions and moved the more detailed ones to an easily accessible help button in the scanning stage.
3
UX Copy
Layered in fun, lighthearted, and empowering microcopy to humanize the flow
4
VTO & Confidence
Introduced a virtual try-on option and side-by-side comparisons with actual skin tones for more confidence in shade recommendations.
5
Cross Selling
Implemented an opportunity to increase user engagement with other products.
RESULTS
Through several rounds of design refinement, usability testing, and stakeholder feedback, we:
✨ Boosted user engagement and trust in AI recommendations
🧭 Cut confusion and streamlined the shade-finding journey
🛍 Enhanced e-commerce experience and conversion potential
This was a true full-stack UX/UI challenge - from research to branding to animation to stakeholder feedback.
Here’s a screen recording from launched version on the e.l.f. app!
TAKEAWAYS
Things that I learned
This project showed me that great UX doesn’t just look good - it earns trust. By merging thoughtful flows with AI technology and clean UI, I helped users feel good about shopping for complexion products online.
Next Steps
If I were to keep iterating, I would launch A/B tests for visual variations for the UI design, run live data testing to fine-tune shade accuracy by skin tone, and build out more complex personalization flows based on undertone, product preferences, and finish.