01 / 19
nuance.

nuanceBeauty

A mobile beauty app that simplifies how people find and manage makeup: personalized shade matching, routine compatibility checking, and unsponsored reviews in one place.

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

Finding a Product

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

All of this makes it harder to find the right product. Nobody likes wasting time, money, and patience.

“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 they told us.

If it takes too long, I give up.

Most Common · Decision Fatigue

Fear of wasting money increases research time and drives people to give up altogether.

"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

Four charts, the survey in full.

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
2
3
4
5
Likely to use an honest platform · avg 3.79/5
1
2
3
4
5
Research Findings · The Headline Numbers

What the survey made undeniable.

14 respondents, mostly ages 18-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

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
  • → Every app makes her start from zero
Drugstore Intermediate iOS User
The Person At The Center Of Everything

Stacy wasn't invented. She's a composite of the 14 survey respondents and 7 testers, young adults making purchasing decisions in a system designed to move inventory, not help them feel confident.

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 actually needs

Confidence. A signal that says this one is right for you.

Curated recommendations she can trust without starting from scratch.

The gap we had to close

The more she read, the less certain she felt.

Nuance replaces overwhelm with a personalized, guided path to purchase.

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?

Testing & Results
Usability Testing · Round 1

Three flows, watched live.

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

A second pass, prioritized.

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 ability to reorder items
Moodboard

Warm, editorial, skin-first

Nuance moodboard: warm editorial beauty references, typography, and colour palette
Typography
Playfair Display · Lato
Palette
Design System

Typography & color

Aa
Playfair Display

Headers, brand name, feature callouts. Serif elegance for a premium feel.

Aa
Lato

Body copy, labels, buttons, and app UI.

#262624
Obsidian
#C9956A
Amber
#9A5E2F
Caramel
#A32D2D
Well Red
#F1E5DA
Linen
#E1C5AD
Cream
#639922
Olive Drab
#E4F5EB
Chartreuse
Design System

Buttons & ui

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

Find products that actually work for you.

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

  • • Swatch-matched results, only shows 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 02 · Nuance · 2026

Your routines, perfected.

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 03 · Nuance · 2026

Find your perfect match.

A guided quiz that learns your skin tone, budget, finish preference, and 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 →
Web Prototype · Nuance · 2026

The same idea, on a bigger screen.

A good idea should survive a change of platform. I took Nuance from phone to desktop web without redesigning what it does, so the shade matching, the routines and the quiz all keep working when the screen gets wider.

  • • 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

If it shipped

Stacy finds the right product in seconds, not hours.

  • • 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.

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

Stacy, delighted, having found her match
User Scenario
What Is Next?

What features we want to include

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

Thank you

Makeup should be easy.
Not a guessing game.

ALISA UTESHEVA
UX Designer