Screen Shot 2021-03-30 at 1.28 1.png
Screen Shot 2021-03-30 at 1.10 1.png
Space Gray [Front].png
iPad Pro 12.9_ - 15.png
Space Gray [Front].png
iPad Pro 12.9_ - 1.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

Group 315.png
Group 313.png
Group 331.png

DISCOVERY

Persona

Left hander-cuate.png

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.

Screen Shot 2022-01-12 at 3.25 1.png

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.

Screen Shot 2022-01-25 at 1.58 1 (1).png
Screen Shot 2022-02-06 at 5.51.36 PM.png
iPhone 11 Pro Max - 41.png
iPhone 11 Pro Max - 49.png
iPhone 11 Pro Max - 59.png

Add all Ingredients

used in recipe

iPhone 11 Pro Max - 50.png

Using overlay to keep users on the same page to decrease cognitive overloads on users and increase focus.

iPhone 11 Pro Max - 51.png
iPhone 11 Pro Max - 57.png

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.