Overview
Savr is a new startup with recipes and cooking tips for a community of at-home chefs who rate and review recipes.
Duration:
1 Week
My Role:
Solo UX/UI Designer
Design Challenge
“Timing everything together can be stressful for more complex recipes or meals.” - Silvia
Savr has received negative reviews on complicated recipes regarding too many steps and advanced techniques because the steps were not clear or easy to execute. In this 5-day modified Google Ventures design sprint, the company assigned me to help users accurately and easily follow cooking instructions.
Design constraints:
Recipes are written as text in ordered lists from start to finish
The solution should be designed as a feature for the native mobile app
Focus on solving user problems after the user chooses a recipe and is in the kitchen ready to prep and cook meals, not when finding or choosing recipes
The Solution
SAVR provides a plethora of cooking information within its library of user-created recipes based on any level of cooking. The app provides flexibility for ingredients and includes concise cooking instructions so users can focus on cooking up something delicious while minimizing stressors.
Design Process
Day 1: Understand
Research Review
Affinity mapping of the provided user interview data revealed three themes:
1. Efficiency
Home cooks have limited time and energy, thus wanting to minimize idling or washing extra dishes when possible.
“I try to be as efficient as possible with how many pots and pans I’m using.” - Ron
2. Clarity
Cooks look for detailed and clear instructions to ensure they are on the right track.
“I like to be as prepared as I possibly can be before I start cooking things that I can’t undo.” - Anna
3. Flexibility
At-home chefs acknowledge dishes require a certain range of accuracy to achieve desired taste and texture.
“A lot of times I make a few small mistakes and feel like everything is downhill from there in terms of timing and flavor.” - Anthony
HMW ?’s
The revealed themes are used to establish the main goals
How might we optimize cooking instructions for the most efficiency?
How might we maximize clarity in cooking instructions for home cooks?
How might we ensure flexibility during the cooking process?
Solution Mapping
Using the goals, end-to-end experiences were mapped out
With goals in sight, it is time to ponder possible solutions. I mapped out a couple of end-to-end experiences and iterated them into a final map that satisfied both user needs and project constraints. The solution would take the user from launching the app to successfully making a dish.
Day 2: Sketch
Lightning Demos
Inspiration from existing solutions
Before sketching, I did lightning demos as a quick form of competitive analysis. I selected a few popular apps that provided step-by-step guidance and displayed concise information. My goal was to be inspired and learn from existing solutions that may guide some strong ideas.
Early Sketching
The cooking tutorial is my most critical screen to draw
After reviewing the solution map I made on Monday, I selected “Follow steps/techniques to prep and cook” as my most crucial screen within the user journey. Due to the main function of my solution being to help users accurately and easily follow cooking instructions, I knew the step-by-step screen would be the screen to execute this. I utilized the Crazy 8’s exercise to visually brain-dump as many ideas as I can.
Solution Sketching
My solution involves three features
Supplemental videos and audio to help clarify and provide multiple ways to ingest cooking steps.
A Guided Cooking mode to review key information for each step including ingredients, supplies, and techniques.
Alternative cooking options based on ingredients, taste, and restrictions.
This led me to create a more detailed solution sketch of my critical screen (middle) as well as the screens that come before and after it in a 3-panel sketch. This allowed me a brief glance into the wider context of my screen and allowed me to consider more nuanced user interactions.
Day 3: Decide
The Storyboard
Deciding upon providing cross-references in a guided cooking mode
The storyboard takes the user through the process of opening the app, locating their bookmarked recipe, reviewing recipe information, and receiving step-by-step cooking directions till completion. I utilized the three-panel sketch from the previous day as the framework and built it outwards from there. I made sure to include any vital UI elements on each screen to display the minimum action required.
Day 4: Prototype
Building the Prototype
Designing out the bare essentials
To create my prototype, I utilized a full day to build out hi-fi screens with some trial runs to ensure everything was set for testing the next day. My primary goal was to rapidly create a believable facade, which entails only designing out the bare essentials to provide minimum functionality. While making the prototype, there were many last-minute changes I wanted to implement. However, I stuck behind my original ideas and utilized the time to polish the prototype instead.
Creating the UI
Designed with functionality and minimalism in mind
I selected Georgia for its text clarity while being rustic, like a home-cooked meal. CTAs and key information utilize the primary color or are bolded to help highlight key information and features. With recipes being text-heavy, I utilized more visuals to provide space and balance to the pages.
Day 5: Test
Usability Testing
I ran 30-minute tests with five participants via Zoom
Participants had to personally cook often at home as a criterion. Each interview followed the Five-Act Interview structure to prompt the most productive tests possible. The scenario tasks are associated with the primary intentions behind my usability test:
Discover if users would likely use the Step-By-Step feature
Find the recipes clear and easy to follow
Test app flow and functionality
Results
“You’ve made the minimal even more minimal…” - LN
User responses were very positive towards the initial prototype with 100% of participants completing each task with an overall high rate of satisfaction. Users stated the app equipped them with plenty of information if not more than they would need to accurately and easily follow a recipe. However, I did uncover a few minor improvements to optimize my designs and some insights surrounding my user’s decision-making processes.
All users appreciated and would personally use the substitution feature. Some noted they like to be as resourceful as possible when cooking without having to splurge on a very specific ingredient.
100% of users initially had trouble navigating to the next page in the Step-By-Step mode. They either expected to tap or swipe down to go to the next page instead of swiping left and would like an indicator to do so.
Some users can see themselves being bothered by the Step-By-Step mode button. This is because it may block text and pictures by taking up part of the screen on the recipe page.
40% of users mentioned they did not understand certain cooking terms. They noted knowledge of cooking vocabulary may vary and providing definitions would help cooking be more manageable.
Reflections
I can actually keep up…
This sprint was fun because it forced me to be on my toes and quickly figure out solutions within a restricted time frame. It gave me the confidence that I could keep up with the fast-paced nature of design sprints that I may experience in the industry and reinforced my capabilities to solve real problems within just five days. I am proud of myself for completing my first-ever UX design sprint. Here are some takeaways that I can improve on:
Break it down.
Throughout the process, I felt overwhelmed knowing everything I had to do within a tight time frame. I had to break down the tasks into manageable steps and remind myself to keep making progress, no matter how small it may seem.
Trust the process.
At times within the week, I had doubts about whether I could really design and prototype a realistic solution within the limited time I had. What helped me stay on the path was categorizing what each day represents and defining the daily goals to guide me in the right direction.
Keep it simple.
A tendency I tend to have is to think too much, especially when it comes to considering all the potential factors and information needed when it comes to cooking during my solution mapping. I had to remind myself at times that although having tons of information is good, there also needs to be simplicity to ensure the original goal of having users easily understand cooking techniques are met.