Fenty Beauty –
Finding Your Perfect Shade.

Context.

Harvey Nichols, a luxury department store had the opportunity to work alongside Rihanna’s brand Fenty Beauty.

The goal was to delight our customers by enhancing new experiences on the website and to understand how we can improve areas that will help customers to find their perfect shade.

In 2017, Harvey Nichols had the exclusive on Rihanna’s first brand that’s being established nationally in the UK with only a few selected Departments having the exclusive for Fenty Beauty, Sephora, Fenty Beauty.

I was part of the project of building the exclusive pages on Harvey Nichols to give a better experience on the Product Details Page and the Shade Finder.

Role

Researching new features that will help benefit the launch of Rihanna’s brand Fenty Beauty.

Project Duration

5 Months

Methods and Tools

User Research
UX Design
User Testing

Design challenge.

Finding your shade can be hard specifically understanding what type of skin type you are.
Fenty Beauty exclusive to Harvey Nichols provides women 40 different shades that
will help to choose their specific shade.

We are facing challenges with Fenty Beauty is Rihanna bringing her own fanbase,
with 100 million-plus followers globally. The goal is to find a way to control the
traffic flow to the website and implement Fenty Beauty Shade Finder that will help
convert our customers to buying their product.

The process.

Harvey Nichols has a standard flow to focus on the main phases of
Discovery, Define, Ideation and Validation.

The research.

Finding the problems.

Rihanna, a global phenomenon approached Harvey Nichols with a vision to help
customers with different skin tones around the world to find their perfect shade.
With this scale that she brings, Harvey Nichols needed to find a way to ease off the
number of visitors arriving on the website.

Setting the foundations

Establishing a new feature and especially for Harvey Nichols, I wanted to understand more of the functionality and how it fitted in the journey. I planned out and identified different design solutions based on Competitor Analysis and benchmarking against the industry standard. Researching beauty products, I found a common trait that they share:

Sharing a common grouping of shades that are presented in an accordion-style.

The Shade finder is a secondary area for customers arriving on a Product Details Page that helps them to know what particular shade they should use.

Introduction of choosing your shade by informing them to click on a CTA to take them to a shade category.

Providing a story behind the foundation e.g. what is your undertone, how much coverage do you apply, etc.

Enhanced experience on PDP when selecting a color. There is a combination of swatches and a dropdown to allow customers to know what color they have chosen.

Working alongside the Product Manager and Head of Online Innovation and Development, I planned and strategized how the system interacts with the users when a launch is taken place.

In previous launches, the number of traffic directed to the website was too much to handle on the servers, and how it affected the purchase path. The idea was to have a type of queuing system that would help control the flow of traffic directed to the website especially when it comes to Rihanna, her followers are devoted.

The solution, a company called Queue-It allowed users to go into a virtual waiting room environment where they wait and are then redirected back to the Harvey Nichols at a rate it can handle in times when peak traffic exceeds the capacity.

The solution.

Based on the research, what we need to tackle is how we can drive conversion from
the Shade Finder to the Product Details Page. With this in mind, how are we going
to control the amount of traffic using integration with Queue-It. 

Wireframing and testing.

Rihanna, a global phenomenon approached Harvey Nichols with a vision to help
customers with different skin tones around the world to find their perfect shade.
With this scale that she brings, Harvey Nichols needed to find a way to ease off the
number of visitors arriving on the website.

Queuing it up.

Queue-It is a complex journey… The system (Magento) must be able to talk to each. To ensure that we were aligned, I worked closely with the Head of Online Innovation and Development as well as the Product Manager and Queue-It. Using OmniGraffle, I planned out a Flow Chart that helped us to understand the journey on Queue-It when implementing the 3rd Party resource into Magento and supporting the Backend with this system. Planning out the user flow, pulled out certain areas that would need wireframes for the 3rd Party to implement on their side.

By having the right basis for the flow chart, I produced a Screen Flow to focus on the user journey that the customer will need to take on the day of Fenty Beauty launches as well as to pull out areas that need wireframes.

Providing detailed UX Documents that were sent across to Queue-It to ensure the journey was correct, I involved stakeholders in how Queue-It works.

Spacing is a key point, especially when it comes to bigger brands. With the frequent calls between Queue-It, I worked alongside the Harvey Nichols’ UI Designer. The UI Designer provided specifications to Queue-It to help build the template, this ensured our brand was in place.

Key Takeaways

On the day of the launch, we had a seamless journey to allow users to purchase Fenty Beauty products. Taking 1,000 users every 20 minutes, the Launch was a huge success. During the Global Launch, Fenty Beauty’s actual website and Sephora’s website crashed temporarily whilst our website maintained the front for users to buy Fenty Beauty.

Since the launch of Fenty Beauty, the Shade Finder has been successful in selecting its Foundation. 18% who use mobile would likely add a foundation using the Shade Finder.

Overall, in less than a week of launching Fenty Beauty by Rihanna, Harvey Nichols had taken more than £1 million in sales and still continuing. A follow-up analysis took place where I identified specific UX improvements and they are:

  • Use the hexagons to promote the products with a higher conversion e.g. Starlit Hyper Glitz Lipstick, Cosmic Gloss Lip Glitter
  • Increase the number of products displayed to the customer on the Carousel on Mobile to two items. We can see that customers are engaging with the carousel but are not getting through all the products
  • To improve the carousel to move 4 Products at a time as opposed to 1 Product
  • To consider options for removing the Shade Finder Hexagon
  • To replace the Shade Finder Hexagon with content aimed at improving foundation conversion, for instance, customer reviews editorial or something similar
  • To improve the journey to the Fenty Beauty Landing Page on mobile, we’d expect the number of users reaching to be a similar ratio to desktop

Want To Chat?

Let’s begin with a simple conversation whether it’s regarding a job, advice or a normal chitchat on UX.
I am happy to talk about my process and approach in the world of user experience.