Savr
Savr is a new startup that shows hundreds of recipes and cooking tips for at-home chefs. They have an active community of users who rate and review recipes for other users.
About
This project was a Design Sprint with the goal of tailoring the app for “A user who is looking for a recipe, with certain dietary restrictions to consider, and has chosen a recipe but wants to see alternatives to certain ingredients.”
Timeframe
The creation of this app took 1 week
The Problem
A user who is looking for a recipe, with certain dietary restrictions to consider, and has chosen a recipe but wants to see alternatives to certain ingredients.
The Solution
Based on the current research, interview, and personas, a common issue with following recipes is that the user frequently comes across multiple pain points halfway through the cooking process, or comes across techniques that greatly impact the final result of the dish being cooked.
My Role
I can definitely see this being an issue for someone with dietary restrictions, who may start cooking a certain tasty looking dish only halfway through to realize they are allergic or can’t eat a certain ingredient inside of the dish.
Research
In order to get a feel for what features are most important in a cooking app, I interviewed multiple users about their dietary habits
Key Quotes:
“I have a lot of dietary restrictions and sometimes that makes it hard to find recipes that are good for me. I’ll find a recipe that looks good but only after I start preparing the dish do I notice it has something I can’t eat in it.”
“Whenever I’m looking up recipes, I always see tons of dishes that contain ingredients that I don’t like. It’s really frustrating sometimes because I consider myself more of a picky eater, and there are lots of ingredients that just completely ruin a dish for me.”
“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 before I start cooking things I can’t undo.”
“A lot of times I make a few small mistakes, and feel like everything is downhill from there in terms of timing and flavor.”
From my research, I was able to imagine how the users were hitting a roadblock when it came to deciding what to cook based on their dietary restrictions. I was also able to visualize when in the process they could make a potential substitution to the ingredients being used in their dish. With this data, I created a user map.
User Map
Here I have drawn a map that shows how a user who is interested in cooking, but has a dietary restriction, would go through Savr in order to find a recipe that suits their needs. I have also sketched out a potential secondary route for them to go through if they are interested in replacing the ingredient they dislike with another one.
Savr Day 2: Sketch
Lightning Demos
Now that I know what users currently think of the application in regards to dietary restrictions, I used that information to narrow down on the type of competitive research I was doing. I focused my efforts on finding other competing cooking applications that were focused more heavily on ingredients available rather than just on recipes. I was able to find several competitors that focused their application on ingredients.
SuperCook
The first app I decided to look at was SuperCook, because it was billed as an app focused entirely around selecting certain ingredients. SuperCook is very good at allowing the user to select exactly what ingredients they want to use or already have on hand, and translating that into viable recipes. This ability to filter out everything that you don't have on hand seems incredibly important.
Mealime
The second app I looked at was Mealime, an app that automatically puts together healthy meal suggestions to you based on your diet. This app was very interesting because it is built entirely around filtering out dietary restrictions, allergies, and food dislikes. I like how it filters out all recipes that contain the foods and ingredients you don’t like right at the start, so you don’t even have to think about it.
CookPad
The last app I looked at was CookPad, a popular “traditional” recipe app, in order to see what the flows look like for a regular cooking app. It presents popular recipes at the start, and displays the ingredients and instructions in a normal format that you would expect a recipe to be displayed. I like how it also has a popular search section that also allows for you to search for ingredients, so you can try and find recipes that only are based around an ingredient that you like.
Sketches
Crazy 8s Exercise
I determined that the most important screen in order to solve our problem was going to be the actual recipe screen, where users are about to see a recipe for the first time but want alternatives for things they don’t want to eat or are allergic to. Multiple approaches were used, including a list of possible substitutions, a different tab to showcase alternative ingredients, and more.
Solution Sketch
I would like for the process of substituting ingredients to be as painless and quick as possible. I envisioned a process where, earlier, the user had already chosen to search for recipes that don’t contain a certain allergen, such as nuts, and then are shown an option to automatically replace all instances of nuts with replacements. Then, after they click on that, the application automatically replaces all instances of nuts in the recipe, including the instructions. By making it a seamless process, my theory is that the user won’t have to worry about constantly having to manually change the instructions in the recipe themselves, or constantly have to mentally change what they’re thinking about by reading the ingredients list all over again.
Savr Day 3: Storyboard
The storyboard sits at around 8 screens, where the user first opens the app and hits search. The app will then show a variety of recipes, along with the option to search for certain recipes. There is a Filter option in the search bar where the user can click and it will display common allergens that the user can then click on and filter their results.
After clicking on search, the user will then be asked if they want to show recipes that contain substitutions for the ingredients they have dietary restrictions for, or if they just want recipes that don’t show them to begin with. Then the user is shown recipes. After entering a recipe, the user has the option to automatically replace all instances of the allergens they filtered out earlier, which will trim the recipe for them and replace all instances of the allergen with something else.
When this is all done, the user is ready to cook!
I was pretty happy with yesterday’s sketches, and after reviewing my Crazy 8’s and the Solution Sketch again, I decided to run with the solution sketch and create a relevant storyboard. The storyboard will demonstrate a user journey where the person with dietary restrictions wants to cook a recipe, and make substitutions for the items they don’t want to eat.
Savr Day 4: Prototype
Now that my storyboard is done, I moved on towards making a functional prototype using the tool I am most familiar with, Figma.
Filter Function
The filter option is a simple dropdown menu that users can use to filter out ingredients they aren’t interested in. By using this feature, they are only shown recipes that do not contain the ingredients they want filtered out. After clicking search, users receive a pop up that asks the user if they want to use the substitution feature on the application, along with an explanation, so they understand what the feature is. Since it’s the killer feature of the application, I would prefer the users to use it, but I do retain the option to not use it just in case. The Substitution feature allows for the user to still see recipes that would otherwise be filtered out, as long as it has the option to substitute the ingredient with something else.
Substitution
If users utilize the Substitution feature and choose a recipe that has substitutions available, they are then given the option to automatically replace all instances of their disliked ingredient with a substitution. The application will then automatically take all instances of the disliked ingredient and replace it with something else that works in the recipe.
Savr Day 5: Testing
I found five participants to test out my prototype through friend groups, Discord servers, and online reddit communities. I conducted my interviews through Zoom, where I received their permission for video, screenshare, and recording.
Gloria: 36 year old Ultrasound Tech, passionate about cooking
Whitney: 36 year old Aerodynamics Engineer, ambivalent about cooking
Justin: 24 year old Data Analyst, loves cooking, but is allergic to many things.
Kyle: 23 year old Retail Worker, doesn’t cook much, picky eater
Royal: 31 year old UI/UX Designer, picky eater, but loves cooking
Findings
Filter Button issues: 4 out of 5 users thought the filter feature made sense, but were confused about what they were actually filtering out after they went further into application. They felt like the search bar perhaps needed some kind of “filter” tag that showed what items were actually being filtered out, in case later on when they’re looking at the recipes being suggested they weren’t sure what kind of recipes they were being shown and what was being filtered.
Substitution feature issues: 3 out of 5 users, after the application automatically filtered out the recipes for them and filtered out every instance of “Mushroom” with “Eggplant” thought the app should still show what the original ingredients were. So for every instance of Mushroom that got replaced by Eggplant, they thought it would be better if they were shown why it was replaced, or some kind of marker that showed that Mushroom had gotten replaced by Eggplant.
Back Button Requests: 2 out of 5 users wanted more back button options so they could go back and make changes to what they originally suggested. This makes sense since there are so many search and tagging options, so without a proper “go back” option it makes it confusing for users when they want to make changes to their search results.
Conclusion
This 5 day sprint with the Savr app helped teach me a lot of information in regards to how Sprints work. I learned a lot about the design process, how to come up with ideas based on an application that already existed, and how to further develop that application further in regards to a very specific portion of the application. Then I was able to quickly create a prototype and test that prototype with users, then record and write down that information to further develop the application.