Overview

In the age of new media, digital content creators have been increasingly influencing the beauty and fashion space. Hundreds of Youtube and Instagram posts unraveled my love for skincare products, and soon I found Sephora to be my one-stop shop. I used the web app to shop for a few months until I found out about their iOS app. However, despite using the app religiously, I had trouble navigating through it. After observing that other people also experienced issues with the app, I pursued this redesign as an opportunity to improve the experience in any way I could.

Through usability testing, I discovered that many users struggled with navigation within the app to find relevant features that they wanted to use. Based on my research findings, I designed some solutions and validated them further with additional usability tests.

Disclaimer: I am not affiliated with Sephora in any capacity.

Current Sephora iOS App

Personal Objectives

I had two main motives for this case study:

• Facilitate a better user experience for Sephora’s app by improving its UI.
• Take full ownership of the various roles involved in designing a product such as: User Researcher, User Experience Designer, Product Designer.

Understanding Sephora and its Customers

I began my case study with a brand analysis of Sephora, learning about its competitors and customer demographics along the way.

Target Audience Demographics

Sephora’s target demographics is women ages 16–55 years old with high disposable income. Its customer base also includes men age 20–40 years old with concerns about their skin and hair health.[1]

Online Survey

I conducted an online survey to further understand user motivation and behavior. Out of all the female respondents, 10% were teenagers, 62% were in their 20s and 30s, and 28% were in their 40s to late 50s. These ages seemed to be a fair representative sample of Sephora’s customer base. The survey asked respondents questions about their beauty and makeup consumer habits.

Online Survey Results

User Research

Guerilla Usability Testing

To test the app’s user experience, I surveyed people in various Sephora stores around the Bay Area and asked them to perform a few predefined tasks in the iOS app as I recorded their actions and took notes. Some of the tasks/questions were:

• Find my recent purchases.
• Find the top-rated sunscreen.
• Try to save a product you like but don’t want to buy right away.
• Navigate to my wishlist/”loves”.
• What do you want to see first as you open the app?

This is what users had to say during the usability tests:

“I know its on here…not sure where”

“Uhh…don’t know”

“How do I go back?”

“It’s ok…I’ve used apps that are worse but I wish there were less options here…maybe better organize it?”

Analysis

Affinity Map

An affinity map is often used to group similar observations together. I used it to surface several key issues common amongst participants.

Affinity Map

2×2 Matrix

Another tool I utilized was 2×2 matrices. They help designers better understand the relationships between two things on a spectrum. I used it in my research findings to map issues important to Sephora’s customers versus Sephora’s business. It also helped me prioritize which issues to tackle first.

2×2 Matrix

Identifying the Problem

The following three issues stood out the most:

Persona of a typical Sephora user

I created a user persona to put a face on Sephora’s target user and visualize various aspects of their behavior and motivations. This persona was roughly based on the users interviewed during the usability testing.

Meet Ashley 🙂

On to the Redesign

Current Information Architecture (IA)

Most users were having trouble navigating through the current app. Therefore, in order to redesign the app, I built the information architecture to understand its structure.

Current Information Architecture

Revised IA

The newly designed IA increases the visibility of the app’s key features and improves the overall organization and navigation throughout the app.

Revised Information Architecture

Ideation & Paper Prototyping

I scoped out Sephora’s competitors and other shopping apps and made observations on which layouts worked best. I sketched out possible solutions on paper for the main screens before committing to high fidelity designs. This allowed me to prototype different layouts rather than focusing on design details.

UX Suggestions & Redesign

Experience#1: Home

Currently, the app uses a hierarchical navigation model and a hamburger menu for navigation. Since hamburger menus make features undiscoverable, I replaced it with a tab bar. I also separated the Home screen into two parts: “Explore” lets users find new items and “For You” allows users to quickly restock past purchases, see personal recommendations, etc.

Home-Before

Home-After

Experience #2: Shop

I placed an icon for the Shop section of the app into the tab bar for quicker access. Within this section, I placed a segmented control tab above (“Shop” and “Stores”). The “Shop” segment within this Shop section is where the user can purchase items by categories, as well see Editor’s Picks and Beauty Offers. Since the world of beauty and fashion is so colorful, I focused on making the “Shop” segment visually significant without losing the amount of content the user can see per scroll. A critique I had of my redesign was the redundancy of the word “Shop”- the screen and the segmented control tab share the same title.

Shop-Before

Shop-After

The other segment of the Shop section is Stores. This section contains everything related to a user’s in-store experience.

Shop-Stores

Experience #3: Loves

Sephora provides a way for users to “love” an item, essentially marking the product as a favorite. I found it quite easy to “love” an item but hard to find the aggregate list of “loves” later. This led me to place my list of “Loves” directly in the tab bar. From a business perspective, it makes sense to provide quick access to this as you would want the user to buy the items they marked as “loves” as soon as possible. However, the current placement promotes an “out of sight, out of mind” user behavior.

Loves

Experience #4: Community

During the usability testing, some users brought up that they appreciated having a community of people with similar interests and concerns. This led me to place Community in the tab bar. This was the extent of my modifications to “Community” as I had to limit the scope of my redesign.

Community

Experience #5: Me — My Profile

Finding the profile page was a major pain point for participants of the study. This section contains a list of recent purchases, items recently sampled, among other things. These options are important to the users because they are more likely to repurchase past products than buy new ones. The profile section was hidden in a dropdown within the hamburger menu. To increase its discoverability, I placed a “Me” tab in the tab bar. In addition, I divided this tab in two sections — “My Profile” and “App Settings” to provide a distinction between these two pages.

My Profile

Experience #6: Me — App Settings

As I mentioned above, I reorganized the information related to app settings and categorized it.

App Settings

Experience#7: Account Details

Account Details

Payment Options

Saved Addresses

Notification Settings

Experience #11: Your Basket

On this screen, users can view all the items that are in their basket before purchasing. I gave the items on this screen a visual makeover for coherency. Previously, the buttons were inconsistent in size and color. The action sheet here was also not being used appropriately as per the Human Interface Guidelines so I changed it into a fullscreen modal.

Your Basket

Experience #12: Checkout

Similar to the screen above, I made some visual enhancements on this screen.

Checkout

Functional Prototyping

I used Marvel to create a functional prototype of all the screens. Check it out here.📱📲

Validation Testing

To validate the changes I made, I surveyed users at the Sephora store with my prototype. I asked the same questions from my initial tests and recorded their behavior and feedback.

Here’s what people had to say about the redesign:

“Did you make this app? This is great.”

“I like this better.”

“‘Me’” seemed more obvious.”

Results from validation testing:

As a result of the redesign, the success rate for tasks increased to 100%.

Reflections on my work here

I was both excited and nervous about this project — excited because I was doing something I love and nervous because I knew this was going to be a lot of work. Despite my fear and nervousness, I knew this was the perfect opportunity for me to hone my design skills by making my way through the messy design process. Working on these projects frequently reminds me of the adage:

“People ignore design that ignores people” — Frank Chimero

I had a blast doing this project and I hope you enjoyed reading about it too. Be sure to 👏🏽 below and leave comments and suggestions. If you think I did something well or something I can improve on, I would love to discuss it in the comments. Thank you for reading!