savr
RE-envisioning Savr's UX to Alleviate User Frustrations and Create a Seamless Cooking Journey
My Role
UX/UI Designer
Timeline
5 Days (April 2024)
Tools Used
Figma, Adobe Photoshop
Background
Home chefs using Savr often struggled with confusing recipe instructions, leading to frustration and mistakes in the kitchen. Despite its diverse and high-quality recipes, the app’s text-based steps were hard to follow, causing issues with timing, order, and technique.
To address this, I undertook a modified 5-day Google Ventures Design Sprint. My goal was to redesign Savr’s mobile app to create a more intuitive and seamless cooking experience, making instructions easier to understand and follow accurately.
day 1:
mapping the problem
Research reveals that users want to be prepared and efficient, with clear visibility into the cooking process. They desire accurate time estimates, guidance on multitasking, and timely introduction of ingredients and techniques. Additionally, users appreciate knowing if they are on track throughout the process and want to minimize wasted effort from mistakes.
The solution should address these pain points, enabling users to confidently try new recipes while ensuring a successful and enjoyable cooking experience.
day 2:
sketching
Lightning Demos
I conducted rapid evaluations of various mobile apps to find inspiration for improving Savr's recipe experience. While focusing on cooking/recipe apps and apps with similar multi-step processes, I also examined Sweat, a fitness app with real-time guided workout routines. This app demonstrated how to effectively structure and present step-by-step processes to keep users on track.
By exploring both cooking and analogous apps, I aimed to gather diverse design patterns and perspectives to create an intuitive, streamlined solution for Savr's users when following recipes.
App 1: NYT Cooking
Big Ideas:
Recipe overview with an enticing introduction
Unique “Add Note” functionality for personalization
Ingredient substitution guide available
Convenient “Add to Grocery List” feature
Ingredient checklist functions like a real list
Bold highlighting of the current step when tapped
App 2: Kitchen Stories
Big Ideas:
Recipe intro by app chef with user feedback updates
User-uploaded photos for realistic expectations
Lists recipe difficulty level
Time breakdown: Preparation, Baking, Resting
Access to “How to” videos for techniques
Lists utensils needed for mise en place
Ingredients listed in each step
Each step shown on its own screen with a progress bar
Easy photo upload upon completion for comparison
App 3: Sweat
Big Ideas:
Overview of equipment with substitution options
Workout overview similar to NYT Cooking and Kitchen Stories recipes
Add a music playlist to your workout
“Up Next” preview of the next exercise
Built-in timers for a smoother experience
Crazy 8’s Method
I then chose my most critical screen - “Step 1” of the recipe - from the maps I drew on Day 1 to apply the Crazy 8’s method. This screen is where users start cooking and need clear instructions and tools to complete their tasks confidently. It’s the most complex screen, requiring an intuitive organization of items and options to help users feel in control and successful throughout the cooking process.
Solution Sketch
I rounded out the day by sketching out the screen before and the screen after my most critical screen, namely the main recipe page and then Step 2 of the recipe.
day 3:
decide
Storyboard
Because I was working on this sprint solo, I proceeded with creating a storyboard around my solution sketch from Day 2. I focused on creating a straightforward process with clear choices, and tools readily available to the user as needed.
I then developed an 8-step storyboard to map out the ideal user experience and envision the overall flow. The storyboard incorporates functionality ideas like voice commands, progress tracking, and inline videos for techniques. After the prepared dish is plated, the user also has the ability to proudly share photos of the completed dish.
day 4:
prototype
Next, I created a focused yet immersive mid-fidelity prototype to capture the core user journey. I incorporated high-fidelity visuals at key moments to elevate the overall experience flow, while utilizing dummy text where appropriate to save time.
The main flow is the guided cooking mode that takes users step-by-step through the entire recipe.
My goal is to garner insightful feedback on whether progress-tracking and inline technique videos enhance recipe-following confidence and ease of use.
day 5:
validate
To evaluate the Savr recipe app prototype, I conducted user testing with 5 diverse participants.
Participants responded positively to the clean, visually appealing design and found the step-by-step cooking experience intuitive. They particularly appreciated the video guidance and the convenience of hands-free voice commands. Users valued having all necessary information within the app, eliminating the need for external sources like YouTube.
However, some icons were unclear, and there were mixed opinions on the level of detail in technique videos. Balancing expertise levels emerged as a key consideration for future refinements.