Savr Recipes
Incorporating Visual Aids in Recipe Instructions through a 5-Day Design Sprint
1
2
3
Introduction
Savr Recipes is a fictitious startup that wants to make it easier for people to follow new recipes, and cook great meals at home. Users have given negative feedback regarding their cooking experience while following a recipe in Savr. I have been tasked by Savr to improve usability of the application by employing Design Thinking.
My Role
Sole UX/UI Designer. Distilled actionable insights from previously generated user interviews, sketched potential solutions, converted sketches into a high fidelity prototype, and conducted usability testing on this prototype.
Problem
Users are confused about unfamiliar or complex cooking techniques and the overall cooking process while following a recipe in Savr, leading to a negative experience.
Solution
Through a modified Google Ventures design process I have addressed these pain points by incorporating visual aids in recipe instructions.
Day 1: Understanding the Problem
Quotes from User Interviews
“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?”
“I know the basic definitions - like, what minced garlic should look like. But a lot of times I see techniques that I am totally unclear on. I google image search or Youtube it, which kind of throws everything off.”
Being unsure if they are on the right track throughout the cooking process.
Confusion about new or complex cooking techniques.
Pain Points
Map of User Flow
Day 2: Competitive Research & Solution Sketching
Competitor Research (Lightning Demo)
Bilt provides instructions for assembling a variety of structures
Yummly provides access to cooking recipes
Lego Builder provides instructions for assembling Lego sets
Takeaways:
Summary of time estimate, number of ingredients, number of steps, and nutritional information are common practice
Cooking instructions are typically text only
Assembly instructions are typically visual and/or auditory
Crazy 8
The recipe instruction screen was the focus of initial sketches because it is the most crucial, and frustrating, step in the process for users. Takeaways from competitor analysis and user pain points informed decisions about the layouts of the sketches. Incorporating visual aids throughout recipe instructions are meant to reduce user confusion and frustration stemming from lack of clarity.
Solution Sketch
Summary information about the selected recipe.
Recipe instructions with demonstrations of steps to mitigate user confusion.
Similar recipes and user feedback.
Day 3: Storyboarding
The storyboard represents screens a user would interact with when completing the red route task of finding, and reading through, a recipe. Sketched screens were refined and new pages were incorporated based on Lightning Demo.
Storyboard
4
5
6
(1) Recommended feed of dishes
(2) An Explore page where users can select a specific category of food
(3) Recipe splash page displaying image of the completed dish and summary information of the recipe
(4) Recipe details
(5) Recipe steps
(6) Feedback page
Day 4: Building the Hi-Fi Prototype
High Fidelity
1
2
3
4
5
6
The color palette was chosen to reflect brand identity.
(1) Recommended feed
(2) Explore feed
(3) Recipe splash page
(4) Recipe details
(5) Recipe instructions
(6) User feedback
Day 5: Usability Testing & Redesign
Test Methods and Participant Characteristics
5 moderated usability tests with mobile Figma prototype. Participants consisted of women and men in their mid-twenties that cook on a daily basis, and try new recipes at least once a month.
Hypothesis
The use of visual aids in recipe instruction will reduce confusion about cooking techniques and improve cooking experience.
Result
4 out of 5 participants stated they liked the videos accompanying written recipe instructions and felt it would improve their experience during the cooking process by removing confusion about steps and providing visual guidance.
“I like the videos cause I’m a visual learner, so that’s perfect.”
Redesign
Problem: lack of confidence regarding quality of recipes leading to increased time spent searching for recipe
Solution: improve confidence in quality of recipes
Feature: social reviews of recipes through 5-star rating system on recipe images
Problem: confusion when doing calculations to adjust recipe serving size
Solution: remove need to do calculations to adjust serving size
Feature: serving size adjuster that automatically calculates ingredient quantities for various serving sizes
Prototype
Reflection
The pain points of users being confused about cooking techniques and being unsure if they are on the right track throughout the cooking process have been addressed by the use of visual aids in recipe instructions. User frustration has been reduced and design decisions have been validated by positive user feedback. Through this process, I have come to better understand the importance of organizing design iterations to contribute to effective documentation of design decisions. I have also learned the value and importance of maintaining scope in order to achieve deadlines and effectively utilize the design sprint process. Future steps for this application will include designing the onboarding process, which will inquire about user dietary preferences, habits, and restrictions. Additionally, incorporating features like sharing, reels, and posting to give the application a social media lens may benefit user engagement. Further user testing is necessary to gauge the effectiveness of changes and new features.