Day 1
Understanding the problem & Experience Mapping
SAVR is a popular recipe app designed to make home cooking easier and more enjoyable. However, users face challenges with following complex recipes, ingredient availability issues, and a lack of seamless user experience, which disrupts their cooking flow.
To enhance their experience, I focused on understanding these pain points in-depth and exploring ways to make the app more adaptable and user-friendly. My goal was to provide seamless navigation, convenient substitutions, and intuitive guidance to support users throughout the cooking process.
The Problems
User feedback indicated three main challenges with the current app:
'Inefficiency in Recipe Navigation'
53% of users struggle to follow recipes smoothly, often needing a simpler, step-by-step format.
'Insufficient Support for Ingredient Substitutions & Preparation'
68% of users want to see alternative ingredient options based on what they have at home.
'Lack of Hands-Free Functionality'
42% of users expressed the need for hands-free option to make the cooking process more efficient.
The Solutions
Introduce a clear, step-by-step recipe navigation system
Simple, sequential layout:
presents each recipe in a clear, step-by-step format to ease navigation.
Guided instructions:
Provides structured guidance to ensure users can follow complex recipes with ease.
Provide alternative ingredient suggestions and preparation guidance
Offer a substitution feature:
Suggests alternative ingredients based on what users have at home, providing flexibility.
Include visual guides for preparation:
Adds images and checkboxes for each ingredient, helping users track items and easily find substitutions.
Enable hands-free, voice-controlled navigation
Voice-activated commands:
Allow users to move through steps without needing to touch the screen, enhancing convenience.
Hands-free mode for cooking:
Enables seamless navigation of recipes, particularly helpful when hands are occupied.
User Persona
Experience Mapping
I created this experience map to show how Henry would use the SAVR recipes app for a seamless cooking experience. The goal is to deliver an end-to-end solution that helps users achieve ‘the perfect meal’ while meeting their needs. At the end of Day 1, I translated Henry’s challenges into ‘How Might We’ (HMW) questions to guide the design process.
HMW assist users in improving cooking efficiency?
HMW support users in being well-prepared before they start cooking?
HMW provide step-by-step guidance and tips when trying out a new recipe?
Day 2
Lightning Demo
I conducted lightning demos, exploring top-rated recipe apps to understand their efficiency and support features, user-friendly navigation, and how they present photos and videos of the process.
'Tasty'
✓ Strengths
Step-by-step guidance
Hands-free option
Social sharing
Prep/Cook time listed
Includes photos/videos
✗ Limitations
Limited substitutions
Some recipes complex
Contains ads
Lacks nutritional info
Limited cuisine types
'New York Times Cooking'
✓ Strengths
Recipe variety
Total cooking time provided
User reviews
Detailed techniques
Food-related articles
✗ Limitations
Limited substitutions
Some recipes complex
Contains ads
Lacks nutritional info
Limited cuisine types
'Paprika'
✓ Strengths
Customizable recipes
Organized shopping lists
Meal planning
Personal recipe input
Dietary management
✗ Limitations
No recommendations
Limited visuals
Non-intuitive features
No hands-free option
Limited free version
Crazy 8s
Inspiration from the lightning demo, I created eight different design ideas through rapid sketching.
The goal was to address both efficiency and support needs, so I incorporated elements most requested by users: clear step-by-step instructions, substitute with image suggestions, preparation checklists, process videos with tips, and timers for each step of the recipe.
3 Panel Storyboards
Using an idea selected from the Crazy 8s, I started creating 3 panel storyboards.
The first panel, the Beginning screen, shows what a completed dish would look like, giving users a visual goal. It includes key details like serving size, prep time, and a list of ingredients with substitution options.
The second panel, the Critical screen, provides an ingredients list for users to review before cooking, with options to adjust servings and measurement units. As users proceed, a looped video with clear, step-by-step instructions, a pre-set timer, and helpful tips guide them through the cooking process.
The final panel, the End screen, confirms the recipe completion with a ’Bon Appétit!’ pop-up message, celebrating the successful finish of the dish.
Day 3
Storyboards
The following storyboard outlines the user’s journey through each step of the recipe process, highlighting key interactions and support features designed to enhance the cooking experience.
Day 4
Prototype
I designed a 17 screens prototype in Figma to illustrate the step-by-step process of making ‘Seared Scallop Pasta’, focusing on enhancing the user’s experience by offering clear instructions, helpful tips, and interactive features throughout the cooking journey.
Day 5
Usability Test
I conducted a round of moderated remote testing with 5 participants via Zoom to evaluate how easily users could follow a recipe using the initial prototypes.
The testing focused on three main questions:
Can users easily navigate each step of the recipe without confusion?
Are the language and icon in the app easily understood by users with varying cooking experience levels?
Which features or components (e.g., substitute ingredients, voice commands) are the most useful, and which ones do users find less helpful?
Key Improvements
Based on feedback from usability testing with 5 participants, I refined the design through iterations, leading to key improvements.
Enhanced Design & User-Focused Recipe Exploration
Redesigned the logo for a modern, sophisticated, and approachable brand identity.
Simplified category icons with text for a cleaner and more intuitive UI.
Added ‘Recommended For You’ to offer personalized recipe suggestions.
Enhanced recipe card with difficulty levels, ratings, and a save icon for quick bookmarking.
Added descriptive text for each navigation icon and adjusted the color layout for better distinction.
Refined Step-by-Step Cooking Experience
Replaced loop videos with play/stop buttons, offering better navigation and accessibility.
Changed ‘Chef’s Tips’ to specific, detailed tip labels to provide clearer guidance.
Adjusted the placement of ‘Timer’ and ‘Tips’ to align with the natural cooking process.
Final Prototype
Conclusion
This 5-day design sprint was both challenging and rewarding. The short timeline required me to quickly spot problems and create practical solutions. Despite that, I stayed focused on creating meaningful solutions within a short timeframe.
Here are my takeaways:
Visual Guidance Builds Confidence
Ingredient images and substitute options helped users make quicker, more informed decisions.
Flexibility Enhances Accessibility
Adjustable servings, units, and a shopping list improved inclusivity and ease of use.
Clear Design Enables Navigation
Step-by-step instructions simplified the cooking process, ensuring users felt in control.
Empowering Accessibility Features
Adding play/stop buttons enhanced user control, making the app more accessible.
Designing for Real Life
Voice commands addressed multitasking needs, making the app practical and user-centric.
This project highlights how clear goals and a user-first mindset lead to impactful designs, even with limited time.
