Ulta Beauty - Responsive App Redesign
My Role: Lead UX Researcher, Project Manager; in a team with two other designers
Tools Used: Figma, Asana, Optimal Workshop
Scope: 3 weeks
Overview: As part of a UX/UI Intensive through General Assembly, my team was tasked with improving customer engagement, retention, and sales through the Ulta app.
About the Company: Ulta Beauty is one of the largest skincare and makeup retailers in America. Ulta Beauty's mission is to inspire people of all ages, genders, abilities, and skin tones by redefining beauty, and encouraging confidence and self-expression.
Design Process: I have adopted the double diamond process which breaks down the design process into four stages: discover, define, design, and deliver.
The Problem
iterate
iterate
Discover
Define
Design
Deliver
The Solution
-
User Interviews
-
Competitive and Comparative Analysis
-
Heuristic Analysis
-
MVP
-
Persona
-
Problem Statement
-
Affinity Mapping
-
User Flow
-
Design Studio
-
Lo-Fi Wireframes
-
Hi-Fi Wireframes
-
Lo-Fi Prototype
-
Usability Testing
-
Hi-Fi Prototype
-
Next Steps
Discover
I wanted to start at the source, so I began our research by talking with the actual users.
The goal was to gain insights on how customers currently interacted with the Ulta app, and what could be improved. We conducted 7 different interviews with frequent beauty app users and gained insight by asking open ended questions.
We found that 5 out of 7 users mentioned liking or wanting to use a virtual try on feature.
In tandem with the user interviews, I also conducted a competitive and comparative feature analysis.
Key Takeaways
Ulta's app has nearly all of the same features as its competitors.
Ulta's informational architecture was not intuitive and difficult to navigate at times.
Through a Heuristic Evaluation, I was able to pinpoint usability problems with the virtual try-on feature.
The breadcrumbs do not allow users an easy escape back; this button takes users to the beginning of the 3-step process
No clear way to add to bag
CTAs don't use clear copy or icons that follow industry standards
My team and I then synthesized the user interview notes through an affinity map.
Below are quotes of the most notable insights we gained from our user interviews.
"I like being able to see what an item will look like before purchasing it."
"I enjoy looking for new products."
"I like using an app that is easy to use and navigate."
Define
After collaborating on our affinity map, I created Stephanie, our persona, from all of the user research we had gathered thus far.
Stephanie is a twenty-seven year old marketing manager who lives in Brooklyn, NY.
She leads a very busy life. Therefore, she does not have time to waste sifting through products that don't apply to her or dealing with inaccurate website descriptions.
The Problem: Stephanie needs access to the most detailed product information before buying so that she can ensure she is buying products that are right for her.
How might we improve the virtual try-on feature so that Stephanie can be more confident that she is buying products that will look good on her?
How might we make finding the virtual try-on feature easier for Stephanie so that she can find the right products?
How might we make Stephanie more confident when ordering online?
After landing on this How Might We question, we decided to define the MVP.
Minimum Viable Product
improve the virtual try-on feature to be easier to find and more intuitive
Must Have
make buttons more eye catching; and overall easier to see
Should Have
video tutorials on how to use products
Could Have
curated product quiz and subscription box
Won't Have
Design
After completing the background research, we moved into a design studio.
iterations...
We wanted to keep things as simplistic as possible to provide clear communication with the user. Below is a comparison of the current try-on feature, and the one we created.
Current Try-On Feature
We decided to move these to the right side of the screen so that the user has more room available to use the Try-On Feature.
Our Redesign
We created a translucent drop down to take place of the different makeup options previously located on the bottom.
We moved this button to the bottom right-hand side of the screen, for clarity and ease of use.
And thus our low fidelity prototype was created.
Then we put our lo-fi prototype through usability testing.
Specifics:
- 8 users
- 2 tasks
- remote and moderated
Goal:
User will be able to try on a product and add it to their bag in under 5 minutes with no more than 1 error.
Metrics:
- 6/8 users completed both tasks
- 4 minute average to complete both tasks
- 77.5 average SUS score
We also took note of users' comments:
"I would like it to say 'try on virtually before you buy' somewhere on the (product) page."
"It was easy to use and navigate."
"I expected the video to be with the product pictures so that all I would have to do is swipe to see it."
Deliver
From this we created our high fidelity prototype, which was set to be our final deliverable.
Changes hi-fi prototype:
- We created strong and clear ctas through colour
- We utilized onboarding overlay to showcase new and improved try-on feature
- We relocated some buttons
