SAVR Recipes - Case Study
GV Design Sprint Challenge
Overview
This project was conducted based on a design challenge from Springboard and Bitesize UX in order to simulate the GV Design Sprint process. SAVR is not a real application and all research was documented outside of this challenge.
SAVR is a mobile app that allows users to find and cook recipes. They have a growing library of great meals and an active community of at home chefs. While they get great feedback on the quality of their recipes, SAVR users have found it difficult to prepare some of their more complex recipes. I have been tasked to conduct a design sprint to help them figure out why users have trouble with their more complex recipes.
Duration
1 Week - July 2021
Tools
Figma, Miro, Google Docs
Day 1: Map
User Interviews, Problem Statements and Solution Mapping
Information from user interviews were provided to me as part of the Bitesize UX design sprint exercise.
Maria was interviewed to better understand her problems while cooking challenging recipes. During the interview Maria said that complex or unfamiliar ingredients cause her stress. Some steps on the recipe weren’t clear and she had already moved on to the next step. Ideally she would want to have all the steps laid out in a logical order including preparation, not just the cooking steps.
How might we provide clear instructions that show users each step of the process?
Day 2: Sketch
Lightning Demos and Crazy 8’s Sketching Exercise
I used lightning demos to look at great solutions from other companies that could have a similar problem to solve.
Google Maps uses an excellent step by step guide to show users directions. It is filled with imagery and icons to help educate users on the next steps to take.
Both Chipotle and Starbucks have good use of visual hierarchy to section off the various parts of the ordering process. Well defined visual hierarchy will help users during each step of the cooking process.
Yummly shows ingredients for a recipe in a checklist. This flow could help users to know what steps they’ve completed during the cooking process.
I next completed Crazy 8 sketches in order to flush out ideas for how to approach solving this problem. I found that there were pros and cons to each option that I sketched. I immediately ruled out any that had pagination since users will likely have their hands full. I also wanted to make sure users could look to see what’s coming up next and possibly be alerted of any important steps. After careful consideration I decided to proceed with option 6, which shows each step of the prep and cooking process in a card view. Users will scroll to see more options. The card seemed like the best option as it creates visual separation between steps and allows for the right amount of text and imagery for each step of the process.
Once I settled on an idea I created another sketch to flush out more details. After a few iterations I decided that I would take it to the next stage and create a storyboard of the workflow.
Day 3: Decide
Storyboard
My storyboard stretched out my sketch idea into a few more screens as shown here. I cleaned up the card and added space for an image, which will be key to solving the problem of users not knowing what their food should look like during the process. I also decided not to pursue a solution for the ‘areas of concern’ portion of my original idea as most users would read ahead or visually see the upcoming steps when cooking.
Day 4: Prototype
I decided to use Material Design as my framework for this prototype since Figma’s library makes rapid prototyping so easy. SAVR doesn’t have any branding so I kept the design simple and to the point. I found not having any information about the company or application to be frustrating during the process. The image card from Material Design worked really well for showing and explaining each step of the cooking process to the user. The large image field will also help the user know what their food should look like while cooking. Here are some screenshots of the prototype I created:
Day 5: Test
On the final day of the design sprint it was time to test our prototype with users. I interviewed 5 users who enjoy cooking but all have different levels of experience. There was a wide range of opinions of the flow of the application but several key takeaways that all users mentioned. One of these key takeaways was using checkboxes on the ingredients page. Everyone I interviewed said that they like to check off ingredients as they’re getting ready to make sure they have what they need. All in all I found that these interviews really helped me highlight areas of the app that could be improved and validated parts that were really solid.
“I really like [the review cooking tools and utensils page]. In cooking you’re supposed to mise en place, which is the process of preparing all the tools and ingredients before you cook. This is an important step when cooking so you don’t get lost or forget to do something.”
Final Thoughts
Overall I found that this design sprint was a helpful way of quickly getting to the bottom of a problem. Being able to understand a problem then prototype and test it in the same week is very valuable. In the case of this project I found myself wanting more context around both the company and the application itself. Having the context behind an application and where it’s trying to go can be helpful in solving problems.