Savr
Mobile app making it easier for
people to follow new recipes and
cook great meals at home.
Project type
Solo Challenge
Tools
Figma, Adobe CS
Design Method
5 Day Design Sprint
Role
Product Designer
DAY ONE
The Problem
Savr is a recipe app designed to help home chefs learn new skills, explore recipes, and cook great meals. While users love the quality and diversity of options, Savr has received negative feedback about the instructions for some of the more complicated recipes. Users specifically noted issues with timing, preparation, the order of steps, and how they learned new cooking techniques - ultimately leading to stressful a cooking experience and underwhelming end results.
In the course of a 5 day Google Venture design sprint, I am tasked with finding a way to improve the recipe instructions and create a more successful user experience.
Insights
As a part of this challenge I was provided with prior research data, a user interview, as well as a user persona to better understand the issue at hand.
The main insights I have gained are:
Users would like to feel as prepared as possible when starting a recipe (this may include knowing ingredient prep steps in advance, what utensils/pots will be needed, or even what certain techniques mean).
Users would like to know that they are doing things correctly throughout the process (this would allow them to catch small mistakes before it’s too late, or boost confidence if they are on the right track).
Persona
Nick is a 29 year old home chef who enjoys learning new cooking techniques by trying new recipes.
Nick’s Frustrations
Often feels unsure if he’s on the right track while cooking
Isn’t always clear on what’s next, and what steps he can be working on in advance
Stresses out having to refer back to his phone mid-recipe when a new technique comes up
When a dish didn’t turn out right, he doesn’t know why
Nick’s Goals
Follow a recipe easily and confidently, so the dish comes out as expected
Wants trying new recipes to be enjoyable and challenging rather than stressful and chaotic.
User Flow
Now that I understand the problem, I created a possible user flow for the end-to-end experience of cooking a recipe using Savr.
How might we...
After thinking through the user’s typical path, I brainstormed HMW’s from the provided user research. Looking for patterns I settled on a design focus to move forward with:
How might we write and display recipes clearly?
DAY TWO
Lightning Demos &
Research
On day 2, I started my process of lightning demos by researching a few similar apps in the design space. I looked at some popular recipe apps, but also expanded my search to some other “how to” apps.
Tasty
Highest rated recipe app in the app store
They start with videos of each recipe
Include photos of how others made the recipe
Ingredient list included option to change the number of servings
List out instructions but also offer “step by step” mode” - which includes written instructions and a video
Epicurious
Clean design with lots of white space (but also lots of words!)
Reviews and serving size displayed prominently
List of ingredients next
Prep is in long paragraph form
Icon in bottom right opens a screen with list of “tips” - but they don’t seem to be tips, just a repeat of the recipe
LEGO
First you choose the set you’ve purchased
Can choose between “3D” or “PDF” instructions (3D is only available on some sets)
PDF option is a digital version of the set’s booklet that you can page through
3D option mirrors the PDF steps but lets you explore each lego piece in 360° as well as each step.
Once you got into instructions, things were formatted horizontally
I explored a few other apps including Yummly and Hometalk. Yummly relied on links to outside websites for their directions so each recipe was a different experience. Hometalk’s DIY instructions were user generated, so they were also a varied experience based on how well the writer was.
Sketching
Crazy 8’s
With the knowledge from my lightning demo research fresh in my mind, I moved onto Crazy 8’s sketching exercise. I focused on how I wanted my recipe to be organized and laid out.
Eight minutes goes by quick, but I was able to get a good idea of what things I wanted to focus on and how I would like to display the information. Recipes are usually a long scroll, and people like to know different things upfront (some want to see ingredients, others want to know if they have the tools needed). I wanted to find a way for all the information to be easily accessed.
Storyboard
Looking through things I decided on a combination of ideas. I like being able to see all the different headers (ingredients, utensils, instructions, etc.) without having to scroll. So I worked on the main portions of a scrolling screen showing how that will look.
DAY THREE
Storyboard
Before jumping into a higher fidelity prototype I went ahead and used Figma to create low fidelity mockups of the user flow for a Savr recipe. My main goal was to address the complaints I heard about on day one. While keeping in mind the design traits I saw in popular recipe apps.
Recipe Launch Screen
On the main landing page for a recipe I wanted to give the user a general idea of what to expect with a dish:
Show recipe ease, timing, servings, reviews, and small description
Give users a choice of what to do next…
Start gathering ingredients
Check to see if they have all the tools
Jump right into the recipe
Recipe Tabs
Once you jump into the details of the recipe you can tab between the list of ingredients, tools, or the directions.
Step by Step Recipe Guide
On the directions tab there is an option to go through the recipe step by step rather than having to scroll. To address one of the user complaints I made sure to include photos and tips throughout the recipe.
DAY FOUR
Prototype
Using my wireframe sketches as a guide, I jumped into creating a prototype for tomorrow’s user testing. I grabbed a recipe that I knew well so creating clear step by step instructions and including tips would be easy.
I focused on including helpful visuals and concise wording, so users could follow along without any stress or confusion.
The Recipe
If you haven’t planned dinner yet I can recommend this recipe, I’ve cooked it many times and it’s very tasty. Here’s the link to the original “Budget Bytes” Teriyaki Meatball Bowl I used for this prototype. All credit for the photos & delicious meal belong to her.
DAY FIVE
Usability Testing
On the last day of the sprint, I arranged for 5 user interviews. I focused on people that had used recipe apps before but had a varied level of cooking skill. I had them walk through the app as if they were actually cooking the meal. Overall the reviews were positive, but there was also some room for improvement.
Positive Insights
Users loved having the amounts listed in the instructions, so they didn’t have to go back to the ingredients page.
Generally, the more experienced cooks liked the scrolling instructions so they could move through them quickly. The less experienced cooks liked the step by step structure and the included tips.
Photos were helpful for everyone to visualize what everything was supposed to look like at each step.
Room for Improvement
Users voiced wanting to see the ingredients on the main page, rather than having to click to get to them.
The “open step by step directions” button did not stand out so users missed it, they also were confused by the name because they felt the scrolling directions were also “step by step”.
Shauna pointed out that it would be helpful to have a timer funtion built into the app so she didn’t have close the app to pull one up on her phone.
In the step by step screens users didn’t like that some of them scrolled, they would like it to be one stationary screen per step.
If I had the resources and time, I would have liked to have users actually cook the meal. I think unique problems would arise if users were in their own kitchens getting their hands dirty rather than just discussing things over zoom.
Next Steps
Overall it was clear that we’re heading in the right direction for a better user experience with the recipe instructions. Moving forward I would focus on a few things to make the experience even more seamless for users.
Move ingredients (and other tabs) to the main recipe screen instead of having buttons there. This would allow users to jump immediately to the part of the recipe they’d like to see first.
Make the “step by step directions” button more clear. Users want to know it exists and how it differs from the scrolling instructions.
Add a timer function within the app.
A great tip from one of the user tests was keeping the screen lit, so they didn’t have to fumble with dirty hands to turn their phone back on.
Lessons Learned
This design sprint was a great exercise in not overthinking. Jumping right into the research and design process without getting lost in the minutea allowed me to set up a recipe app that was simple and not overly complicated, which it turns out is all my users really wanted. I took things I liked from other popular apps (like pretty photos and clear instructions) and grabbed a recipe I knew well so I could include helpful tips. The quick turnaround in getting feedback means I can immediately fix issues in my layout to make it an even better user experience.