RESEARCH

Starting off with several research goals

In addition to this being a recipe app, I wanted to know if users were interested in making a positive environmental and social impact so I established four research goals:

1. Save time and money

2. Maximize existing ingredients

3. Reduce landfill and carbon footprint

4. Support diverse and local businesses

The pandemic encouraged people to explore home cooking

More than half of U.S. consumers have been eating at home more often since the coronavirus outbreak.

1. People have a hard time planning different meals every day as one of the biggest challenges eating during pandemic

2. More people found a new passion for cooking

3. Grocery stores are designed as a “treasure hunt” for experience-seeking shoppers by introducing more ethnic or newness-kind-of food items

Collecting insights from people who cook

Objectives for the interviews:

1. If the interviewees resonated with my four goals

2. Figure out their current eating/cooking habit during the pandemic

Target audience:

I interviewed two male and four female interviewees who cook during the pandemic.

Interviewees prioritize maximizing ingredients they have at home when cooking

Based on the six interviews, the interviewees resonated with only one of my research goals: maximize existing ingredients. They would like to be more environmentally friendly and support local businesses, but their main goal when buying groceries is to use everything they buy. They are afraid of exposing themselves and their loved ones to COVID-19 (during this time we didn’t have the vaccine available).

Interviews confirmed people enjoy the full cooking experience

I used an affinity map to find patterns from my notes and grouped them based on similarities. Some important takeaways from the interviews discovered from the affinity map:

1. When they don’t have prepped meals, the interviewees do try to figure out what they can cook with the ingredients they have at home.

2. They love to partake in the full cooking experience (finding a recipe, buying the ingredients, cooking, and eating), which confirms my secondary research.

3. They save a copy of recipes in their photo album whether they take an actual picture or a screenshot.

How might we?

Based on my findings so far,

1. how might we generate recipes based on ingredients the user has at home?

2. how might we find a way to generate recipes from what the user sees and from saved images?

DEVELOP & IDEATE

Sketching designs to address pain points discovered in the user journey

Based on the user flow, I drafted several screens and selected the sketches the user would see as they find a recipe and most importantly the screens to solve the biggest problems discovered during the user journey map:

1. Research phase: there is a lot of information overload and Rosie’s drained from web surfing

2. Cook phase: she still needs to check if she has all the ingredients on hand

Preference diet profile to reduce information fatigue. Since the user has a preferred diet, this filtering would remain more consistent as they search for recipes.

Designing a delightful and fun visual cooking experience

Going with the idea of “maximizing time”, I thought of the Pomodoro Technique. It’s a timer to break work into intervals, traditionally 25 minutes in length, separated by short breaks. I thought “Whip Up” as the app’s name would be fitting as the user is cooking something quick. The Pomodoro Technique uses tomato as a visual reference so I used red and green from the tomato as the recipe app’s main colors. I wanted to use Procreate to hand draw fun, light-hearted images and GIFs.

Voila! The prototype of Whip Up :)

You can watch a demo of the app from the video below or you can interact with the prototype on Figma.

DELIVER & IMPLEMENTATION

Setting up the test for users

Objectives:

1. Determine the overall ease of use and flow of the app, as well as areas of confusion, or frustration for users

2. Determine whether the camera feature is a viable way to search for recipes

3. Determine how users interpret the information on the screens (which ways do they use, ignore, or don’t see)

Subject: A high fidelity mobile prototype was used via Figma

Methodology: An unmoderated test was run through Maze.co 

Recruitment: Posting a link of the Maze test on Slack and Facebook

Tasks:

1. Create an account by entering an email address and a password.

2. Create a dietary preference profile for your family of three. Your family must eat halal and your partner is allergic to gluten.

3. Take a picture of an onion, tomato, spaghetti, and chicken breast.

4. You are in the mood for baked chicken pasta. Find an Italian dinner recipe that you can make in 30 minutes or less.

Results from the usability test

Based on the results from the Maze testing, Task 1, 2, and 3 were successful with scores above 84%. However Task 4 scored a success rate of 41.7%.

Participants: 90 testers

Overall task completion rate: 93.4%

Give-up/Bounce rate: 6.7%

Tasks:

1. Create an account by entering an email address and a password.

   Success rate: 84.9%

2. Create a dietary preference profile for your family of three. Your family must eat halal and your partner is allergic to gluten.

   Success rate: 94.6%

3. Take a picture of an onion, tomato, spaghetti, and chicken breast.

   Success rate: 95.2%

4. You are in the mood for baked chicken pasta. Find an Italian dinner recipe that you can make in 30 minutes or less.

   Success rate: 41.7%

Based on the usability breakdown from the Maze report, the average misclick for Task 4 was 35%. Task 4 had a low score as the buttons did not have a clear call-to-action and the task required too many steps within the filter, resulting in the highest misclicks from the entire test.

Post-test commentaries confirm Task 4 was the most confusing

• 15/49 of testers thought the tasks were straightforward 

• 34/49 of testers were confused and frustrated in some/all of the tasks

• The filter for Task 4 was the most confusing to complete

IDEATE (AGAIN)

Revising critical screens to reduce misclicks

I reviewed the screens and data tied to Task 4 to figure out what I should do to improve the user experience. For the first screen, the call-to-action (CTA) button is located at the bottom of the modal. The testers couldn’t figure out what to click in order to move to the next screen so they clicked everywhere until they reached the end of the modal. To reduce the number of misclicks, I raised the modal higher on the screen to reveal the CTA button. I converted the tags into a horizontal scroll to create more real estate for the CTA button to appear.

I added the horizontal scroll for tags on this screen to keep the features consistent across the app. Based on feedback from the testers, the filter label is “too small” and “a bit little for me and was hard to find and click on it”. I created a CTA button for the filter so it’s clear you can click on it.

Figma prototype capability is limited so the task must be simple

Although the filter had the highest misclick (80%), the visual design was not the issue. Instead, my task had too many steps for the tester to complete on the Figma prototype. When you’re setting the hotspots for the Figma prototype, the tester must click on the exact order. If not, the tester cannot move forward with the task. My task required the tester to click three tags in the filter: “Under 30 minutes”, “Dinner” and “Italian” in order to proceed. Since the testers were not aware of this, they naturally clicked everywhere until they can be taken somewhere else.

For the next round of usability testing, I will have the tester select one tag from the filter. This information is enough for me to determine the user understands where the filter button is located and they know how to click the tag to narrow the recipes.