Sephora

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

Smartphone displaying a beauty app with a photo of a woman applying foundation to her face, and a face alignment feature with instructions to move face closer, in a dark background.
View Prototype

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.

A horizontal progress bar with four circular icons above it, each representing different steps, with a pink background and black text.

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

Text that reads "THE STORY" in large, red, tilted letters on a black background.

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.

Text that reads 'Main Competitors' in large, bold red letters on a plain background.
Text on a black background that says, "I had to do a lot of research to find apps with these features" in red font.

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

Faded dark red handwritten text on a black background that reads, "Helps me focus on users so that I'm not designing for myself."

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.

Handwritten text in dark red on black background discussing a feature for makeup application that prioritizes shade matching based on time constraints.

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

Mobile app screen for Foundation Finder, showing options to find or match foundation shades with brushes and swatches of different foundation colors.
Text in red handwritten style says, "New feature if you don't know your foundation shade."
Black silhouette of a smiling face with a curved arrow pointing to the right.
Black cat with red arrow pointing to its tail
Black arrow pointing left and upward with a red outline
Text in red font on a black background reads: 'Quiz: They have matching a shade of makeup you love with a different brand'.
Handwritten-style text on a black background reading: 'Quiz for finding the best type of foundation based on your preferences/skin type'.

Design

Three smartphone screens displaying a step-by-step guide for face alignment. The first screen shows an oval with central guidelines and the text 'Proper Lighting' and 'Face Aligned.' The second screen has an oval with guidelines and the note 'Align Face here' with arrows pointing downward and towards the center. The third screen shows a similar oval with a face icon at the top, the instruction 'move closer,' and the note 'Face position' with a cross mark.

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

Brainstorming the Design

Flowchart illustrating the steps of analyzing and processing data, including stages labeled 'analyzing complex' and 'processing,' with notes about finding the perfect shade, getting started, and color matching.
Two hand-drawn sketches of mobile app screens with handwritten notes. The left sketch says 'We found it! Your shade is' with a circle labeled 'name' and a button labeled 'save to profile,' and the right sketch says 'We found it! Your shade is' with a circle labeled 'name' and three placeholder boxes for product images labeled 'name' and 'logo,' with the note 'find your perfect foundation' and a 'quiz' link.

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

Text reading: 'IMPORTANT PROMPTS SO THE USER KNOWS HOW TO FIX THE PROBLEM' in dark red font.

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

Screenshots of a mobile app showing a foundation matching quiz process, including questions about skin type, coverage preference, and favorite formula, with results displaying recommended foundation products.

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:

Results

Task completion rate: 100%

  • Easy to use

  • Intuitive

  • Fun to use

Smartphone screen showing a makeup app titled 'Foundation Finder' with a section asking about foundation shade, featuring a paintbrush and swatches of foundation shades, and a prominent red button labeled 'Find My Shade'.

Iterations

The writing on this button caused some confusion, I altered to make it more intuitive

Learnings and

Next Steps

With this project, I learned how to work within the confines of a pre-established design system

I learned to merge my designs with the established system to create a seamless experience for the use

Taking the time to research and learn the preferences and experiences of the user was crucial in creating a successful design

My next step would be to add the virtual makeup try-on feature and expand the features to all makeup products!

Multiple smartphones displaying a real estate app called EQUSTAY with listings of modern houses and properties in various locations, set against a black background with decorative icons.
EQUISTAY
Screenshots of a catering business website named Silver Linings Cooking, featuring menu options, a photo of cupcakes and decorations, and contact information.
SILVER LININGS COOKING