Lisa F's profile

UX/UI Case Study: Design Sprint for Savr Recipes App

About the Sprint
Savr is a new startup that wants to make it easier for people to follow new recipes and cook great meals at home. They have hundreds of recipes and cooking tips for at-home chefs. They also have an active community of users who rate and review recipes for other users.
Recently, Savr has seen negative reviews about recipes involving many steps or advanced techniques. Many people who were excited about a specific recipe ended up disappointed with the outcome because they didn’t feel the instructions were clear or easy to execute.
Savr would like to create a better experience for users in the following scenario:
A user who has chosen a recipe and is in the kitchen - ready to start cooking and following instructions.
This modified GV design sprint is for quickly testing out possible feature solutions.​ A design sprint is conducted over the course of five days; each day has its own theme and specific set of tasks.

Duration Time
5 Day Sprint: This is an agile project with a short turnaround time.

Role
UX Research, Competitive Analysis, User Interviews, Customer Journey Mapping, Usability Testing, User Flow, ​​Ideation, Sketches, Storyboarding, and UI Prototypes.

The Problem
Users are having issues following the recipes to complete their cooking successfully and efficiently.

Define the problem: How Might We
• Follow a recipe easily and confidently, so the food comes out as expected?
• Make trying a new recipe to be enjoyable and challenging rather than stressful and chaotic?
• Make following any recipe more simple, straightforward, and easy to execute?
• Keep on track, utilize the time better, and be more efficient at prep work?
• Make recipes less complex and show more advanced techniques?
• Help users accurately and easily follow the cooking instructions?
Day 1: Understand & Map
Analyzing & Synthesizing User Research
I started by reviewing the existing research and insights from the design brief. I reviewed the user interviews, user statements, and personas.

Some of the insights I found:
• Timing: Prepare time / Prep time: users would like prep time included with the recipe instructions. Add prep time in addition to the cooking time. The actual time should consist of everything total.
• Include recipe instructions, add ingredients list, and what kitchenware you would need.
• Order of steps. What does it look like in each stage?
• Info on learning new techniques and tips. What is the difficulty level of the recipe?
• Design constraints: recipes are currently written as text, in ordered steps from start to finish.
• Design constraints need to be designed for Savr Recipes' native mobile app. It is to add a new feature to the existing app.
• Users are happy with the current recipes, just having problems with the execution of the cooking instructions.
• Need an overall better experience for the users to follow instructions and simplify the process.


Map
I mapped out a possible user scenario and their path starting with the user's selected recipe.
Day 2: Sketch Your Solution
Lightning Demos: Review Competitors & Similar Related Products for Solutions

I choose Tasty app, Yummly app, Allrecipes.com, and Hellofresh for inspiration and possible solutions.

Tasty
Is a direct competitor that is very similar to the Savr app. I like their videos and grocery bag features.
Yummly
It is also a direct competitor similar to the Savr app. I don’t like how they did their features, especially the cooking directions.
Allrecipes
I use Allrecipes regularly to find and learn new recipes that I print out. Instructions are easy and straightforward.
HelloFresh
I’m familiar with cooking Hellofresh meal kits, and I like the instructions on preparing and cooking the food. It is very easy to follow along with.
Crazy 8s Method: 8 Sketches in 8 minutes
I chose the recipe instructions page as the most critical screen of the app. Here are some possible solutions variations to the screen on which the user would complete the primary activity.
Solution Sketch
The screen I chose was # 2. This one uses a tab system I would like to try out.
Below is a three-panel board of (1) the screen that comes before your critical screen, (2) the critical screen itself, and (3) the screen that comes after your integral screen.
Day 3: Decide & Create a Storyboard
The storyboard would start with selecting a recipe, and you are in the kitchen ready to start preparation for cooking. This storyboard is the path my wireframes will follow:​​​​​​​
The home screen would be where you would select the recipe; then, the following screen is the critical recipe screen. Then you would scan the recipe page for vital information to determine if this recipe is the one you would like to start cooking. The tab system has three sections for important info. The first tab is the recipe basics and a checklist of ingredients and kitchenware. The 2nd tab is for instructions on tips and techniques. And the last tab has the main cooking instruction and a step-by-step button. I broke the step-by-step down into separate screens for each step with a photo or video of the cooking process. This was to isolate and simplify the cooking instructions.

Wireframes
I started developing the wireframes, and I decided that the step-by-step should have a hands-free voice control function and how that should look.
Day 4: Prototype
After the wireframes fleshed out the user flow, I created the prototypes.
Day 5: Validate & Test
I conducted remote video interviews with four avid home chefs who love to cook and try out new recipes; Peter, Michael, Alissa, and Justine.

Here is what I learned from my interviews:
• It was suggested to me that maybe the problem is the copy and not the useability. They also did not like the copy on the calls to action buttons. I would get a copywriter to adjust the copy for better recipe directions and CTAs.
• The recipe page should start with the recipe first, not the ingredients list. Everyone wanted the tabs reordered. I would change the tabs to first “recipe (step by step)”, 2nd “ingredients” and last the “tips and techniques” for a better user experience.
• Half of my users liked the instructions to be scrollable and the others liked the instructions on individual pages. In future versions, I would offer both options.
• Everyone liked the hands-free voice option so they could follow along and not touch their phone with dirty hands.
• They all like to have short video instructions with each step and liked the various information offered about each recipe. Add more videos and fewer images.
• They did not want a checklist for ingredients unless there was an “add to cart” feature otherwise they would prefer it to just be a list.
• Overall they liked the features but not all of the execution. They all expressed interest in using a recipe app after trying the Savr app.
• Would like some way to jump from step to step by numbers, perhaps using anchors to quickly get to a specific instruction.
In Conclusion
My feature did not turn out as the best solution but the user test was a success in seeing what I should do in future versions of Savr app. I would perform several A/B tests in the future for testing out ideas for new features. I feel that some of my changes did help make the app easier to use but need more user testing and trying out other possible solutions.
UX/UI Case Study: Design Sprint for Savr Recipes App
Published:

UX/UI Case Study: Design Sprint for Savr Recipes App

Published: