Savr Recipes
Savr Recipes - where cooking great meals at home is a seamless and enjoyable experience for everyone. This is not always the case given people’s experience and knowledge. As the sole designer leading the project, my mission was to simplify the cooking process by minimizing user frustrations and mistakes, all within the confines of a user-friendly app. The goal was clear: guide users effortlessly through the cooking journey, allowing them to track their progress, prevent mistakes, and navigate each step efficiently.
Role: UX/UI Designer
Duration: 5 day Design Sprint
Tool: Marvel
Day 1 - Understand
To begin transforming this product, I started by cultivating a sense of empathy for our potential users.
Persona
Dan Mitchell
Assistant Manager
Pain Points
Instructions are difficult to follow - “ Sometimes I feel like steps are sprung on me.”
Dislikes
Surprises about what kitchenware is needed when ready to begin.
Frustration
Having to wash your hands in between steps to refer back to the phone.
Needs
To be uninterrupted during the process by having to look up unfamiliar techniques outside of the app
-
It became clear to me that users need to be fully prepared and informed about the recipe process they are about to embark on before they start.
-
Video and images displayed throughout the step process will be essential.
-
Now’s the time to take the leap from concept to reality.
Imagine
Day 2 - Map
Here's a brain dump of innovations for a recipe app and I narrowed the most critical tasks down to recipe prep and process.
Users need to know:
-
how long the process will take
-
be informed of techniques that may be unfamiliar
-
how to prepare
-
visualize the process along the way to minimize mistakes in a hands free experience.
.png)
Presenting the recipe level and full time to prep and complete gives the user a sense of control and ease. Having a short video of the recipe for previewing before getting started will help the user know what to expect and avoid surprises.
Competitive Analysis
Savr
Competitor
Cook Mode
Video Teaching
Timed Steps
Cook mode feature that allows users to move through a recipe without the screen going dark, and requiring signing back into the phone. This would be pertinent for Savr to have for a seamless experience.
Steps with time requirements and timers guide timing for efficiency
Video teaching techniques required within the recipe teaches the user what they need to know, so they don’t have to search outside of the app for how-to videos.
Next Up… Lightning Demos!
Day 3 - Storyboard
With guidance and a step by step process with images, tips, directions and ingredient amounts, making the recipe becomes a breeze once the prep work has been done.
The most critical screen displays the info needed - this was the focus
-
ingredients
-
prep-time
-
skills videos
-
tips
-
time needed
-
recipe image
Users don’t want any surprises, so front loading all of the ingredients and tools required for the process will be essential.
The user creates a meal plan for the week, chooses the recipes they want to create and designate which day they want to make them.
Once the user clicks on the recipe, the front loading screen will inform them of everything they need to know for preparing the dish like the ingredients, a video tutorial, utensils, and serving size.
Here the prep work begins with steps laid out with visuals to follow. Users could see which step they are in with the highlighted step guide at the bottom of the screen.
-
Once the prep work has been done, the cooking process begins and the user can rate the recipe and provide a photo for other users to see.
-
The prep section and recipe making section minimizes the risks for mistakes and frustrations.
-
Once the recipe is selected, a quick highlight video plays, and tutorial videos are available to teach on skills. These are optional.
After preparing the ingredients, the user moves forward with beginning the recipe process by switching the phone to cook mode - which keeps the screen open without going black.
​
-
Then each step is completed one at a time with an image, ingredients and directions.
-
The step guide at the bottom of the screen allows the user to go back and forth as well as see their progression through the process.
Day 4 - Prototyping
Throughout the process, my UX strategy and UI design decisions were driven by a pursuit of empowering users to create meals they truly love. I pondered over the best ways to facilitate learning and preparation, envisioning the product from the user's perspective, and crafting an experience that anticipates their every need.
Based on the preset recipe preferences, a list of recommended recipe options are presented.
Color cues heighten comprehension and highlight affordances.
We want to avoid the user having to go outside the app to learn new skills or search for information, so videos and images are embedded in the steps.
Instructional videos are provided in the recipe overview and will need to be also available in the prep step process when the user actually needs to complete the step.
Here are the preparation steps to make the recipe.
Usability testing revealed that cooking technique videos would be useful here.
-
Allowing cooking mode minimizes frustrations from having to repeatedly log into the phone, especially if your hands are dirty from touching food.
-
Users may need to realize that this is the beginning phase of the recipe creation process. Perhaps a “Get Started” button would be appropriate here.
-
It wasn’t satisfying enough to have a progress bar, so progress is shown by the dotted line that moves in correlation with the timer for the user to visualize progress.
​It's important to know where you are in the process and maximize feelings of control by knowing what to expect. If you make a mistake, you can go back and forth between the steps.
Color contrast was a bit of a challenge, so the color scheme was updated.
Day 5 - Usability Testing
Participants are users who cook on a regular basis. When they want to learn anything recipe related, they go to YouTube to follow trusted creators they follow.
"I like this part a lot, how the app just breaks down the steps for me."
“I love the prep steps because the majority of cooking is prep-work. It would be nice to see a GIF”
Here the progress bar was questioned. How would I get to the next screen? By clicking on the numbers?
I suggested being able to swipe and the user liked that idea, or was expecting to see a “next” button.
Another user loved that though she has great cooking skills, she could hand this over to her husband and he would be able to make the meal.
Insights
-
The participant who cooks the least on a regular basis shared that they wouldn’t be too likely to use a recipe app because they trust and like the cooking personality they follow on Youtube.
-
It's important to consider/feature well-known recipe creators and prominent figures with large followings as contributors to this product.
-
Users would prefer a cooking app like Savr because of the features that aren’t available through Youtube, like an ad free experience, meal planning and shopping lists, ingredients, a step by step plan and more.
Future iterations can focus on creating a following with famous personalities featured in the product, so the niche market will be attracted to Savr.
Conclusion
-
Animations and timer features will be developed, as well as recipe development, save/favorite features, done for you meal plans, and shopping lists, and meal occasion filtering.
-
Adding time saving tips to recipes would give the user even more confidence and control as they build experience in their cookery journey.
-
Voice commands and a more hands free experience would take Savr to the next level.
The result was nothing short of remarkable: a fully functional and intuitive prototype that empowers users to prepare meals efficiently and effortlessly within a single, streamlined platform.