Ulta Beauty App Redesign
PROJECT OVERVIEW
Ulta Beauty is the largest beauty retailer in the U.S. providing beauty lovers with cosmetics, fragrance, skin care products, hair care products, and salon services. Their mission is to inspire people of all ages, genders, abilities, and skin tones by redefining beauty, and encouraging confidence and self-expression.
My team and I need to conduct user research and figure out the current problem Ulta users are facing on the mobile app. Through extensive research, brainstorming and collaboration we want to come up with a seamless solution. This conceptual project was created as part of a UX/UI Design Bootcamp at General Assembly.
Our Goal: increase customer engagement, retention and sales on the Ulta App.
Tools
Figma
Maze
Asana
Zoom
Time Span
3 week sprint
Team
Jennifer LaMar
Ava Manning
Alinah Brun
Roles
Lead UX Designer
UX Research
DESIGN PROCESS
My team and I decided to use the Double Diamond design process to help us understand and communicate our design, knowing that its going to be iterative at all phases. The 4 phases are Discover, Define, Develop and Deliver.
Discover
WHAT ARE REAL ULTA USERS SAYING ABOUT THE CURRENT APP?
We started off by not having much knowledge of the app or what people were saying about it, so we thought it was necessary to start at the source. That led us to begin our research by talking with actual users. The goal was to gain insights on how customers currently interact with the Ulta app, what they like, if there are any frustrations and just overall shopping behaviors. We conducted 7 different semi-structured interviews with frequent Ulta app users and gained insight by asking open ended questions.
5 out of 7 users mentioned liking or wanting to use a virtual try-on feature
Each user purchased beauty products through the Ulta app in the past 2 months
Some additional findings to note:
Users like to order online but still pick up in store
Users like reading reviews
Users mostly browse for new products vs. searching for something specific
Users like personalized product recommendations
Users like the wide variety of products Ulta offers
THE MOST IMPORTANT THING FOR USERS IS TO TRY ON BEAUTY PRODUCTS BEFORE BUYING
To understand all this data better, we collaboratively grouped our user research by likeness to help reveal some larger trends. This is something called affinity mapping, where we wrote down observations, their ideas or a quote and then turned them into statements from the users’ point of view.
Here are a few that stood out to us:
USERS ARE NOT ABLE TO FIND THE VIRTUAL TRY-ON FEATURE
In tandem with the user interviews, we analyzed our competitors by conducting a competitive and comparative analysis. Through a feature inventory, it showed us that Ulta has nearly all the same features as its competitors, but one thing that caught our eye was that finding the virtual try-on feature was very difficult.
Due to these findings, we thought about exploring how we could improve the virtual try-on feature for easy accessibility, possibly by improving the current informational architecture.
LOCATION OF THE VIRTUAL TRY-ON DOES NOT MEET USER EXPECTATIONS
Based on user research and competitor analysis, we tested the usability of the Ulta app. It passed the Heuristic Evaluation, indicating consistency, error prevention, and recognition.
However, the virtual try-on feature failed due to lack of help and documentation. Users struggled to find it as it was buried deep within the home page or discover page. This raises questions about users' engagement with the discover page and their understanding of the virtual try-on feature.
Another thing we did make note of was how transparent the buttons are when compared to our competitors. On the left screen below you can see our competitors, Elf and Sephora with prominent and filled buttons , and on the right you can see Ulta’s buttons, which blend into the background. Based on industry standards, strong CTAs draw users’ attention. They are more likely to be engaged and interact when there is an obvious CTA.
Competitors
Ulta
Define
LET’S STEP INTO THE SHOES OF AN ULTA USER
It was important to bring one of my users to life and to remember who we were designing for, so based on our user research I would like to introduce you to Stephanie Walters!
SO WHAT’S THE PROBLEM?
Once Stephanie came to life and thought about what she needs, we were then able to transition into defining the problem our users are currently facing.
Stephanie needs to be able to try on and have access to the most detailed product information before purchasing so that she can ensure she gets products that are flattering on her.
Develop
HOW CAN WE SOLVE FOR THIS?
After ideating on how to solve this problem, we landed on a few How Might We statements:
How might we improve the virtual try-on feature so that Stephanie can be more confident that the products she is buying will look good on her?
How might we help Stephanie find products that work for her so she can be more confident in her purchasing decisions?
How might we help Stephanie locate the GLAMlab so she can virtually try on the products shes interested in?
We ended up using the top question to keep in mind throughout this project.
MVP REVEAL
During interviews, there were 4 key insights my team and I could pursue. We wanted to break these up into must have features, should have, could have and won't be considering given the constraints.
First, many users we spoke too either loved the virtual try-on feature -- which goes by the name GLAMlab, or they had no idea that it existed and wanted a virtual try-on feature. We also had users mention they would like more visible CTA’s, how-to videos for products, and more personalized product recommendations.
PROSPECTIVE USER JOURNEY MAP
The idea is to encourage customers to try this revamped feature and keep coming back. This is just a walkthrough of how we expect users like Stephanie to behave with the new solution being designed.
SKETCHING AN EASIER NAVIGATION
My team and I used a design studio to generate rapid and collaborative ideas. Currently, the discover page requires excessive scrolling. Our main goal was to improve clarity and ease of finding the GLAMlab. To achieve this, we removed scrolling from the discover page and provided two clear navigation options. The GLAMlab is now the first feature, followed by Beauty Tips which includes quizzes, trends, and blogs.
Iterations
Our Pick
Deliver
LO-FIDELITY WIREFRAMES
Once the initial ideas were down, I turned those sketches into a digital wireframe to show in more detail how this redesign will look. Besides making it easier to locate the virtual try on feature, there are also some other parts of this feature I wanted to update and improve based on user research and insights.
try-on mode: currently in this feature it brings you directly into the live makeup without letting you choose, and you would have to know to navigate to the top bar if you want to switch modes so I wanted to implement a pop up to specify before they even get brought in just in case users don't want to use the live makeup option and would rather upload a photo or use a model photo.
Filters: currently there is no option to filter by price and based on our research, I know price is important to our users when shopping so I wanted to add that at the top of the filters page.
Current Try-On Feature
Inside the try-on feature: I thought it was beneficial to bring those top options to the side to create more space to see what you are trying on.
I also wanted to clear up some space at the bottom for more prominent CTA buttons so I moved the different makeup to try on that was originally at the bottom and moved it to the top into a translucent drop down so you can still see what's behind it.
LO-FIDELITY PROTOTYPE
Click here to see the first version of our prototype.
LETS PUT THE USERS TO THE TEST
To ensure we are heading in the right direction, we had 8 users test our lo-fidelity prototype with the intention to see how easy it was for them to find the redesigned virtual try-on feature. We gave all 8 users the same 2 tasks to complete; locate the virtual try-on feature, try on a lavender lipstick that's under $25 and add it to their bag. The second task was to search for the purple Mac Matte Lipstick and watch a “How to Use” video.
Goal while testing: Users will be able to try on a product and add it to their bag in under 5 minutes with no more than 1 error.
QUANTITATIVE METRICS
We thought it was important to measure success rate, time it took to complete both tasks and to calculate a SUS score. Although most thought it was easy to navigate there was some room for improvement since 2 users were unable to complete both tasks, which led to an average SUS score of 77.5.
6/8 users were able to complete both tasks
Average time to complete task 1: 3.5 min
Average time to complete task 2: 26 sec
Average SUS score: 77.5
QUALITATIVE METRICS
We also thought it was important to measure by their likes, dislikes and some direct quotes from them.
Some additional feedback we got from users:
One user mentioned having a visual on the homepage that can lead you to the discover page or let users know they need to go to the discover page
A user was very confused navigating to the virtual try on, “discover tab” was not an intuitive choice in their opinion
A user thought clear all and apply filter button should be swapped
A user tried to swipe through product pictures to find how-to video
FIRST ROUND UPDATES TO BE MADE
We received good feedback from usability testing leading us to make some changes. Users suggested something to point them in the direction of the Discover page for the virtual try on.
To ensure everyone knows about it, we're implementing an onboarding popover that explains the feature's location and improvements. Based on research, we're changing all CTA buttons to pink for better visibility. We'll test user preferences for pink vs. black buttons in round 2 of usability testing.
Some additional feedback was that most users follow a top to bottom process and from the users tested, after selecting price and color, most continued their eyes down towards the clear all button before noticing the apply button. We thought it was important to switch those 2 buttons so “apply filters” stands out more over the “clear all”.
We also originally just had the how-to videos under a tab they have to access by scrolling down under the product (which you can see below on the left). A little under half the users tested just wanted to swipe through the images instead of scroll down so we thought having these videos in both locations would be beneficial.
HI-FIDELITY PROTOTYPE
Click here to see the second version of our prototype.
VALIDATING OUR DESIGN DECISIONS IN A SECOND ROUND OF TESTING
For the second round of usability testing, we conducted a remote moderated test with 6 users. I gave each user the same two tasks as the first round and compared the new data to see how the app improved.
Goal while testing: Users will be able to try on a product and add it to their bag in under 5 minutes with no more than 1 error.
QUANTITATIVE METRICS
To gauge our progress this round, we measured success rate, clicks, task completion time, and SUS score. Participants aced both tasks quicker, and our SUS score soared from 77.5 to 92.5, putting us in the excellent category!
6/6 users were able to complete both tasks
Average number of clicks for task 1: 13 clicks
Average number of clicks for task 2: 5.5 clicks
Average time to complete task 1: 1.7 min
Average time to complete task 2: 48 sec
Average SUS score: 92.5
QUALITATIVE METRICS
We also thought it was important here to measure by their likes, dislikes and some direct quotes from them. Here are a couple of different quotes from our users regarding their likes and dislikes.
NEXT STEPS
Calling back to our MVP chart, one thing of interest that popped up in our user interviews was customer’s desire for more personalized product recommendations. To address this, we would like to explore creating a Get-to-know you quiz that would be a part of the onboarding process when they first download the app to get a better idea of what our users are shopping for or would want to have recommended for them. We also came across some customers who liked the idea of personalized product boxes. Or in other words, products that not only work well together, but that address their individual skin care / makeup needs. Later, we would also like to implement a curated product subscription box with products recommended based on the results of the preferences quiz. After implementing either of these, we would do another round of testing it with our users to make sure its what our users want and works well.
WHAT I LEARNED
During this project, I continued to learn how important conducting user research is and to think back to it at each stage of the process. Just because I might have an initial assumption about what needs improving, you won't be able to find a true problem until you talk to a handful of users to get their honest opinions. Also, getting to test the prototype more than once was huge to implement user feedback and then see how the usability improves and if we are heading in the right direction. The new navigation and function of the virtual try on feature will increase customer engagement, retention and sales on the Ulta App.