![Space Gray [Front].png](https://static.wixstatic.com/media/d37c35_b732658b72884c20b2ade5df560eedc2~mv2.png/v1/fill/w_426,h_327,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Space%20Gray%20%5BFront%5D.png)
![Space Gray [Front].png](https://static.wixstatic.com/media/d37c35_b732658b72884c20b2ade5df560eedc2~mv2.png/v1/fill/w_407,h_311,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Space%20Gray%20%5BFront%5D.png)
Case Study, UX/UI
Wholefoods
Redesigning the recipe pages into a sleek and elegant interface to create a seamless user experience.
Type
Graduate Project, Visual Design Strategy, Product Thinking
My Role
Researcher, UX/ Interaction Designer, Visual Designer
Tools
Figma
Time
6-Weeks (2021)
Goal and Result
Capturing attention and facilitating shopping experience and decision making for users who are looking for recipes
Swipe left and right
Progress Bar
Hover Over to quickly access the information
Add all Ingredients
used in recipe
Using overlay to keep users on the same to decrease cognitive overloads on users and increase focus.
Website Screen Heuristic
Evaluation
• The current recipe page for the Wholefood
website is just like a catalog
• There are a set of predetermined arbitrary categories
• User must go back and forth between the Whole Foods
website and Amazon to do secondary searches
DISCOVERY
Persona
Tara
"Love to eat healthily and use recipes from a credential website."
About:
Age: 30
Student
Location: Maryland
Goals:
Tara wants to buy all ingredients used in the recipes list on the website quickly.
-
Tara, as a busy Graduate student, is constantly struggling with cooking, getting some easy recipes to follow, and eating healthily.
-
she needs to buy groceries used in recipe
Pain Points:
Story:
Tara is a loyal customer of WholeFoods.
since she is a student and busy she needs some references to get some recipes to buy all ingredients used in the recipe altogether.
Usability Testing Result
I run the usability testing with 5 users who were screened meticulously and asked them 6 tasks, the most common task is looking for products were listed on the receipt they want to make, and the task goal is successfully finding a product to purchase.
Insights
-
Only 10% of people click on the recipes page from the main page
-
The homepage did not capture user’s attention so that they engage with the recipe page
-
It's really hard to navigate throughout the recipe page
Problem Statement
Users need to clearly and quickly understand the layout of the website and access information.
With the current recipe page, they find it hard to navigate and engage with it.
Final Design
PROTOTYPE, TEST, & ITERATE
Interview
With some of the insights from the usability testing with my users, I decided to interview 5 more users to understand their mental models of how they look for recipes. this is what I learned:
Their first mental model is:
-
Users are looking for user-generated content to gain inspiration for their recipes.
-
Interactive videos to capture their attention.
.png)
Add all Ingredients
used in recipe
Using overlay to keep users on the same page to decrease cognitive overloads on users and increase focus.
Hover Over to quickly access the information
Lessons & Next Steps
What I Learned
• How to give and take critique
• When to stop and move on to a new visual direction
-
Next Step:
-
Measure UX success via running the next usability testing with the users’ pass and fail indication and their time and performance. I chose these metrics because I want to learn about how long users take to find the products they are looking for and whether such a process is efficient enough.
-