Savr
The recipe app that helps you learn how to cook your favorite dishes
Role: UX/UI Designer
Timeline: 06/14/2024 - 06/28/2024
Background
Many people learn to cook by following along with recipes. As they are learning however, they often find that they come across terms that they are unfamiliar with and have to swap back and forth between pages to figure out what they’re supposed to do. The Savr prototype addresses this concern by making it easier for users to understand new techniques without leaving the app.
Savr is a conceptual mobile app for home chefs to find new recipes. Through this project, I followed the process of a modified Google Ventures design sprint. The design sprint allows teams to rapidly design and test features with a 5-day turnaround time. As the sole UX/UI designer, I carried out the structural and visual design of this project as well as the usability test sessions.
Day 1 - Understanding the Problem
Mapping it out
To begin, I needed to know what exactly users were struggling with in this app. The brief informed me that users were primarily home cooks who already liked the recipes Savr had to offer and had no problem searching for them. From the notes taken on several research participants, I was able to pull their most pressing concerns:
Users who are learning to cook don’t always know the techniques mentioned and how their food should look at certain steps.
Users want to be able to efficiently multitask and save time while cooking.
Users like to be prepared before starting. They are frustrated by unexpected steps and not knowing what tools are needed.
End-to-end experience map
As I mapped out possible end-to-end experiences to address these issues, I focused primarily on solutions for easier multitasking and helping users learn techniques since users repeated these concerns the most. The maps I drafted that addressed the issue of multitasking involved timers, multimedia, or presentation-style guides. Each individual map did not provide a satisfying solution on its own and, given the constraint of the app being in the format of a text-based list of instructions thus far, it seemed too ambitious to try to squeeze multiple features out of one sprint. Instead, I found that a solution pertaining to helping users learn techniques seemed more feasible.
Days 2 & 3 - Finding a Solution
Lightning Demos
To begin formulating ideas for this new educational feature, I carried out lightning demos of a handful of apps that either related to cooking or aimed to teach users new skills.
Tasty and Cookpad demonstrated the standard format for recipe apps. Users are given recipe suggestions or they can search for ideas. These apps present recipes by dividing them up into different sections such as “Ingredients” and “Instructions”.
Tasty
The image of the completed dish is prioritized on the recipe page.
Time is divided into total, prep, and cook time.
The tip section allows users to help teach each other.
Too many sections makes it tedious to get to the instructions at the bottom.
Cookpad
Cookpad’s homepage shows categories of recipes that may appeal to users.
Some recipes include pictures under each step.
Equipment section outlines all the tools needed to cook each dish.
What is included on each recipe’s page is inconsistent since content is user generated.
I decided to explore Planta and Duolingo as well because, while these apps aren’t food-based, they both focus on helping their users learn new skills. From them, I wanted to learn how they embed layers of information in their interface to allow users to seamlessly dive deeper.
Planta
Navigation is made simple with the ability to jump straight to different sections from the fixed bar at top.
Articles section presents a list of How Tos related to the topic.
Tapping an article leads to a separate informational page with images.
Duolingo
Underlined terms indicate that an interaction is possible.
An unobtrusive popup with a tip/information opens on tap. The popup can only contain short snippets of information.
When accessing a longer lesson, a new page in the app opens.
Crazy 8s
Crazy 8s of potential ways to present information
Narrowing in on my goal of helping users learn new techniques and keeping in mind the apps I explored in my lightning demo, I used the Crazy 8s method to sketch 8 possible ways to present additional information in an app. I needed a solution that would allow me to show a lot of content without taking the user completely out of the experience. Utilizing a bottom sheet fits this bill. It is expandable to fit plenty of information, the recipe page will still be visible in the background so the user won’t feel interrupted, and a bottom sheet is easily dismissed by dragging it all the way down or tapping on the background.
Storyboarding
3 main screens of the app (left) and storyboard of user’s journey (right)
With my solution in hand, I sketched 3 screens that demonstrated how the app looks prior to, during, and after the user utilizes the new feature. I then sketched a storyboard to show the user’s step-by-step journey from selecting a recipe to diving into unfamiliar terms. Again, I considered the structure of the apps from my lightning demos to guide me. The page by page layout and the search feature should be familiar and easy to use.
Days 4 & 5 - Prototyping and Testing
Creating the prototype
Finally, using my sketches, I created a prototype that would allow users to look over the homepage, find a recipe, and pull up more information in a bottom screen. Creating a prototype in one day was admittedly one of the more difficult tasks of the design sprint. Here, it was beneficial to remember that the purpose of the sprint is to test the viability of a new feature, not create a perfect product.
Savr homepage
Savr search page
Savr recipe page
Savr bottom sheet
On the Savr homepage, separating content into categories provides the user with suggestions upon opening the app. A dark canvas is used because the app is primarily image-based and the dark gray contrasts well with the brand color ( #FF821E ). I prioritized the search function by including a search bar at the top of the screen and ensured that search is accessible anywhere in the app via the navigation bar.
A filter on the search page allows users to search by categories such as time and difficulty level. On every page, images are at the top of the visual hierarchy in Savr’s design to entice users to explore and make it easier to quickly judge recipes.
Collapsible sections in the recipe page offer improved navigability for long recipes and give users the choice to only see the sections they need. Users can save recipes with the heart icon and revisit them later from the matching icon in the navigation bar. Including a difficulty level and equipment section helps users feel more prepared and confident before they start cooking.
The bottom sheet eases in as an overlay and takes priority as the page in the background dims. Users can drag the bottom sheet up to see more and tap the background to quickly dismiss it.
Usability testing
In preparation for usability tests, I drafted a test scenario which would prompt users to find a salmon recipe and learn about advanced cooking techniques without leaving the app. In particular, I wanted to know if users would find the new feature useful and if they liked the format of information being displayed on a bottom sheet. My 5 participants were varying levels of home cooks. Some cooked only breakfast a couple times a week while others meal-prepped or cooked daily.
During testing, my participants were able to easily find the recipe they were looking for. They made comments about the layout and structure of the app being comfortably familiar, and although they did not expect the bottom sheet, 80% of them found the feature useful. Based on some critiques, I also made several changes to my designs:
Users loved the video in the bottom screen but many had a delayed reaction to notice them. In order to prioritize the videos, I moved them above the descriptive text.
When I asked participants where they would learn about cooking terminology in Savr, there was only a 40% task success rate. Several participants either did not notice or did not feel motivated to interact with the underlined words in my first iteration. They were unsure of what to expect by tapping on the words and many participants assumed the underline indicated a hyperlink. To address this confusion I:
Made the CTA clearer by increasing the weight of the font and making the text orange.
Added a small, temporary popup to provide users with more context and encourage them to interact.
Finally, users expressed distaste in regards to the legibility of the directions. In my second iteration, I segmented the directions between the Prep instructions and the Cook instructions. I also broke each individual step down into its own bullet for clarity.
Try the clickable prototype below:
Outcomes
As I worked through this abbreviated design process, the one area I wish I’d put more consideration into was the performance of my prototype in usability testing. Although users generally found the interface easy to use, I did not provide them with enough cues to interact with the new feature without prompting them. If I were to redo this project, I would include some in-app way of encouraging the user to interact with the text (such as a popup or info icon) without my having to intervene.
Through the Google Ventures Design Sprint, I experienced the importance of prioritizing strategy. The 3 full days allotted to ideating and defining the solution allowed me to feel confident in my plans when I created the Savr prototype in Figma. From understanding the needs of home chefs to designing an educational feature, this was a practice in intentionality and decisiveness.