Case study
Fenty Beauty
Forty foundation shades, a launch aimed at 100 million fans, and a shopper who cannot swatch anything on the back of her hand. The Shade Finder had to do the job a counter assistant would.
- Client
- Harvey Nichols
- Year
- 2017
- Role
- Product Designer
- Platform
- Mobile & Desktop
- Focus
- eCommerce · Shade Finder
- £1M+ Revenue in launch week
- 18% Mobile users adding foundation after Shade Finder
- 0 Minutes of downtime
The challenge
A shade decision nobody could make online
Fenty Beauty launched with forty foundation shades — a deliberate, industry-shifting statement about who gets served by a beauty counter. Online, that same range became the problem. Choosing between forty near-identical rectangles on a phone screen, with no assistant and no tester, is a decision most shoppers simply will not risk.
The commercial pressure ran the other way. Rihanna brought an audience of over 100 million people, most of whom would arrive on the same day, on mobile, ready to buy. The experience had to convert a motivated crowd while absorbing traffic several orders of magnitude beyond a normal trading day.
I want everyone to feel included. That’s the real reason I made this line.
Discovery
What the research actually said
Analytics and moderated testing pointed at the same four things, and each one killed an assumption we had walked in with.
- 01 / 04
48% of traffic landed straight on a product page
Nearly half of shoppers never saw the category page, so the Shade Finder could not live there. Shade guidance had to be reachable from the PDP itself.
- 02 / 04
60% of beauty traffic was mobile
The small screen was the primary canvas, not the compromise. Every decision was taken mobile-first and then relaxed for desktop.
- 03 / 04
Zero participants understood undertones
Not one person in testing could explain warm, cool or neutral undertones unprompted — yet the entire shade taxonomy depended on the concept.
- 04 / 04
Carousels hid shades entirely
With weak scroll affordances, users believed they had seen every option when they had seen six. They were choosing from a fraction of the range without knowing it.
Design
Five decisions that carried the launch
- 01 / 05
From insight to shipped experience
The design ran on two parallel tracks: the customer-facing Shade Finder and PDP experience, and the Queue-It traffic management flow for launch day. Both had to work flawlessly on the same day.
- 02 / 05
Accordion grouping over a flat list
Forty shades became a handful of collapsible depth groups. The shopper makes one coarse decision before a fine one, which cuts the cognitive load of the choice roughly in half.
- 03 / 05
Swatch plus dropdown on the PDP
The swatch grid gives recognition, the dropdown gives the shade name in text. Together they prevent the mis-taps and wrong-shade orders that a swatch-only grid produced in testing.
- 04 / 05
Undertone education built directly into the Shade Finder flow
Rather than treating undertone knowledge as something users should arrive with, we embedded concise educational content into the Shade Finder journey itself — explaining warm, cool, and neutral undertones with visual examples before asking users to self-identify. The tool was genuinely useful to a first-time buyer, not just a shortcut for someone who already knew what they wanted.
- 05 / 05
A re-entry experience for the queue
Queue-It was going to hold thousands of people back at peak. We designed the wait and the return so intent survived it, instead of dumping people on a cold homepage after twenty minutes of queueing.
Takeaways
What I took from it
-
Constraints drive clarity. A hard traffic ceiling and a fixed launch date removed most of the debate and forced the decisions that mattered.
-
Test fidelity has to match the question. Asking about shade confidence with greyscale wireframes tells you nothing; colour was the variable under test.
-
Inclusive design is commercially better design. Serving the full range properly is what produced the result, not a marketing layer on top of it.