SAVR recipes

Savr Recipes is a new startup that wants to make it easier for people to follow new recipes, and cook great meals at home, with hundreds of recipes, and cooking tips.

This project is the modified Google Venture Design Sprint that takes 5 days. 

iPhone 13 Mockup-1.png
iPhone 13 Mockup.png
iPhone 13 Mockup-2.png
My role 
Ideation, design, prototype, testing
 
Team

Solo UX/UI Designer

Tools
Figma,  Zoom,
Google forms
Duration
5 days

Problem

There is an active community of users who rate and review recipes for other users in the app. Recently, Savr has seen some negative reviews about recipes that involve many steps and advanced techniques. Also, there was a lot of feedback regarding timing, order of steps, and actually preparing the meal.

Solution

Adding video instruction along with step-by-step process instructions may help improve the user's experience. This way users can follow steps in real-time and have visuals of the preparation process.

Design Constraints
  • Recipes are written as text, in ordered steps from start to finish 

  • Solutions should be designed as a feature for an app 

  • Focus on creating a better experience for users when it’s actually time to cook

Google Venture Design Sprint Process

Design Sprint Process.png

Day 1

Map

Day 2

Sketch

Day 3

Decide

Day 4

Prototype

Day 5

Test

User persona

Nick 29y.o.,Los Angeles, CA

AdobeStock_338963731_b_edited.jpg

Behavior

  • Nick cooks about three nights a week - usually for himself, but sometimes for him and his girlfriend

  • Most of the time, he enjoys cooking and trying new recipes. He thinks following a recipe is the best way to learn some of the most basic cooking techniques

  • Nick likes tweaking or improving certain recipes, but he doesn't feel comfortable improvising until he has cooked it "by the book"

Frustrations

  • Sometimes Nick is unsure that he's on the right track" halfway through preparing the meal

  • Nick isn't always clear on "what's next* and how he can prep a few steps ahead. This often leads to mistakes, or a lot of time wasted

  • If a dish doesn't come out as expected, he doesn't really know where he went wrong, and he feels disappointed in the meal, and that he didn't really learn anything for next time

  • Nick gets stressed out trying to refer back to his phone every time a new technique or step is introduced

Goals

  • Follow a recipe easily and confidently, so his dish comes out as expected

  • Nick wants trying new recipes to be enjoyable and challenging - not stressful and chaotic

Insights from the research:

IMG_7900.PNG

“There are some parts I don’t enjoy, like emptying my cabinets because I don’t know what kitchenware I need, or constantly needing to wash my hands so I can refer back to my phone”

 

Maria

IMG_7901.PNG

“Sometimes I feel like steps sprung on me and that turns an enjoyable experience into a stressful one. I like to be as prepared as I possibly can before I start cooking things I can’t undo”

 

Anna

IMG_7902.PNG

“I can see what the finished product looks like but I don’t know if I’m on the right track halfway through…is it supposed to look like this?”

 

Dan

“I like to be ready for the next few steps. Sometimes I’ll be standing around waiting, and it’s not until later that i realize I could’ve saved 20 minutes by starting on something else”

 

Lindsey

IMG_7903.PNG
IMG_7904.PNG

“I know the basic definitions  - like, what minced Garlic should look like. But a lot of times I see techniques that I am totally ulcer on. I google image search on youtube it…”

 

Sara

How Might We Problem Statement

How might we make cooking instructions accurate, clear, and easy to follow?

How might we show users that they are “on the right track” during the cooking process?

How might we show advanced techniques as something easy to learn?

How might we show all ingredients and cookware needed for the recipe ahead?

How might we make timing better?

Day 1: Map

On the first day of the sprint, I mapped the flow the user would go through from wanting to prepare a new recipe to enjoy the meal.

Me Project  - iPad Pro 12.9_ - 1.png

The user of SAVR recipe would: 

  • Launch the app to find a new recipe to cook

  • Select recipe

  • Check if all ingredients available at home

  • Create shopping list 

  • Get all ingredients using the created list in the app

  • Follow written step-by-step instructions or select a video step-by-step instruction

Day 2: Sketch

Competitive research: Lightning Demo

To get started on sketching the app, I researched a few competitors to find out their strengths and weaknesses. I focused on Kitchen stories, Meanlime, and Tasty apps.

1. Kitchen stories

IMG_7911.PNG
IMG_7910.PNG
IMG_7912.PNG

Insights:

  • The level of difficulty is shown in each recipe

  • Easy option to add more servings, all ingredients change due to the number of servings

  • How-to videos of advanced techniques in each recipe

  • Nutrition information 

  • Step-by-step instructions are written by scrolling down the page or step tracker with one step shown on the page and a tracker on the bottom 

  • The amount of each ingredient and utensil needed for each step are shown below the picture of each step

  • There are videos for some recipes 

2. Meanlime

IMG_7906.PNG
IMG_7907.PNG
IMG_7908.PNG

