Sephora

An add-on feature that allows users to virtually scan their face to find their perfect shade of foundation.

TIMELINE
80 Hours

ROLE UX Researcher UX/UI Designer

Digitizing Solutions

Sephora is a multinational retailer of personal care and beauty products. Sephora has a great color matching system in store that gives you makeup recommendations based on your skin tone.

How can this system reach individuals who do not have the time to go to Sephora in person, are too lazy to make the time, or simply do not like the element of human interaction?

Problem

Goal

Add a feature that provides the same value of the color matching system, without having to leave the house.

My Design Process

Research

User Interviews

Competitive Analyses

Define

User Persona

Empathy Map

User Flow

Sketches

Mid-Fidelity Wireframes

High-Fidelity Prototype

Design

Test

Usability Tests

Iterations

The idea for this feature came from my own personal struggle with finding the correct shade of foundation and not wanting to leaving my house to solve this problem

I wanted to see if others shared this struggle and if they would benefit from having a way to find their foundation shade without leaving their house

I also wanted to see if there were solutions to this problem currently in the market and if these solutions were successful

Research

Unpacking the User’s Problem

I began my research with user interviews to see if people were struggling with their foundation shade and if they had tried to solve this problem.

I interviewed women in an 18-50 year age range with varying experiences with makeup. Participants were asked about their previous experiences with makeup/Sephora, as well as their interest in alternative, virtual experiences.

85% have never gone in person for color matching at Sephora

100% would use a virtual color-matching feature

85% are not confident that they are using the correct foundation shade

Conclusions

Most participants were not 100% confident that they are using the correct shade of makeup

Quantitative Results

Even though they weren’t confident, they have not gone in person or sought out a virtual option to solve this problem

Reasons for not going in person included not having enough time, no store close by, laziness, and not wanting to interact with people

Based on the interview results, there is a clear need for Sephora to have a virtual alternative to shade matching.

Researching Existing Solutions

I used a competitive analysis to discover if there were any successful variations of a virtual feature already in existence.

I researched who Sephora’s main competitors were and then discovered which makeup companies include some version of virtual makeup on their apps.

None of Sephora’s primary competitors utilize a virtual shade-finding feature

Conclusions

Charlotte Tilbury does have a virtual shade-matching feature, but they only sell for one makeup brand

There is a clear empty space in the market for a virtual shade matching feature

Define

I created a user persona based on my user interviews to hone in on the user goals in relation to shade matching and put a name and face to my user.

Visualizing the User

User Persona

Making Sure I Understand the User

Before jumping into designing, I wanted to make sure that I had a full, well-rounded view of the user, so I created an empathy map.

Navigating the Shade Finder

With my user defined, I created a user flow for the addition of a shade matching feature.

Problem: Integrating my user flow with the existing design system

Sephora already has a quiz to help you find the type of foundation that is best for you and an option to match the shade of makeup you already use.

How do I integrate this new feature into the already existing feature?

I wanted to utilize what Sephora already had (with a few tweaks) for seamless integration of the new feature AND so that I wasn’t wasting my time starting from scratch

I encapsulated all of these features in a “Foundation Finder”. Users have options based on what they need

Solution

Design

I created sketches of different options for the virtual shade-matching screens.

Brainstorming the Design

sketches drawn on my Ipad

With the new screen sketches in mind, I created mid-fidelity wireframes. These wireframes included existing Sephora app pages as well as my added feature pages.

Bringing the Sketches to Life

Once I was set with my mid-fidelity screens, I moved on to creating high-fidelity prototypes.

Finalizing the Designs

Virtual shade finder is featured on home page

Navigation pages to foundation

Foundation finder banner featured on top of foundation page

Different options presented for whether or not you already know your foundation shade

Face scan screen

Text pops up to tell you what you need to fix

Check mark appears when problem is fixed

Check mark appears and color of face oval changes to let you know you are all set

Results page allows you to save your shade and continue to the foundation quiz

I used Sephora’s pre-existing foundation finding quiz and added elements to enhance the user experience

Final results page includes suggestions for foundation products based on the quiz results in the user’s shade

Test

After completing the prototype, I recruited participants for usability testing. Users were tasked with completing the entire task flow of using the Foundation Finder.

All users were able to successfully complete the task.

Main comments included: