If you have any questions, comments, or ideas be sure to send me a message.
SAVR is a Bitsize UX Challenge that asks designers how to improve the recipe following experience and deal with some existing user paint points. While this started as a one week challenge, it has begun to evolve into its own application for cooking.
As the product designer for this cooking feature, I was responsible for finding a fresh perspective on how we follow recipes both during the cooking process and the tasks around it. I developed the concept, wireframes, and lo-fi prototypes for this project.
Since there's only a week to prototype a solution to the pain points Savr Recipes has been having, a design sprint was implemented. The process used is found within the book Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days (Knapp, et. al.).
The first day of the sprint is spent aggregating existing knowledge of the product as well as mapping out their current experience to find which pain points to design for.
To lay the foundation of this sprint, a customer journey map was created to understand where the cooking process causes frustrations. This allows visibility into how users interact with the service and provide opportunities for improvements. The map focuses on the moments from opening a recipe, following it, to the end product.
Early on the map reveals a divergence in the experience based on the kind of chef. When users begin following the instructions without preparation, there's a greater chance of mishaps that lead to a less than desirable product. A prepared user will still get to the finished meal but with some uncertainty of the outcome.
From this mapping, it seemed greater attention to preparation would benefit all users.
10+ interviews were previously conducted, providing enough information to create a persona, Nick.
This persona highlights the need for balance between adventure and reliability. The new design implements a safe way to adventure with new techniques and recipes by setting up expectations at the beginning of the cooking process.
The aim is to solve Nick's frustrations by taking his goals and habits into account.
Generating as many varied solutions as possible was the priority for Day 2. This is the day that allows me to take everything from Day 1 into consideration and brainstorm the most user-friendly experience to address the major issues: time management, skill level, and user flow.
Brainstorming started with seeking inspiration through lightning demos, where I found solutions from other industries that could be applicable to the issues faced. I referred back to the initial customer journey map to hypothesize new journeys for the user. I then used the crazy 8's method of sketching 8 different panels in a short time frame, each presenting a different solution. After choosing a method from this segment, a 3-panel sketch is done of the critical screen and the screens before and after it in the user flow.
The sketches revealed a cooking process that could be more interactive and visual than the usual paragraph instructions, while allowing for multi-tasking to deliver the most efficient use of time.
30-60 minutes is spent looking for inspiration from 3 other sources to inspire a solution. I am looking for functional elements in each design to implement into my own solution.
This is a popular cooking app, it provides checkboxes for shopping for ingredients as well as for the smaller steps within each major step of cooking. It uses a carousel of cards for each step of the recipe and shows an image of what each step should look like. While I like the clarity of each step, this method requires trust that the app will use the time well by the order of the steps.
I like this idea of using the subway map, different colors represent different journeys, just as cooking, prepping, and cleaning are all different journeys in a recipe. Color coding keeps the journey clear, and large dots show where journeys converge, or the different stops along the way. The subway is spatial, our map would be temporal.
I like this version of directions because the steps are at the top, you can swipe forwards or backwards to know what’s next, there is a central image showing what’s to be done which can be replaced with an image of what’s to be cooked, and there is an estimated time at the end. Users would have to swipe forward for next steps, but it’s large and easier.
The goal is to create a new customer journey, so I created a few rough maps of what the experience could look like before delving into sketches of screens. This exercise provides a way to rethink the process quickly and see how many steps I could be reducing or creating.
The start and end kept in the same places give a sense of how much would have to go between to get the user to their goal. I differentiated between actions that were passive, like skimming a screen, and active, like checkboxes or call-to-action (CTA) buttons. This allowed me to understand where I could be making the experience more work for the user, or if the extra steps were worth the result.
Using the customer journey map from Day 1, I chose to design for the point in the map where the experiences diverge once the instructions have started. The goal is to create a positive experience any user can have.
After choosing the last screen in the crazy 8's exercise as the solution to go forward with, I drew panels of the app before and after a user would reach this screen to see how it fit into their experience.
Drawing a storyboard of the user's entire experience makes sure that the solution chosen is a feasible one for the user and for the native mobile app.
The full user experience would be a user selecting what to eat or searching, but by the time they select a recipe, there is an extra page to ensure preparation and to confirm that this is something our at-home chef will be able to do, involving all the tools, time, and techniques involved.
Using AdobeXD, I translated the sketches into low-fidelity wireframes. This example uses Julia Child's Beef Bourguignon with a stock image of the finished recipe. Savr's colors are applied, however, since there is no visible version of the app, the bars above and below are kept as blank as possible.
There are only two screens to this process: the first a summary screen that provides the standard experience, and then an interactive guided cooking experience. This guided cooking experience addresses what to use, when, how much time between steps, timers, and multitasking options.
A prototype was built in InVision to take into user testing. The initial screens are hypothetical and not part of native app. The focus should be on the primary recipe screen.
The InVision prototype was tested among 5 participants individually, and via video conferencing. Overall testing yielded a very positive response with the new feature. This initial round of testing identified the following issues for iteration.
"Start Cooking" doesn't set the user up for expecting a guided timeline.Two users commented on this particular issue. Since the timeline that follows is such a different experience, they may not have used the CTA and just followed the recipe in standard format.
Change phrasing to "Begin Guided Experience" or other. It's important to entice the user to use the unique feature that Savr is offering.
With the current design it is unclear that the steps have timer buttons on them. Two users experienced this confusion so the text that indicates that is not readable or in an effective location.
Verbal indicator or an instructional visual
A "push to start timer" note would help the user know what the button is, but the phrasing is long. A small gif could show the usage of the timer, or a note in the step itself to let the user know what to do.
Some users that are very busy when cooking might pause the process, or lower the heat, and continue cooking according to the directions later. If they are away, they might need a notification to check the dish.
Adding a pause button to the timers would give users a sense of more control and flexibility. Notifications for timers being completed is an option that can be offered in the native app.
To improve SAVR Recipes, I propose the following ideas within the recipe experience. Designing the app specifically for tablets would offer a larger canvas for clarity, enhancing the user experience. My top three ideas are:
These ideas serve as a starting point, and we can explore further enhancements based on user feedback.
Feature: The guided timeline is for one recipe at a time, but users were very curious about using this means of multi-tasking with multiple recipes. To combine multiple recipes would require an entirely different feature that could compile all of the preparation and timing in the most efficient manner.
User Interface: Adding different colors to completed items would allow users to quickly see where they are, what they've completed, and what they have not. They'll only be glancing at the phone while cooking, so it's best to make it as visually efficient as possible.
Voice Activation: Some interviewees don't like touching their phones while they are cooking. Having the app read what the instructions are, being able to talk to Google or Siri to start and stop timers would be incredibly useful.
This was my first Google Venture Design Sprint and I learned quite a bit throughout the process. Mapping the existing journey was a fun exercise, but I very much enjoyed the task analysis to see how many actions a user would have to perform to get to the proposed result and understanding if the trade-off between extra actions to greater utility would be worth it.
Send ideas, inquiries, or even ASCII art.
