Savr Recipes
An app where you will find the joy of cooking
Key Skills
Research, Affinity Mapping, Empathy Mapping, Persona, User Stories, User Flows, Sketches, Wireframes, Hi Fidelity Prototypes
My role
This project was done solely by me as part of the Springboard’s UI/UX Design program (created by Bitesize UX). I was responsible for the end-to-end design as a UX Researcher, UX Designer and UI Designer.
Timeline
FEBRUARY 2021
The Project
The Problem
Although Savr has received some positive feedback about finding quality recipes, they have recently seen some negative reviews about the process of recipes that involve many steps or advanced techniques. Many users reported that although they were very excited to start a specific recipe, they were disappointed with the outcome because the instructions weren’t clear enough and easy to use. Most of the negative reviews were about timing, order of steps, learning new techniques and preparing the meal.
The Solution
The Project
The Problem
This project is a one-person, 5-day Google Ventures style Design Sprint project prepared as part of the Springboard UX/UI Program. This design challenge was created by Bitesize UX who provided the problem, background information, user research, and design constraints to help a startup named Savr Recipes.
Savr is a new startup that wants to make it easier for people to follow new recipes and cook great meals at home. They have hundreds of recipes and cooking tips for at-home chefs.
Although Savr has received some positive feedback about finding quality recipes, they have recently seen some negative reviews about the process of recipes that involve many steps or advanced techniques. Many users reported that although they were very excited to start a specific recipe, they were disappointed with the outcome because the instructions weren’t clear enough and easy to use. Most of the negative reviews were about timing, order of steps, learning new techniques and preparing the meal.
The Solution
We should create a better experience for users to follow the instructions and steps once they start cooking a certain recipe. And it should be designed for the Savr mobile app.
DAY 1: MAPPING
The first day of my design sprint project was dedicated to understanding the problem and reviewing the existing research on the problem.
Savr has an active community of users who rate and review the recipes for other users. And recently many users have written negative reviews about the recipes with many steps or advanced techniques. They feel the steps are very complicated, unclear and difficult to follow.
The negative feedback is mostly related to:
-
Timing
“Timing everything together can be stressful for more complex recipes and meals. Sometimes I have to reheat a dish… that is a bummer when you take the time to make something fresh.” (Silvia)
-
Preparation
“I try to be as efficient as possible with how many pots and pans I’m using. There are a lot of times when I have to hand wash something midway through, when I really didn’t need to if I just changed the order of a few things.” (Ron)
-
Order of steps
“Sometimes I feel like steps are sprung on me … and that turns an enjoyable experience into a stressful one. I like to be as prepared as I possibly can be before I start cooking things that I can’t do.” (Anna)
-
How users learn and implement new cooking techniques
“... a lot of the times I see techniques that I am totally unclear on. I google image search or youtube it, which kind of throws everything off - and, means needing to drop what I am doing to use my phone.” (Sara)
Persona
After going over all of the user feedback and persona information, I created a map of the possible end-to-end experience.
DAY 2: SKETCHING
Lightning Demo Exploring Competitors
I started the second day of my design sprint project with inspiration: a review of existing ideas to remix and improve. I used an exercise known as Lightning Demos.
I spent some time exploring some popular recipe apps in the app store and analyzing how they solved their problem to use as an inspiration. I was looking for ideas that I could remix and improve to solve my own problem.
Tasty
-
Tasty is an easy-to-use app with a step-by-step mode.
-
Preparation time is on top of each screen.
-
When you open a recipe, first you see the ingredient list and nutrition info.
-
Below them, there are the steps for preparation and a button for step-by-step mode. When you click on it, you can watch a video that shows every step of the cooking process, and this will definitely make it easier and more clear to cook complicated recipes.
Kitchen Stories
-
Kitchen Stories is another popular app with 19k ratings in the app store.
-
It is an easy-to-use app with clear instructions.
-
When you open a recipe, you see the video of the process, ratings, reviews, the difficulty level, timing (for cooking, baking and resting separately), ingredients, utensils and nutrition values.
-
When you click on the ‘start cooking’ button, you see the process step-by-step with photographs, ingredients and necessary utensils.
Yummly
-
One thing that stood out to me is; when you decide to cook a meal, it makes sure you have all the ingredients and equipment. You see a checklist where you can check each ingredient and equipment and put a check mark when you prepare them.
-
After that you can move on to step-by-step instructions with an instructional video and ingredient and equipment list that are necessary for that specific step.
Yummly
Crazy 8’s
After reviewing the best practices and their solutions, I started to think of my solutions. I used the Crazy 8 method to create some iterations quickly.
Crazy 8 is a fast sketching exercise that pushes people to sketch eight distinct ideas in eight minutes. For this method, I chose the most important screen for our problem:
-
the screen once the user chooses a recipe and opens that specific recipe page
Solutions
After assessing all the solutions, I chose the 6th design.
I thought it would be a good idea to be able to watch an introduction video of the cooking process at first so I decided each recipe should start with a video on the top of the page. In this way, users can have an idea how difficult the process is and how the meal will look like at the end.
On the bottom corner of the video, users will be able to see the prep time. Below comes the ratings of the recipe and photos and reviews shared by other users who have tried this recipe before.
Then there are the ingredients, equipment, nutrition and preparation. In the preparation section there will be a ‘step-by-step’ button which will direct the users to step-by-step breakdown of the process. They will be able to see the videos, ingredient and equipment lists and instructions for each step.
But they can see all the preparation process on the main page of the recipe under the preparation title. I decided to use a play button next to each step on that page too. In this way, users can watch the video of each step from there too.
DAY 3: DECIDE
Storyboard
Day 3 of the design sprint project is creating a storyboard. While creating my storyboard, my main priority was simplicity and familiarity. I tried to create a simple experience for users to find a recipe and to follow the steps during the cooking process.
On the home page, there will be two options -
-
trending (the ones with the most popular and highest ratings)
-
new recipes.
There is a search button on the bottom navigation next to the home button. When users click on it, there is a search bar on the top where they can search any specific recipe. Below the search bar, there are some sample subcategories such as Pasta, Asian, Vegetarian, Desserts.
When the users select a recipe, on the top of the page there is an introduction video which will give users an idea about the process and how the meal will look like at the end.
Below the video, there are the ratings and reviews with photos from other users.
Then they can see the ingredient list, equipment list and nutrition info in order as well as the steps of the process with a play button next to each step. They can watch the video of the step when they click on the play button.
There is also a ‘step-by-step’ button. When they click on that button, they will see every step one by one, with a video of the step on the top of the page.
Below the video, there are the ingredient list and equipment list that are necessary for that step and the instructions for that specific step.
When they finish all the steps and cook their meal, they can rate the recipe and write a review. They can also share photos of their meal with other users.
DAY 4: PROTOTYPE
The prototyping process for this design sprint project was challenging because I had to decide and prioritize the most important screens in order to be able to finish everything in a few hours.
I designed a home screen and search page. I also designed a recipe page where users can find all necessary information such as cooking time, nutrition info, ingredients, equipment list, and preparation.
They can also find a button that directs them to the step-by-step mode. I found this function important for this project because one of the most important complaints of Savr users was that the steps were complicated and unclear. Therefore, I designed the step-by-step screens with a video and detailed instructions for each step.
Here is the link for my prototype.
DAY 5: TEST
The last day of the design sprint project is dedicated to talking to users and getting feedback from them. I conducted 5 remote usability tests over Zoom. I recruited users who like to try out new recipes through the slack groups and my personal network of friends. The participants were sent a link to the clickable prototype of the app prepared with Sketch.
When they first saw the home page, I asked them about their ideas. All of the participants said the pictures looked very nice and lively. Some of the participants said there is not a lot of information on the screen , which makes it clear and easy to follow.
Then I asked them how they would find the recipe, if they wanted to cook ‘spaghetti bolognese’. All of them found the search icon on the bottom navigation easily. When they opened the search page, some of the participants preferred to write the name of the meal on the search bar. There are also some sample subcategories given such as Pasta, Asian, Vegetarian, Desserts. Some of the participants preferred to click on the ‘pasta’ option and then find ‘spaghetti bolognese’ from there.
Once they opened the recipe page, I asked them how they would use this page while cooking. All of them first checked the ingredients to make sure if they had them at home. Most of them also said they would watch the introduction video first to see if they could cook the meal. And as they scrolled down, all of them preferred to use the step-by-step mode. They all said they loved this option because it is both easier to follow and more clear doing everything step-by-step. They all loved the videos provided for each step. One of them said she was never sure if her meal looked like it should so she said thanks to the videos she could see it. One of them said he loved to see the ingredients and amounts on every step page because he hates going back and forth to check the ingredients for every step.
Key Findings
-
Introduction video on the first page is good for users - especially for complicated recipes that have many steps - to understand if they will be able to cook the meal before they start the process.
-
Users expect to see how much time they need to prepare and cook a recipe.
-
Step-by-step mode is easier to follow and more clear to understand.
-
Videos in each step help users to understand how to proceed and if they are on the right path.
-
It is a good idea to show how much time they need for each step in step-by-step mode.
-
While doing one step, if there is another step that users can do simultaneously there must be a link or a warning that directs them to the other step. This way users will not lose time. For example, while they are cooking onions, garlic, carrots and meat (step 2), they can boil the spaghetti (step 4) at the same time. As the users won’t know it from the beginning, there must be a link there (step 2) which connects them to step 4 in case they want to do it at the same time.
-
One of the participants said she would love the step numbers at the bottom of the screen to be clickable so that she could go back to the step she wanted.
-
One of the participants said he doesn’t like his phone going to sleep mode while following a recipe so he would be happy if the app prevents that while it is being used. And also as his hands are usually dirty while cooking, he can’t touch his phone and he said it would be very efficient if the recipe apps had voice command options to move onto the next step. As I personally have these same problems while using the recipe apps, I thought these would be very good ideas to improve the app if I had more time to work on this project.
CONCLUSION
Lessons Learned
-
This design sprint project was both challenging and educational for me. It was tough not to take too much time to think about and improve every screen of the project.
-
At the same time having clear constraints helped me focus on the core problem and try something without overthinking.
Next Steps
-
As a next step, adding a voice command option would be great as it will be very efficient for users not to touch their phones with dirty hands while cooking. With the help of voice command option, users can proceed to the next or previous steps without touching their phones.
-
Another step would be adding a timer for the steps when users need a timer. So if they have to bake for 40 minutes, they can set the timer and remember to check their food after 40 minutes.
