SAVR
Cooking made easy
Platform | Mobile App
Design Tools | Adobe XD, Invision
Method | Google Ventures Design Project
​
Project Date | July 2021
My Role | Product designer responsible for research, design, prototyping, and testing
Overview
SAVR is a new startup that features hundreds of home chef recipes and cooking instructions. There is a thriving community of users who rate and review other people's recipes.
Problem
Recently, SAVR has received some critical feedback concerning recipes with a lot of steps or complex procedures. Many users who were thrilled about a recipe are dissatisfied with the results because the instructions were unclear and difficult to follow.
Day One
Mapping and Understanding the Problem
Users are enthusiastic about trying new recipes and culinary techniques, but they become frustrated when the results are not met. This is due to ambiguous preparation instructions, a lack of visual aides for how the dish should look at each stage, and needing to continually consult their phones for directions.
How might we present recipe instructions in a way that is more intuitive and comprehensive to users?
Day Two
Sketching Your Solution
I looked at how other website recipe services make searching for recipes and meals easier for users. I was particularly interested in the layout of the recipes and how they were organized.
Epicurious' search tool is simple and straightforward, making it simple for users to find what they're looking for.
With easy-to-use filters, Pinterest was able to balance large volumes of information and give users the option of choosing whatever option speaks to them with no enforced hierarchy.
When browsing Tasty's website, you'll see how many options they present for their customers while keeping their tiles simple and easy to understand.
Crazy 8's (Sketching Excercise)
Day Three
Decide and Create a Storyboard
I decided to add videos for each step to tackle the problem of continually referring back to one's phone while cooking and doubt about how the dish should look. Another step I took was to emphasize cook time, prep time, and serving size right at the start, so the user can change their minds and go on to another dish as quickly as possible.
Day Four
Prototype
I started thinking about how I could turn the sketches and ideas into design potential while working on high-fidelity screens. I then built out the prototype in Adobe XD and shared it with users once it was ready to test.
Savr allows users to search once they arrive at the home page.
Users are able to explore different cuisines and collect badges giving them a sense of achievement​
There are four separate sections that are easy to switch between.
Users are able to see the prep and cook time along with information about the dish
Users are given step-by-step directions with videos, making the process simple and straightforward.
Checkmarks are provided for each step to help users keep track of their progress.
Day Five
Test
To test the usability of my design solution, I interviews 5 participants who aligned with the target user. I briefly introduced the prototype followed by some activities to test usability and any concluding thoughts and impressions.
When interviewing users, some key takeaways were:
-
Adding a servings amount
-
Adding how much prep time will be
-
Small changes to personalization actions
What's Next for SAVR?
I would have explored the concept of incorporating a grocery list feature if I had more time with the project. Users would be able to add certain foods or ingredients on their phones as a result of this. Another addition I'd like to see is a filter that allows users to exclude particular items. In either case, extra resources added would boost user support, making SAVR a more versatile tool.