01 / 19
nuance.

nuanceBeauty

A beauty app that helps you find makeup in your shade, check if products work together, and read real reviews with no sponsored posts or bot comments.

Product Design · UX Research · Beauty Tech
Role  Product Designer · UX/UI Duration  12 weeks Platform  iOS & Web Tools  Figma, FigJam
Where This Starts

Finding a Product

  • • Sponsored recommendations
  • • Incompatible products
  • • Wrong shade match
  • • Filtered, unrealistic previews

All of this makes it hard to find the right product. People lose time and money.

“If it takes too long, I give up.”
Stacy Keech

A user, discouraged, reading comments about a product that broke her out
Research Findings · Interviews & Survey

What people told me.

If it takes too long, I give up.

Most Common · Decision Fatigue

People are scared of wasting money, so they research longer, and some give up.

"I never trust sponsored posts."

Trust

"I look for people with my skin type."

Identity

"Shades never match in real life."

Accuracy

"I check many reviews before buying."

Patience
Research Findings · Quantified

The full survey.

Sources checked before buying
Just one
21.4%
2-3 sources
64.3%
4-5 sources
14.3%
What would build trust most
Consistent reviews
57.1%
Long-term reviews
50%
Shares my skin type
42.9%
Value of filtering by skin/tone · avg 4.14/5 (1 = not valuable, 5 = extremely valuable)
1
2
3
4
5
Likely to use an honest platform · avg 3.79/5 (1 = very unlikely, 5 = extremely likely)
1
2
3
4
5
Research Findings · The Headline Numbers

What the survey showed.

14 people answered, mostly ages 18 to 34.

85.7%

Disappointed by an online-recommended purchase

57.1%

Trust sponsored content less, even when disclosed

4.14/5

Value rating for filtering reviews by skin type & tone

3.79/5

Likelihood to use an honest, unsponsored platform

Competitors

Plenty of apps match shades. None promise unsponsored reviews.

I compared Sephora, Ulta, and Findation using their own pages. Shade matching already exists. Like Findation, Nuance asks which foundations you wear and finds your shade in other brands. None of them say their reviews are free of sponsored posts, and 57% of the people I surveyed trust sponsored content less.

SephoraUlta BeautyFindationNuanceMy app
Shade matchingIn-store Color iQ scanFoundation Shade MatcherMatches across brandsMatches from foundations you already wear
Reviews from people like youReviewers list skin tone + typeNot listedUsers rate matchesFilter by skin type + tone
Reviews nobody was paid forNot listedNot listedNot listedVerified first, nothing sponsored
Routine builderNot listedAI shopping assistantNot listedRoutine Builder

"Not listed" means the feature isn't mentioned in the app's own store page, website or help pages.

Swipe the table to compare →

Before

Stacy's frustrations

“If it takes too long,
I give up.”

  • Spends hours searching for one product
  • Cannot trust reviews
  • Wastes money on the wrong products
Stacy, frustrated, applying a shade that isn't quite right
User Pain Point

Stacy
Keech

22 · Student · Atlanta, GA

Goals
  • → Find foundation that matches her skin tone
  • → Build a reliable everyday routine
  • → Feel represented in the beauty world
  • → Avoid wasting money on wrong products
Frustrations
  • → Shade tools give her the wrong match
  • → TikTok reviews don't share her skin tone
  • → Can't afford to return wrong purchases
  • → No app remembers her shade, so she starts over every time she tries a new one
Drugstore Intermediate iOS User
Who I'm Designing For

Stacy is based on the 14 people I surveyed and the 7 people who tested Nuance. She wants to buy makeup she can trust.

What she says she wants

"Better shade matching. More reviews from people who look like me."

"I just want to find something that works on the first try."

What she needs

Confidence that a product is right for her.

Recommendations she can trust, without starting over.

The gap I had to close

The more she read, the less sure she felt.

Nuance gives her one guided path to the right product.

Stacy, uncertain, applying a shade that isn't quite right
Known Habits
  • · Checks 2–3 sources before any purchase; rarely buys on first impression
  • · Buys in-store when possible to swatch; online only for replenishment
  • · Waits weeks to see if buzz fades or negative reviews surface before committing
"I've bought the same foundation three times in the wrong shade. I just want something that actually matches me."
How Might We Statement

How might we help Stacy discover affordable makeup in a way that feels reliable instead of risky?

Moodboard

Warm, editorial, skin-first

