Context.
Harvey Nichols, a luxury department store, partnered with Rihanna’s brand Fenty Beauty during its UK launch in 2017. Harvey Nichols was one of the few retailers granted national exclusivity, giving the brand a prominent presence across selected departments and online.
“
I want everyone to feel included.
That’s the real reason I made this line.
“
As part of this initiative, I worked on developing the exclusive Fenty Beauty pages for the Harvey Nichols website. This included improving the Product Details Page experience and designing an intuitive Shade Finder tool. Fenty Beauty offers 40 foundation shades, aiming to make shade matching more accessible for a wide and diverse customer base.
Project Summary
Designed the Shade Finder and launch experience built to withstand global traffic spikes. Achieved £1M+ in the first launch week.
Date
2017
Methods and Tools
User Research
UX Design
User Testing
Design challenge.
Choosing the right foundation shade is a common challenge for customers, especially when they lack a clear understanding of their skin tone and undertone. With Rihanna’s global fanbase of over 100 million followers driving significant traffic, Harvey Nichols also needed a reliable way to manage increased site demand.
The core challenge was to create a digital experience that could:
- Help customers confidently identify their perfect shade
- Support high volumes of incoming traffic
- And ultimately convert interest into purchases through a seamless Shade Finder and enhanced product experience
Discovery.
Understanding The Current Flow
When Rihanna partnered with Harvey Nichols to launch Fenty Beauty in the UK, her vision was to create an inclusive beauty experience that helped customers of all skin tones find their perfect shade. With Rihanna’s global fanbase driving massive traffic, the launch required both a thoughtful user experience and a robust technical infrastructure.
During early discovery, analytics showed that 48% of beauty customers were arriving directly on the Product Details Page (PDP). This created a major opportunity: improving the PDP experience would have an immediate impact on how customers explored shades and made purchase decisions.
Competitor analysis and benchmarking revealed common patterns across the beauty industry—particularly the use of accordion-style grouping for large shade ranges. Additional research highlighted pain points in understanding undertones, coverage levels, and the lack of guidance when selecting foundation shades.
Key Priorities
Define.
Rapid testing provides insightful results
To validate assumptions and identify usability challenges, we conducted guerrilla testing with six participants, focusing on mobile first (as 60% of customers used mobile devices).
Findings included:
- Mobile testers reported a fluid and intuitive experience.
- Desktop testers experienced confusion when navigating multiple shade categories.
- 60% navigated the accordion pattern without difficulty, while 40% identified the carousel as the main pain point.
Participants struggled with:
- No visual cues indicating the carousel was scrollable.
- Shade categories lacking initial examples, leading to uncertainty.
These insights defined the functional and UX requirements for the Shade Finder.
Defining the Queue-It Integration
Managing launch traffic introduced a second problem: system scalability. High-profile launches had previously overwhelmed Harvey Nichols’ servers.
To address this, we needed a clear understanding of how Queue-It, Magento, and the existing backend would communicate.
I worked closely with the Product Manager, Head of Online Innovation & Development, and Queue-It’s team to map the full end-to-end journey.
This ensured functional alignment between all teams and clarified where wireframes were required.
Design.
Putting User Journey in place
Using the discovery insights and defined requirements, I designed a user journey that made shade selection intuitive, informative, and mobile-friendly.
- Accordion-style shade grouping based on benchmarking insights.
- A clear CTA on the PDP inviting users to “Find Your Shade.”
- Educational content explaining undertones, coverage levels, and product story.
- A combined swatch + dropdown interaction on the PDP to ensure users always understand which shade they’ve selected.
Giving Reassurance to Our Stakeholders
- User flows showing how customers would enter the virtual waiting room.
- Responsive layouts ensure a seamless transition between Queue-It and the Harvey Nichols site.
- Clear re-entry points to preserve context and support conversions.
Each design output was validated with stakeholders and technical teams to ensure feasibility and smooth integration.
Delivery.
The Day of the Launch
On the day of the Fenty Beauty launch, the experience performed flawlessly.
Fully Operational
While Fenty Beauty’s official site and Sephora temporarily crashed, Harvey Nichols remained fully operational.
20 minutes
Queue-It controlled traffic by releasing 1,000 users every 20 minutes, keeping the site stable.
18% of Mobile Users Add To Bag via Shade Finder
The Shade Finder saw strong adoption, with 18% of mobile users adding a foundation after using it.
Continued Success
Within the first week:
- Harvey Nichols generated over £1 million in Fenty Beauty sales.
- The online experience maintained stability throughout peak demand.
A post-launch UX review highlighted further optimisation opportunities.
Impact.
UX Considerations
The project delivered strong commercial results and measurable UX improvements. Harvey Nichols generated over £1 million in sales within the first week while maintaining site stability during peak traffic.
The Shade Finder drove meaningful engagement and conversion, particularly on mobile. Post-launch analysis identified optimisation opportunities, including improving carousel visibility and behaviour, refining promotional placements, and enhancing mobile navigation to increase product discovery and conversion performance.