Insights:

  • Timing, serving size, and save button are shown on the top 

  • By clicking on cookware user can see a picture of it 

  • Cooking instructions are shown with the number of ingredients in each step 

3. Tasty

IMG_7913.PNG
IMG_7914.PNG
IMG_7915.PNG

Insights:

  • Each recipe page has video instructions from start to finish

  • An option to follow text instructions or step-by-step video instructions with each step shown with video and text below the video 

  • The list of ingredients can be checked on the step-by-step instruction page

Ideation: Crazy 8's Sketching

To illustrate the critical screen I used the “Crazy 8s” method to sketch eight distinct ideas in eight minutes. I chose the last sketch because it shows all the necessary information on the top of the screen and includes video instructions for the recipe.

IMG_7917.JPG

Three-panel board

After identifying and sketching the critical screen, I created a ​three-panel board of the screen that comes before the critical screen, the critical screen itself, and the screen that comes after the critical screen to show how a user interacts with an interface, what results from their interactions, and what the user will do next.

IMG_4364.PNG
IMG_4365.PNG
IMG_4366.PNG
IMG_4367.PNG

Day 3: Decide

On day 3, I selected the final solution and created a 8 steps storyboard to illustrate how the Savr application can be used to cook new recipes.

 

Based on the insights I got on the first and second days, I decided to include the timing and difficulty level of each recipe container on the main page with all recipes. 

 

Focusing on Nick's goals, to make cooking instructions clear and easy to follow, I added an end-to-end video of the recipe instructions on top of the recipe details page, and an option to choose to follow text or video step-by-step instructions. 

 

To follow step-by-step video instructions and track progress, I came up with a separate page and tracker at the bottom of the screen. All ingredients can be checked on this page by tapping on the icon on the right bottom of the screen.

On the recipe details page, I added the ingredients and cookware page, where users can check the list of everything needed for the recipe and also see a picture of utensils. 

 

The how-to page will show a detailed video of the advanced techniques needed for this recipe.

All recipes
All recipes

press to zoom
Recipe details
Recipe details

press to zoom
Share photo and write review
Share photo and write review

press to zoom
All recipes
All recipes

press to zoom
1/9

Day 4: Prototype

Day 4 was dedicated to creating a high-fidelity prototype to further test it with users. I used Figma to create a fast, realistic design and implement solutions. 

 

Mostly, I followed my sketches, and just added some features like a timer, that pop-ups on the same page as a recipe, so users wouldn’t have to use a separate application to track time.

 

Also, on the review page, I decided to add an option to input the time that the user spent cooking a certain dish. This feature might be helpful for showing a more accurate preparation time.

Try the prototype yourself

Day 5: Test

On the final day of the design sprint, I conducted testing with 5 participants who prefer homemade food and cook at least 3 times a week.

Almost all participants expressed the same opinion about the design and usability of the app. So I decided to combine all the insights in a simple table.

Positive

Design is great, clear, and includes cooking time and difficulty level. This information that most users usually focus on while searching for a new recipe.

Video instruction is a must-have! This feature each participant highly appreciated and was very excited to see.

Adjusting servings, checking cookware, and how-to videos - are very useful and extremely helpful. One user even said “WOW” after seeing a “How-to” feature.

Adding ingredients to a shopping list right from the recipe page is a delight and a time saver.

Needs improvement

Wasn’t clear to users that tapping on the timer in the recipe will start the timer.

 

In step-by-step video instructions, it is not clear what the icon "Ingredients" means and what it indicates. 

 

When using step-by-step video instructions, under the video, where is cookware and ingredients, it all looks like whole text, and it is difficult to read ingredients when there are many of them.

 

Some terminology, such as Al-dente, needs more exploration.

Would be better to add substitutes for ingredients and cookware.

Project takeaways

  • Techniques “Lightning demos” and “Crazy 8s” are very useful. The second technique, at first, felt a little bit intimidating and I was worried about time but then I realized that 6 screens were done and there were still 2 minutes left. And the results I saw were awesome and plenty of options to choose from.

  • Design Sprint is a great fast process to check a possible solution. I enjoyed working on this sprint!

Next steps for this project

As a next step, based on insights that were discovered during testing, would be great to:

  • Make the timer stand out from the text in the recipe by adding animation. This will show users that they can start the timer directly from a recipe step.

  • On step-by-step video instruction change the layout of “ingredients” and “cookware”, and add icons to it 

  • Add a tooltip that will show the users what they can do while something is cooking

  • On the cookware page, add a button to add utensils to the shopping list or a link to buy them on Amazon (or anywhere online/offine)

  • On the “Write review” page add an option to share recipes/results on social media and a button to save them in the profile 

  • Add an automatic timer (when a user taps on the "start cooking" button) that appears at the end and tracks how much time a user spends on the recipe

More projects

MacBook Pro 16.png

Languify

iPhone 13 Pro.png

Parkegy

Fitness.png

Fitio