Solo Design Sprint — Savr Recipes
Timeline: 5 days
Design brief provided by: BitesizeUX
Tools: Figma, Goodnotes app
Reading through a recipe is easy, but when it actually comes time to cooking in the kitchen, things can get quite chaotic if you don’t know what you’re doing. You have to prepare ingredients, gather utensils, and try to time your dishes so they finish cooking at the same time.
What is Savr?
Savr Recipes is a startup that wants to make it easier for people to follow new recipes and cook quality meals at home. They’ve received positive feedback on how users are able to find and select quality recipes, but users are not satisfied with the process of following the recipe when cooking.
My goal this sprint is to develop a solution that will be featured through their mobile app that helps users follow the recipes easily and accurately.
Day 1 — Map
What do we know?
Savr has found from through primary research that:
- users want to avoid surprises and stress while cooking and to be efficient and accurate when following recipes
- users appreciate knowing that they’re on the right track throughout the process
- an ideal experience would be for the user to know what to prep beforehand rather than having to prep ingredients while they’re cooking and to avoid unnecessary kitchen utensils
What problems am I trying to solve?
- How might I help homecooks with their timing for complex recipes?s
- How might I show the homecooks that they are on the right track throughout the recipe?
- How might I help home cooks avoid using unnecessary dishware?
User Map
To start imagining solutions that could come from this sprint, I mapped out the ideal end-to-end user experience. The map focuses on as if the customer has already found the recipe they want to try and is going to start cooking.
The key to an ideal Savr experience:
- knowing what ingredients and utensils to prepare beforehand
- knowing what to expect in the recipe and no sudden surprises
- knowing if they are on the right track throughout the process
Day 2 — Sketch
To get some inspiration for my screens, I surveyed other applications during Lightning Demos and sketched out multiple variations of my key screen during a Crazy 8s session.
Lightning Demos
Kitchen Stories is a recipe application. I liked that the app showed their users a breakdown of the cooking time or any extra time that would be involved in the recipe. It also shows the ingredient list that auto-adjusts to the number of servings the user wants to make. The screen in the middle shows the How-To Videos that Kitchen Stories offers their users. This allows them to learn skills that they might need in the recipe. On the right, it shows a screen from their ‘cooking mode’, which breaks the steps down and allows the user to swipe through the recipe as they go through the process. The progress bar is also helpful in showing the user how close they are to completing the recipe.
Yummly is another recipe application. I liked that the app also broke down the steps of the recipe and provided images for each step. When the Yummly app is in its ‘cooking mode’, it begins with a checklist that prompts the user to measure all their ingredients and gather the necessary equipment.
It’s important to gather inspiration from apps outside of the industry, so I took to the fitness and education world. Skillshare is a teaching website that provides several online courses. Each lesson is also broken up into their individual videos to make it easy to navigate through the course. The Betterme. Application is a fitness app that offers its users a variety of workouts. During the workout, it gives its user a preview of what’s coming up, this allows for there to be no surprises throughout the workout. There’s also an option to view the equipment necessary and navigate back and forth through the steps.
From these two applications, I think it would be helpful for each recipe step to have its own image or video and for the users to navigate freely through the steps depending on their progress.
Crazy 8s
Once I took a look at other applications for inspiration, I took 8 minutes to sketch out variations of the recipe page screen that users can get all the information they need for the recipe. This exercise allowed me to come up with different screen variations and not get bogged down by details.
The necessary details on each screen were: utensil and ingredient list, cook time, and recipe steps.
Solution Sketch
From the Crazy 8s exercise, I chose a blend of a couple of screens that stood out to me. The critical screen of Savr Recipes is the individual recipe pages. Therefore, my solution sketch includes the screen prior, which is when the user would select their desired recipe. Also, the screen after which shows the ‘cooking mode’.
Day 3 — Decide
Creating a Storyboard
For my Savr storyboard, I started the user journey with the homepage and the user selecting their desired recipe. Then, the user can scroll through that recipe and see the ingredients, tools, and skills necessary to cook the dish. The recipe will also be split into preparation and cooking steps. When the user is ready to cook, they’ll enter the cooking mode which has videos/images of each step broken down. Lastly, when the user finishes cooking the meal, they can go look for other recipes.
Day 4 — Prototype
My goal for the prototype was to see if the users have all the necessary information presented for them to follow the recipe efficiently. Using my storyboard, I was able to create a low-fidelity prototype quickly using Figma. The prototype assumes that the user is starting their experience on the homepage and choosing a recipe they want to follow. It incorporates enough detail so I could run user tests to see if the added designs are successful in making the cooking process easier.
From the survey insights collected, users want to know what items are necessary and refer to their phone less. I incorporated ingredients and utensils lists so the users could browse that information easily in one place. On the recipe pages, there’s also a section to view the skills you’ll need throughout the recipe so users can review those before cooking. The prep section added is meant to reduce the number of surprises throughout the cooking process. Each step also has its own image or video to show the cook that they are on the right track.
Day 5 — Test
From my user tests, I had 5 interview participants who vary in their cooking skills and experiences, but all have experience following recipes from digital sources or cookbooks. I wanted to test the ‘cooking mode’ and to get feedback on the layout of the recipe page and if there is any other necessary information that should be included in the process.
I wanted to get an idea of how the participants would approach new recipes and how they feel about cooking. I began the test by asking the participants these questions:
- How do you usually discover new dishes to try?
- Do you like to follow recipes exactly or experiment?
- How do you feel when you try cooking a new dish?
Majority of the participants discover new dishes through online sources (e.g. social media, cooking videos) and only one participant liked to experiment with dishes mostly so he didn’t have to go purchase ingredients he doesn’t have. The three more experienced participants feel excited when trying a new recipe, but the other two feel mostly nervous.
What did I learn from the tests?
- The ‘Start Cooking’ button doesn’t stand out against the color of the ingredients list
- One beginner cook said that having the skills learning section was helpful, but other participants skipped over it.
- Prep time and cook time section takes up a lot of space on the recipe page.
- 2 participants mentioned that they liked the ability to adjust the serving sizes because often they usually do the calculations themselves when following recipes.
“I liked that there was a preview of what the next step was so I knew what to expect.” — Zain
“The preparation section was helpful because I like to get as much prep out of the way before I start cooking.” — Amanda
“After I cook a new dish, I like to take a photo of it so I can remember it. That might be a fun feature to add.” — Olivia
Final Thoughts
This design sprint taught me a lot about not getting caught up in details and the benefits of getting a product tested quickly and frequently by its users. Although my test prototype was missing lots of details, I was still able to get valuable feedback that the design changes were helpful in making the cooking process more efficient and easy to follow.
