Design Sprint
UX Case study
Savr Recipes
day one
D I S C O V E R Y
day two
C O M P E T I T I V E
A N A L Y S I S
day three
S T O R Y B O A R D
The PROBLEM needing to be solved for Savr Recipes is the complexity of steps and advanced techniques making cooking too difficult. The recipe instructions often don’t feel clear or easy to execute. Users like the quality of the recipes, but want a better experience when it comes time to cook the recipe.
The SOLUTIONS that users wanted were to have a better understanding of steps up front, including which pots, pans, and utensils are needed, so that there are no surprises when it comes to clean-up and steps needed mid-recipe. They would like to dice and measure in the beginning so that the cooking process runs much smoother and more predictably, while touching the phone less. Users need to know they’re on the right track throughout the process.
MY ROLE was the sole UX/UI designer.
After learning and understanding the problems with the existing Savr Recipes app, I quickly sketched a map that addressed the issues I found in the discovery phase. According to my map, a user will be able to review the ingredients and cookware right at the beginning. Then they will see a pre-prep section and be able to chop/dice ingredients upfront so there are no surprises in the middle of cooking. Large numbered sectional steps would help orient a user so they don’t waste time looking for steps.
I did competitive analysis for some existing products.. Yummly was, by far, the best of the three apps. The videos for each step of the instructions were very detailed and easy to understand. The step by step written instructions were pulled out in blocks from each other and made it easy to find your place. The shopping lists were very good and editable, you could even have the items delivered to you right from the app. There are also staggered steps so you can do everything in order so there are no surprises mid-recipe.
Recipe Box also wasn’t as detailed and fancy as Yummly, but I did like the separation of instructions so that it’s harder to get lost when looking away to do your cooking. There was also a fast video to watch showing how ingredients go together.
Recipe Keeper wasn’t very fancy and didn’t have a wow factor, but I
did like how simple it was. You could add the meal to your meal planner, and adjust the serving size. You could also blow up the instructions
and ingredients, using multiple size variations for people who need
bigger type.
Yummly
Recipe Keeper
S K E T C H I N G
day four
P R O T O T Y P E S
day five
V A L I D A T E
C O N C L U S I O N
Recipe Box
The critical screen I chose to sketch is the numbered sectional steps. This screen is critical to using the app effectively because it’s where one would make choices about which step they want to pause on while they are actively cooking. The crazy 8 sketches helped me determine aesthetic options. I also sketched the before and after screens.
I start the user at the recipe selection stage, where they will be able to choose a recipe. After they click on their recipe choice, it will lead them to a list of ingredients to make the recipe. Clicking the next button will show them the type of cookware they will need. After clicking next again, they will be prompted to gather ingredients and cookware to prep for cooking the recipe. Clicking next again will bring the user to the active food prep phase, clicking on 1 will lead them to the screen where all the chopping will happen. Clicking on 2 will show them which items will need to be mixed prior to cooking. Clicking on 3 will lead the user to step by step directions for active cooking. This process addresses the issues that users didn’t like about the app before.
I created two recipe examples to show variation in simplicity/complexity. Each recipe in my prototypes starts with an ingredient checklist, with each ingredient having a plus symbol next to it, that when clicked, can be added to a shopping list. As an alternative, all ingredients can be added to the shopping list in one click. On hitting the next button, the user will be able to see all kitchenware that is needed for the recipe. Touching next again will bring user to a numbered list
of steps.
Features include:
lock screen in settings (for when the app is open)
collected recipe saver
shopping list (as stated above, user can add all ingredients to shopping list, or just needed items)
clickable numbers that jump directly to desired step
https://www.figma.com/proto/FMQMVGocOj6a5sikU90vqA/Design-Sprint-(recipe-app)?page-id=0%3A1&node-id=1%3A2&viewport=148%2C441%2C0.74&scaling=scale-down&starting-point-node-id=1%3A2