.svg)
Creating a more personalized shopping experience for Sephora users by adding a mood board feature to the app
Sephora is one of the largest beauty retailers in the world. The in-store experience offers consumers the ability to consult with “Beauty Experts” that can make suggestions based on their preferences which is a feature that is also available online (Live Beauty Help). However, the product finding process on the app can be streamlined by offering a more personalized shopping approach to its users.
With an overwhelming amount of products to choose from, users can find it difficult to select products when shopping on the Sephora app. Users have access to reviews within the app and recommendations from social media influencers on other platforms however products are not a one size fits all and should be tailored to the individual users’ needs and preferences.
Competitive Analysis Sephora App Audit
User Interviews
Affinity Mapping
POVs, HMWs and Brainstorming
Personas
User flows
Task flows
Low Fidelity Wireframes
High Fidelity Designs
Interactive Prototype
Usability Test
Feedback Prioritization
Iterations
What do Sephora users take into consideration before deciding to purchase a product and how do they go about choosing between a wide array of different products?
To begin, I completed a SWOT analysis on Sephora’s competitors to make note of how they help their users choose between products. Based on my analysis, the most unique features I found were: virtual try on, makeup look tutorials, virtual makeup consultation and interactive quizzes. I wanted to take those ideas a step further to help Sephora stand out from its competitors.
Analysis Highlights:
After completing market research and observing how competitors offer a personalized experience for their users, I audited the Sephora app. I had two feature solutions in mind, the first solution was to allow users to build a makeup look and receive results with product recommendations based on their choices. The second feature solution I had in mind was allowing users to build a mood board within the app and receive product recommendations based on the results that they like.
I interviewed 7 users between the ages of 20-30 who shop at Sephora, which helped me decide on a feature solution because of the valuable information I learned.
1. Users do not feel confident in product recommendations because they are generic and not personalized
“I don’t feel like the app knows me, so I don’t purchase any products that are recommended by it. It feels like marketing and there’s nothing personalized about it.”
2. The amount of products and choices available are overwhelming making it difficult to browse through the app
“The way information is presented on the app is too much, there are way too many products on the homepage so I’m usually on the site to get a specific product and not get inspiration.”
After completing my user interviews, I created an affinity map with 5 themes that helped me uncover deeper insights regarding user needs when it comes to beauty product selection and the desire for a personalized experience at Sephora. I used these insights to decide on the mood board feature and further enhance the idea so that it solves user pain points.
Based on my user interviews with Sephora shoppers, I found that:
To address user pain points and enhance the mood board feature solution, I created POV statements and HMW questions focused on improving the personalization experience.
Users complete most of their research about makeup outside of Sephora because the way the information is presented there is overwhelming and irrelevant to their needs
Users need to feel that the products that are being recommended to them on Sephora are related to their needs and are easy to sort through
As a user I want to reduce the amount of time I spend on finding relevant products and increase my confidence in the Sephora recommendations
How might we make relevant product information readily available to the user?
How might we increase user confidence in Sephora recommendations?
How might we make the product selection experience less overwhelming?
I used the HMW statements as the basis for brainstorming solutions. I put a 30 minute time limit for my ideas to flow so as to not get carried away and spend too much time on this part of the process. This helped me think about the parameters I should consider for the feature I want to add.
To better guide my design decisions and keep Sephora users at the forefront of my designs, I created two personas based on my interviewees. I focused on the users' need for personalization and how that can be achieved through a mood board feature. As I was building out the feature, I referred to the personas to ensure that the user problem was being solved through my solution.
Keeping in mind my personas’ need for a personalized app experience, I mapped out the “Happy Path” with the mood board feature in mind. I put myself in the user’s shoes to see how and when they would decide to use the feature. My primary focus here was on makeup products, despite Sephora offering a variety of other products. This is something I iterated on as I continued my design process.
Taking my persona’s goals and the task flow into account, I began creating low fidelity wireframes for the mood board feature in the Sephora app. I used Figma to create my low-fi wireframes and followed the format of the Sephora app in key screens pertaining to my design. I came up with two ways to set up the mood board feature one of which involved a series of quiz questions or one screen of selecting preferences and viewing results. To make the feature more enticing for users, I decided to go with the multi-screen approach after deliberating with my mentor.
Because I was following the pre existing Sephora UI, I went straight to designing a high fidelity version of my moodboard feature solution. During this process, I discovered many aspects of the app that were not user friendly such as the inability to go back and forth between quiz questions to change answers, issues with UI design such as spacing between elements and more. In my first round of high fidelity wireframing, I did not implement those improvements out of fear of deviating from the Sephora UI. However, my mentor suggested adding the improvements as part of my design process as long as the changes are justified.
In the pre-existing Sephora UI, users do not have the ability to back and forth between quiz questions, this can be frustrating for users because they would be unable to change any responses they recorded in previous questions, I added the "back" and "next" buttons to allow users the opportunity to change their responses without having to repeat the quiz
Makeup experts and beginners alike are the target users for this added feature, for this reason beginners may not be familiar with the different types of makeup looks, I added images of the makeup looks to support beginners with their understanding of makeup
Because this question has no bearing on the results of the quiz, my peers at DesignLab suggested that it would not be relevant to include
In the first version, I mimicked the Sephora UI, however the like button is not accessible and the layout of the images is not enticing for users accessing the mood board feature the first time. I added a background behind the icons on the images to make them accessible and experimented with different icons and colors, while keeping in mind the overall Sephora UI. I added the number of products in each makeup look to communicate to users the complexity of the makeup look, therefore appealing to beginners and experts alike.
In the first version of this screen, the default and active states if the makeup look were the same. This obstructed the image of the makeup look and did not provide information to the user about which product was being used at each point of reference. For this reason, I made the default state invisible, with the products appearing and disappearing on tap.
To put my mood board feature to the test and to ensure that the user's need for personalization was resolved through my design, I created my prototype. To reiterate, the key pain points I identified were:
I tested my designs in a remote moderated setting with 5 users, 3 of which I had interviewed, and 2 new users. I instructed the users to find the new mood board feature to see whether it was located intuitively within the app. After that, I asked them to use the feature and provide me with feedback for improvement as well as their overall impression of the features and whether the solution met their expectations.
Based on the 5 usability tests I conducted, I divided the feedback into an impact/effort matrix to prioritize the changes I would make given that I had limited time to complete the project.
After prioritizing which iterations to work on, I spent 4 more hours making changes to my designs before submitting them to my mentor for feedback.
In the first version of the home screen, I did not include a banner directing users to the mood board. Because this is a new feature, users would not have a way of knowing about it. In the final version I added the banner with a busy image to match the rest of the images found in the app.
To improve the readability of the product tags, I increased the text size, making it more accessible and easier to read at a glance.
While I completed this project for self-practice, some of the success metrics I would pay attention to measure how my designs improved the user problem at hand would be:
Although this project was done for my personal growth and learning, I gained a lot of practice working within a pre existing interface’s UI and making the integration of new feature feel natural and seamless to the user
Going through this process allowed me to understand the difficulties involved in coming up with a new feature for a well established app and platform
Thank you for reading!
