Savr

A cooking app to help cooks enjoy cooking with confidence and to cook foolproof recipes successfully

Role: UI/UX Designer

Timeline: 5 Day Google Venture’s Design Sprint

Challenges

Startup cooking app received negative reviews for unclear recipe instructions

Savr is a new startup company that shows hundreds of recipes, and cooking tips for at home chefs. They have active community users who rate and review recipes for other users. Recently, Savr has seen some negative reviews about recipes that involve many steps, or more advanced techniques.

Solution

Provide enough guidance and resources into the app to empower users to cook with confidence

I participated in this project to come up with an app that will fulfill the user’s needs. I solely used the modified version of Google Ventures design sprint process- a five-day process for answering critical business questions through design, prototyping, and testing ideas with customers.

 

Research

Meet Sylvia- A home cook who gets stressed when she is trying to cook new recipes that involves too many steps

A home cook who enjoys cooking. Sometimes she gets stressed when she is trying to cook new recipes that involves too many steps. 

Sylvia’s Painpoint:

Demotivated with mistakes- Sylvia gets discouraged to finish cooking when small mistakes happen.

Unprepared for next steps- She is unsure how the food look in each step and feels unprepared for the upcoming steps.

Less confident with tools and terms- She feels less confident of what kitchen tools to use or when she doesn't understand cooking terms.

 

User Goals:

  • Provide additional contents for each recipe such as, cooking terms, common error and how to fix it, kitchen tools and prep ahead advice to help Sylvia create a foolproof recipe confidently.

  • Include images for each step of the cooking process so that she knows what to expect when cooking. 

  • Empower her so that she feels confident and efficient when following a recipe to cook. 

 

Mapping

An end to end journey addressing all the pain points of Sylvia when she cooks

Using the user goals and the pain point, I mapped out a possible route. I made sure to start from the point where the user is choosing a recipe to cook a recipe successfully without facing any challenges.

 

Crazy 8’s

Sketch out 8 variations in 8 minutes

Once I was satisfied with the route that will solve most of the users' needs, I started sketching different versions of my most important screen which is the recipe page following the ‘Crazy 8 method’.  It helped me to avoid overthinking the sketching process and to analyze which one will be the best design for the users.

I wanted to incorporate five features:

  1. Prep ahead

  2. Kitchen tools

  3. Common error

  4. Cooking term

  5. Visual aid

I sketched 8 designs keeping all the same components and figuring out 8 different layout options so that users can easily find them when cooking. 

 

Designing a clever navigation system into the page was very important to not confuse the users when they are looking over the useful information.

Sketch 3 is the winner!

I selected sketch# 3 as the most suitable design for the app. It has quicker access to go and view the 4 tabs that are related to the recipe.

Features

The Crazy 8 brainstorming exercise helped me to think of many different navigation layouts. The chosen design was appropriate because,

  • The four components icons are included in the bottom bar container of the app. They are not included in the main page to prevent confusion and to avoid scrolling the page to find each section.  

  • Main page shows the video, ingredients and direction with each step's image only.

  • Users can view what they feel comfortable viewing first based on their needs to cook successfully.

  • Enough information is shared to users to help them in each step of the cooking process.

 

 Wireflow

Quick storyboard of the user stories

I drew different flows where the users can:

  • Search recipes by ingredient.

  • Watch a cooking video for each recipe.

  • View image of every step of the cooking process.

  • View the kitchen tools and their alternatives that they can use.

  • View what they can prepare ahead of time.

  • View what can go wrong in the recipe and how to prevent or fix it.

  • Learn all the cooking terms and skills related to the recipe. It also has video tutorials. 

 

 High-Fidelity Prototype

Hammer out a prototype for the testing

Based on the mapping, user goals and sketches, I created a High fidelity wireframe. My main focus was to have easy navigation for the users. Viewing the recipe in the app while cooking can be challenging and confusing. I wanted to make sure that the layout of the recipe page was simple yet rich in useful content to help the users to enjoy the cooking process. 

In the recipe page I included four useful information:

  1. Kitchen tools and their alternatives

  2. Prep ahead 

  3. Cooking terms

  4. Common errors in the recipe and how to prevent it.

These are essential information to help the user prepare a dish successfully. My challenge was how to navigate the four contents in the main recipe page quickly. I wanted to make sure the users can easily access them in a few touches without scrolling or sliding the screen due to hygienic safety. 

Here you can access Savr Recipe’s interactive prototype.

 

 Testing

Learn from the real human

I conducted testing of my prototype with 5 participants. They are home cooks ranging from beginner to advanced level in expertise. Their ages ranged from 30 to 60 year.

I tested the prototype with the users by asking them following questions:

Conceptual questions

  1. Do you understand the point of the app?

  2. Would you use the app again?

  3. Is the app easy to navigate?

Usability questions

  1. Let's say you want to find a recipe based on the ingredient, how would you do that?

  2. Tell me how would you use the recipe page while cooking the recipe?

 

Items that needed improvement

 When observing the user, many understood the product easily, but few were a bit unsure of certain aspects.

  • One of the users didn’t recognize the icon buttons at the bottom of the page. 

  • Another user was unclear if the icon buttons at the bottom of the page was related to the individual recipe. 

  • User was not sure what each icon meant.

 

Items that went well

 I received a lot of positive feedback from the users because the app offered a lot of content to help cook recipes. 

  • Users liked that the recipe has video.

  • They liked the step by step cooking images.

  • They found the prep ahead, cooking term, kitchen tool are very useful features.

  • They were very impressed by the common error section, and some preferred viewing this section before starting to cook to avoid mistakes.

 

Updates on the app

After the user interviews, I realized that the contents were highly liked by most of the users, but the majority pointed at the bottom action icon button. They weren't sure what they were until they clicked it. So, I decided to add text below the icon button to make them more clear. 

 

 What did I learn?

Crazy 8’s brainstorming is effective

Crazy 8’s sketching session allowed me to quickly come up with different ideas and to think creatively. It also helped me to analyze each sketch thinking of which will be the most easy for the users to navigate and cook at the same time.

Preparation is the key before design

Rough sketching and mapping helped me to finalize what I wanted in the end product for the user. It saved time and it helped me to lay out all my ideas in a very short time. The different rough sketches, mapping, storyboard made the design process very smooth and quick in the Design Sprint Challenge Project.