Savr

Google Ventures- Style Design Sprint

Innovating recipe instructions.

My Role:

Product Designer

My Responsibilities:

Research Synthesizer

I consolidated, expanded upon, and drew conclusions from existing research including personas, interview recordings, and product reviews.

UX Designer

Research synthesis, brainstorming,
user stories and flows, wireframing.

UI Designer and Prototyper

UI patterns, interface design,
prototype development.

Design Brief:

Savr is an app that helps users find and cook new recipes. The company has received some negative feedback around the timing and prep order of the steps presented in recipes, as well as struggles surrounding using new techniques and ingredients for complex recipes. The purpose of this design sprint is to discover new ways to address these pain points, focusing on tasks inside the recipe-following flow rather than on finding new recipes. Currently, the application is native-only and presents recipe steps in an ordered list.

Day 1: Research Synthesis

Several testimonials, as well as a persona and an interview were used to gather information about specific issues users had with the Savr App. I recorded statements and findings from these sources on sticky notes and organized them into an affinity map by category and pain points.

Affinity Mapping

I transformed key findings from this exercise were into user stories to guide the design process. Highlighted user stories were included in the MVP.

As a user, I want to:

  • Know when to do what step in the cooking process, with an emphasis on wanting to maximize efficiency and decrease stress.
  • Know what’s ahead in the cooking process so they can prepare for it.
  • Know what to expect for a given step in the recipe and the end result so I can be confident in the process.
  • Know if I have the correct cooking tools and ingredients for a given recipe so I don’t start a recipe and find out later I can’t finish it properly.
    • Be given suggestions for alternate ingredients?
  • Want to be sure I’m sure if I’m following the steps correctly so I can correct any problems early on.
  • Know what ingredients to prep and/or mix before putting food-to-flame so I can cook more efficiently and less stressfully.
  • Want to be pleasantly challenged by their cooking experience.
  • Want to know how to improve their cooking if a recipe didn’t turn out as they expected.
  • Want to learn new recipes so I can reuse them later.
  • Want to be clear on any techniques I haven’t used before before I start the recipe.
  • Want to be able to control the app without having to wash hands so the experience is not interrupted.

From these user stories I mapped out an ideal user flow for the Savr recipe experience.

Ideal User Flow

Day 2: Ideation

Lightning Demos

In order to gain some insight into different ways of displaying recipes and step-by-step instructions, I looked into other apps in those verticals.

Yummly-Recipe App

In order to gain some insight into different ways of displaying recipes and step-by-step instructions, looked into other apps in those verticals.

Tasty- Recipe App

Tasty has several innovative and attractive features. It has the option to cast a recipe to a TV for easier viewing. It also has an easy to find step-by-step mode that shows each step in the cooking process along with GIFs of that process. It includes an ingredients list with each recipe, a recipe saving feature, and displays related recipes each recipe home screen.

Mealtime- Recipes and Meal Planning

Mealtime includes a cookware list in each recipe as well as an ingredients list. Ingredients needed for each step are also listed in each instruction.

Bilt- Furniture Assembly App

Blit offers step-by-step instructions for home furniture assembly with 3D visualizations of each step. It also includes voice instructions for each step and the ability to tap an object to learn more about it.

I produced some initial ideas for the interface using the Crazy Eights sketching method, which involves folding a piece of paper into sections and drawing 8 concepts within 15 minutes. This helped me get some diverse ideas on paper and I could choose the best among them.

Day 2: Ideation

Lightning Demos

In order to gain some insight into different ways of displaying recipes and step-by-step instructions, I looked into other apps in those verticals.

Yummly-Recipe App

In order to gain some insight into different ways of displaying recipes and step-by-step instructions, looked into other apps in those verticals.

Tasty- Recipe App

Tasty has several innovative and attractive features. It has the option to cast a recipe to a TV for easier viewing. It also has an easy to find step-by-step mode that shows each step in the cooking process along with GIFs of that process. It includes an ingredients list with each recipe, a recipe saving feature, and displays related recipes each recipe home screen.

Mealtime- Recipes and Meal Planning

Mealtime includes a cookware list in each recipe as well as an ingredients list. Ingredients needed for each step are also listed in each instruction.

Bilt- Furniture Assembly App

Blit offers step-by-step instructions for home furniture assembly with 3D visualizations of each step. It also includes voice instructions for each step and the ability to tap an object to learn more about it.

I produced some initial ideas for the interface using the Crazy Eights sketching method, which involves folding a piece of paper into sections and drawing 8 concepts within 15 minutes. This helped me get some diverse ideas on paper and I could choose the best among them.

Day 3: Storyboarding

From the initial sketches, I drew a basic wireflow of how user would go from selecting a recipe, to previewing the steps, prepping ingredients, cooking, learning new advanced techniques, checking their work, saving the recipe, and finding tips for improving their meal the next time around.

The best of these interface ideas was chosen and a three-panel sketch was drawn of the recipe intro, Prep step, and Cooking step screens.

Finally, I drew a rough sketch of the main recipe user flow from the selection of a recipe, to plating and reviewing it.

Day 4: Prototyping

Using the storyboards as a basis, I built a prototype for the recipe following user flow. I used the app’s brand colors as inspiration and transformed the instructions from a single ordered list to a series of screens broken into digestible and intuitive chunks. Each instruction has an associated video that automatically plays that shows the user a real image of the correct process.

User Flow

A feature to help users learn new techniques was also added to address a commonly-stated need, as well as a review system that suggests what users could do next to improve their meal, whether they loved it or it didn’t meet expectations. An InVision clickable prototype of this flow is available here:

Day 5: User Testing

I tested prototype with five participants with a diverse set of technological skill level and experience with cooking. Two participants use iOS devices and three use Android. Two work in information technology, one in real estate, and two in health care. Two participants regularly cook, two cook sporadically, and one cooks rarely.

The discoverability of the various features and buttons to advanced the flow were assessed, along with the effectiveness of how the recipe is broken up. I was specifically interested in whether participants would use the “Learn” feature and what questions would lead them there.

All participants were able to navigate the flow successfully and had some suggestions. Three participants suggested that Google Home voice command integration might be a good addition to the featureset. Users found the “Learn” feature and correctly anticipated that dietary information about the recipe could be found there. However, one user suggested that the “Techniques” feature be moved to the Recipe Intro screen so that it would be more obvious that these tutorials are available.


Visual Design

With the user flow of the app developed, I set to finishing the visual GUI. In keeping with the Google Design Sprint spirit, I used the Material Design theme editor to help build consistent design elements based on Savr’s color scheme. Material Design leverages a familar set of design patterns to make features and tasks recognizable and intuitve. 

Get In Touch

Let’s Work Together!

Email

brattonra@gmail.com

Homebase

Charlotte, NC

Phone

(704) 661-5565

Email

brattonra@gmail.com

Phone

(704) 661-5565

Homebase

Charlotte, NC

11 + 1 =