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

I created two recipe versions for testing because I realized the first recipe was too simple. I needed to have a more complicated recipe to reflect the variations that are likely with recipes. What I hoped to test was the usability for chefs in the kitchen. I wanted the whole process to be simple and help keep their hands off the phone as much as possible while creating their concoction. With the chop step, we are getting all the pieces that could slow a recipe down in the middle done right at the
front. With the big numbers for the three steps, it shouldn’t be difficult to find where they left off in case they get interrupted and need to restart
the process.

The five interviewees cook at home several times a week for themselves or their families. They shared with me their cooking habits and preferences. While they all used recipes, none of them used a recipe app. They looked for recipes based on ingredients, ratings, and visual appeal. They preferred basic recipes with clear instructions, disliked excessive cooking times and complex recipes. They appreciated the app’s ingredient and kitchenware checklist. They found the app to be simple, straightforward, and easy to use, with upfront information being helpful. The testing sessions sparked their interest in using the app, unlike others they had tried before.

The main challenge faced by Savr Recipes was that its cooking instructions were too complicated and user-unfriendly, resulting in users struggling to execute recipes correctly. To address this issue, users expressed the need for upfront and concise information about each step, including the necessary utensils and preparation requirements. They also desired the option to dice and measure ingredients beforehand for a seamless cooking experience.

To simplify the process and decrease phone usage, two versions of the recipe were created, each with slightly different procedures, and tested for effectiveness. The testing involved five individuals who regularly cook at home multiple times a week. They responded positively to the recipe layouts, which included clear instructions and an ingredient checklist, and found the app to be straightforward and easy to use.

Overall, the testing sessions demonstrated that the app's improvements were successful, as busy users were able to enjoy a smooth experience clicking through and found the steps and design to be clear, clean,
and simple.

Previous
Previous

Upward Oakland

Next
Next

Friendtopia