Nuance moodboard: warm editorial beauty references, typography, and colour palette
Typography
Playfair Display · Lato
Palette
Testing & Results
Usability Testing · Round 1

I watched four people try three flows.

Ashley, Bethany, Lida & Naka · moderated sessions across Reviews, Routine Builder, and the Quiz.

Flow 1 · Reviews
  • Default sort should show verified reviews first
  • Show a specific price, not "$$$"
  • Cards need consistent width & height
Flow 2 · Routine Builder
  • "Add to Routine" CTA needs to be far more visible
  • Quiz button needs a clearer position and style
  • Top text size increased for legibility
Flow 3 · The Quiz
  • Show the real shade color at full size, beyond a small swatch
  • Add more product photos, tappable to expand
  • Show ingredients and what the product does
Testing & Results
Usability Testing · Round 2

Three new testers. I sorted what they found by urgency.

Fred, Beth, Ashe · findings triaged by how urgently they needed fixing.

High · Bugs & Broken UX
  • Quiz showed "2 selected" with nothing selected
  • "Full" skin show-through option didn't make sense
  • Search wasn't functioning
  • Icons inconsistent across screens
Medium · UX Improvements
  • Search bar and frame text contrast needed fixing
  • Sheet should animate bottom to top
  • Show "42 compatible products found" in results
Low · Polish & Nice-to-Haves
  • Move logo lower
  • Add a Discover section
  • Add the ability to reorder items
What Testing Changed
What Testers Hit
What I Changed
Quiz showed "2 selected" with nothing chosen
→
Fixed it so the count is right
Shade swatch too small to trust
→
Enlarged to show the real shade color at full size
Search wasn't functioning
→
Fixed, and results now show a live count
Design System

Typography & color

Aa
Playfair Display

Headers, brand name, feature callouts. A serif to make it feel high-end.

Aa
Lato

Body copy, labels, buttons, and app UI.

#262624
Obsidian
#C9956A
Amber
#9A5E2F
Caramel
#A32D2D
Well Red
#F1E5DA
Linen
#E1C5AD
Cream
Design System

Buttons & UI

Nuance UI kit: buttons, pills and tags, cards, and navigation and input components
Prototype · Reviews

Find products that work for you.

Filter by shade, values, and skin type. Products ranked by routine compatibility. Real unsponsored reviews only.

  • • Swatch-matched results: only shades that work for your skin tone
  • • Values filter: vegan, cruelty-free, fragrance-free, and more
  • • Routine compatibility ranking
  • • Verified vs. in-app reviews
View Prototype →
Prototype · Routines

All your routines in one place.

Browse your routines, check compatibility, fix conflicts, and add products, all in one place.

  • • Browse all your routines
  • • Tap to see what's compatible
  • • Fix conflicts with one tap
  • • Add products to any step
View Prototype →
Prototype · Shade quiz

Find your shade.

A guided quiz that learns your skin tone, budget, and finish preference, then matches your existing shade across brands.

  • • Skin tone quiz, undertone, depth, swatch
  • • Budget + finish preference
  • • Shade cross-matching across brands
  • • Personalized, ranked results
View Prototype →
Prototype · Desktop web

Nuance on desktop.

I took Nuance from phone to desktop web without changing what it does. Shade matching, routines, and the quiz all work on a wider screen.

  • • Home, Shop, Product Detail, My Routines, Quiz
  • • Routines become a list-and-detail split view
  • • The quiz unrolls into one scroll, not 14 taps
  • • Same palette, sampled from the real app
View Web Prototype →
Projected Scenario

6 months later

Nuance is a concept project, so this is the outcome the design is built to produce, not a measured result.

Stacy finds the right product fast.

  • • She trusts real reviews that aren't sponsored.
  • • Her routine is organized, personalized, and compatible.
  • • No more wasting money on products that don't match her skin.
  • • Switching foundations is easier because her shade always matches.
Stacy, delighted, having found her match
User Scenario
What Is Next?

What I want to add next

  • Add a video tutorial on how to use the product
  • Add a description of what the item does (effects like blurring)
  • Show ingredients and their effects
  • Show how it looks on the face in different lighting without filters
Sources

Sources.

Competitors
My own research
  • Survey of 14 people, mostly ages 18 to 34
  • Interviews about how people shop for makeup
  • Usability testing, round 1: Ashley, Bethany, Lida and Naka
  • Usability testing, round 2: Fred, Beth and Ashe
Conclusion

Thank you

Makeup shopping
should be easy.

ALISA UTESHEVA
Product Designer · UX/UI