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.
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
Day 1
Map
Day 2
Sketch
Day 3
Decide
Day 4
Prototype
Day 5
Test
User persona
Nick 29y.o.,Los Angeles, CA
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:
“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
“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
“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
“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.
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
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
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
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.
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.
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.
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
