Savr Recipes
Cooking up Confidence - An Accelerated Google Ventures Sprint Project
The Problem
My client, Savr Recipes, wished to address user frustrations with following complicated recipe instructions. Users reported difficulty managing recipe timing, feeling unprepared, and lacking support throughout the cooking process. My goal was to design a solution that would help users confidently follow recipes and enjoy their experience, therefore returning to Savr recipes again and again.
Role: UI/UX Designer
Timeline: 20 Hrs, 5 days
Tools: Figma
Day 1 - Understanding
On the first day, I reviewed user interviews that Savr had collected and synthesized key concerns. Users were having difficulty executing the proper timing of recipes, often felt unprepared when they began a new recipe, and were discouraged by the lack of supports and guides present throughout the process.
I reviewed my notes, as well as the persona that Savr had provided, and sketched a map to get an idea of my solution. I ensured users would be prepped on the required components and techniques of a recipe, and that they could see the timing of each step clearly in a timeline. I also provided ample support throughout the cooking process to make sure users were comfortable and confident at each step and could pinpoint mistakes.
Day 2 - Ideating
Day 2 began with lightning demos to generate ideas. I reviewed recipe sites to get comparisons of cooking instructions, and also reviewed companies like Ikea, to see how they helped break down complicated projects into easily understandable parts. I liked their use of visuals to communicate clearly. Users knew at a glance what was needed, and instructions showed the correct vs incorrect orientations of things.
I kept these ideas in mind as I began my sketching. I generated multiple ideas, with some common features including a timeline, check in images for each step, links to information about any required techniques, and some indicator of what was upcoming.
Finally, I blocked in a few screens preceding and following the instruction screen, to help prepare for day 3 where I would wireframe out the whole journey.
Day 3 - Wireframing
On Day 3 I created wireframes, covering the journey from clicking a new recipe, through to finishing and reviewing it. Each screen kept the user's need for preparation and continued support at the forefront. Some of the highlights of each screen include:
Recipe Home
As soon as a user finds a new recipe, they can see all the ingredients, supplies, and techniques that will be required, allowing them to properly prepare and organize before anything time sensitive begins. They can see the total recipe time, broken down into prep vs cook time.
Overview
Users can see how many steps are involved in the recipe, which steps overlap, and a brief description of what each will involve. There is also a checklist to ensure they have everything, and another chance to review techniques. Users have the option to keep the screen awake while cooking, minimizing phone handling.
Instructions
The instructions always have an image to provide the user with a point of comparison, as well as a timeline to keep track of steps. There are links to technique instructions for users who didn’t review them ahead of time. The click through nature of the steps is also designed to let users tap "next" with a knuckle, minimizing scrolling with dirty fingers.
Checkpoints
Checkpoints allow users to verify the correctness of components, before starting steps that will prevent fixes (such as combining wet and dry ingredients). Users can identify issues and possibly correct them before it is too late. There are examples of potential mistakes, to help users determine what they did incorrectly.
Day 4 - Prototyping
On Day 4, I completed the functional prototype of my wireframes, to allow for usability testing and clear communication of the design solution to my client. This included some visual refinement and adjustment.
I could then bring the prototype to users to help quickly identify any awkward or confusing points that were overlooked during the accelerated ideation process.
Day 5 - Refining
I carried out my tests and gathered feedback. I made edits to emphasize that the overview was a preparation screen, and not the actual beginning of the recipe. I changed the title and description, and pinned the "let's cook" button to show the user that they had yet to begin. I also labeled areas of the design to ensure every feature on the screen was immediately understood.
I implemented the feedback and some final visual polish, resulting in a prototype I could present to Savr as a solution proposal.
Takeaways
This project familiarized me further with the design sprint process, and helped drive home the value of rapid iteration. Although not a perfectly polished final design, having a functional prototype at the end of only a week of work is powerful form of communication. Thank you for reading to the end of this case study. Please feel free to look through some more of them below or reach out so we can talk about them in person!