12-Hour Mobile App Design Sprint
SAVR RECIPES
THE PROBLEM
While Savr users enjoy searching for new recipes on the app, Savr recently received negative feedback about the experience of cooking the recipes.
The user research revealed two key pain points:
Lack of efficiency
Lack of support
THE SOLUTION
The new Savr experience includes elements that guide and support less-experienced home cooks through each recipe.
Added features include:
Process photos
Ingredient photos
Prep videos
Tips for each step
Built-in timers
Plating advice
MY ROLE
Challenge Maps
Lightning Demos
Sketches & Storyboards
Prototype
Usability Tests
Report & Recommendations
Note: I approached this sprint like a solo hackathon, giving myself only 12 working hours to complete the process. The timers reflect how long I spent on each stage of the sprint.
“Sometimes I feel like steps are sprung on me, and that turns an enjoyable experience into a stressful one… I make a few small mistakes, and I feel like everything is downhill from there in terms of timing and flavor.”
Past Savr User
“I can see what the finished product looks like, but I don’t know if I’m on the right track halfway through. Is it supposed to look like this? If not, it’s better to know sooner rather than later.”
Past Savr User
RESEARCH ANALYSIS
& CHALLENGE MAPS
Savr provided research highlights including eight user quotes, one user interview, and a user persona. From these artifacts, I identified two key pain points.
Lack of efficiency - users didn’t feel that the recipes allocated time appropriately and they didn’t like having to refer back to their phones throughout the process
Lack of support - users needed more guidance with unfamiliar cooking terms and ingredients, and they wanted more process photos in addition to final product photos
To develop a deeper understanding of the problem, I mapped the current app experience and outcomes. This helped me understand the key moments that the app failed to meet the users’ needs and expectations. From there, I dove into ideation by creating an ideal state map.
Users were already satisfied with app navigation and the community aspects. The clear top-priority task was to optimize the experience of following the individual recipes. This could be done in a few ways.
The top level flow shows the simplest solution - just rewrite the recipes for clarity and add process photos/videos. The bottom flow was much more ambitious - turning the entire recipe into a video or podcast that plays throughout the cook. The middle flow maintained a standard written recipe approach, but included several helpful elements that guide the user through the cook. This was the solution I decided to explore further, as it felt both innovative and on-brand.
LIGHTNING DEMOS /
COMPETITIVE ANALYSIS
To kick off the lightning demos, I first looked at top-rated recipe apps that offer certain features geared toward efficiency and support. I landed on the NYT Cooking App.
Then, I searched for an app that specifically prioritized hands-free efficiency. This led me to the Allrecipes app, which integrates seamlessly with Amazon Alexa products.
Finally, I wanted to look at an app that prioritizes process photos and videos. I have used the Joule app before, and remembered that it offered strong guidance for each step of the cooking process.
New York Times Cooking App
Efficiency:
Basic cook time provided
Some prep throughout to save time at top
Some notes on combining ingredients to save dishes (depends on recipe creator)
No hands-free option
Support:
No definitions
One final result photo, no process photos/videos
Other notes
Requires subscription
Features widest variety of recipes from renowned cooks
Allrecipes App
Efficiency
Two time notes: hands-on and total time
Some prep throughout to save time
Hands-free option through Amazon Alexa devices
Support
No definitions
Tips from reviews provided
Several final result photos, no process photos
Other notes
Requires subscription
Recipes appear as they do in magazine - not optimized for mobile app
Joule App
Efficiency
Wide range cook time provided
Hands-free option through Amazon Alexa
Support
Each step broken down into sub-steps with process videos for each
No option to just read the steps so requires a lot of clicking
Other notes
Limited recipes and recipe creators unknown
All are focused on sous vide
No public reviews
SKETCHES
& STORYBOARDS
I referenced a New York Times recipe for Korean dumplings after hearing one user describe an unsuccessful attempt to cook a Korean recipe. After looking at those steps, I launched into the Crazy 8 exercise, sketching eight versions of a new and improved step two.
Top three sketches:
The solution needed to solve for both efficiency and support, so I wanted to incorporate all of the following elements most requested by users: clear instructions, process photos, time-saving tips, timers.
I decided to proceed with the third sketch, as it offered all of the requested elements and required the least amount of phone touches (scrolling, clicking) per step.
After thinking about the user actions before and after the “Step 2” screen above, I made a lightweight wireframe to showcase the interactions a user might take after selecting a recipe. The natural order appeared to be:
Choose recipe
View ingredients and shop
Start prepping
Follow all recipe steps in order
Plate and enjoy
Rate recipe and provide feedback
PROTOTYPE
I created my prototype in Figma. The challenge here was building the prototype without actually having seen the rest of the app’s UI and brand design.
I adjusted language from the example recipe to make sure that instructions were clear and the process was as efficient as possible. I also incorporated process photos and tips for each step of the recipe.
USABILITY TESTS
For the usability tests, I focused on three primary questions:
Can users navigate the interface to successfully complete the cook?
Is the language clear and accessible to a wide variety of users?
What added elements will be the most - and least - helpful?
I interviewed three home cooks: one beginner, one intermediate, and one advanced. I asked each of them to navigate through the Korean dumpling recipe as they would if they decided to make it for dinner tonight.
“Love that the ingredient photos give you an idea... like what does shredded zucchini actually look like? Or sometimes people aren't sure of the difference between chopped, sliced, and diced. So I like that.”
Prospective Savr User
“I like it - I need something like that. I need a companion with me in the kitchen. It's like a better version of a cookbook. A way more organized way of looking at recipes than searching for them on Google.”
Prospective Savr User
FINDINGS &
RECOMMENDATIONS
Usability Test Results
Can users navigate the interface to successfully complete the cook?
100% of users were able to successfully complete the cook with minimal issues
100% of users said that they would feel confident actually making this recipe
Is the language clear and accessible to a wide variety of users?
80% of users asked about the meaning of ‘Save Recipe’ button
60% of users questioned the need for prep tip language when the video and step 1 should cover it
What added elements will be the most - and least - helpful?
100% of users commented positively about the the built-in timer and had not seen that feature on other recipe apps in the past
80% of users noted that they enjoyed the videos and process photos
80% of users requested a way to navigate more easily through the steps instead of going one by one
Critical Issues
After ranking the criticality of the above issues, I focused my efforts on fixing the following elements:
Prep page
Remove text that would be featured in the video or step 1
Add language about why users should watch the video
Navigation
Add progress bar so users can see their progress and easily navigate across steps
Save recipe button
Change language to reflect more common verbiage to save content within app
I implemented the changes and completed the sprint in just under 12 hours.