Design Sprint: Savr Recipes

A smartphone screen displaying a cooking app called Savr, featuring popular categories like chicken, beef, noodles, and pasta, with quick and easy recipes including Carbonara Pasta, Stuffed Eggplant, and Lamb Chops.

Introduction & Problem Statement

Introductory Statement: As a part of my bootcamp program, Springboard, I chose prompt based on a concept for a mobile food preparation and recipes app. My process started from examining existing user data to understand what was needed and ended with workable interactive prototype that was tested using moderated, qualitative user studies.

Savr Recipes is a new startup that wants to make it easier for people to follow new recipes and to make great recipes at home.

Problem Statement: How might we help Savr Recipes users follow instructions easier?

Objective & Approach

Person holding a cookbook open to a page showing Mexican tacos filled with shredded meat and garnished with cilantro, with ingredients and dishes on a table in the background.

Objective: Design a mobile app to help users follow recipes easier

Approach: Through existing research where user pain points have been discerned through issues of:

  • Timing

  • Ordering and preparation of steps

  • Learning new techniques

  • Preparation of meals

Design Constraints

  • Recipes should be written as text, in ordered steps from start to finish

  • Solutions should be designed as a feature for Savr Recipes’ native mobile app

  • Focus on creating a better experience for users when it’s actually time to cook

Flowchart of product development stages: Research, Define, Design, Validate, Prototype, Build, QA test, Launch.

My Design Process

Day 1 - Research Review & Mapping

User Interviews

A woman with a blue polka dot headscarf sitting at a table with a thoughtful expression, holding a bunch of leeks in her hand, with a glass of white wine, walnuts, and a small decorated gift box on the table.

Savr, as a development team, received feedback on negative reviews regarding:

  • Timing

  • Order and preparation of steps

  • Learning new techniques

  • Preparing the meals

A man working in a kitchen with a quote on the right about the finished product looking different from expectations. A woman smiling outdoors with a quote on the right about enjoying the cooking process.

Users designated that their issues following recipes are that the guides on the recipes do not confirm whether or not they performed the step correctly

User Personas

Text description of a person cooking, showing a focus on behavior related to cooking and experimenting with recipes.

Nick is a 29 year old male living in Los Angeles.

Frustrations: He feels like he’s on the right track halfway through preparing the meal. He also feels that he isn’t always clear on what’s next and how he can prep a few steps ahead which leads to mistakes.
Goals: Follow a recipe easily and confidently, so his dish comes out as expected.

User Flow Mapping

Flowchart illustrating steps for recipe searching, browsing, learning techniques, finding tools, and using checklists on a cooking app, with color-coded nodes for different processes.

Map and discern the user problem by looking at the existing research

  • Map and discern the user problem by looking at the existing research

  • User flows established for:

    • Looking for a specific recipe

    • Browsing recipes

    • Learning a cooking technique

    • Learning more about tools

    • Using tools for during meal-prep

User flow - Looking for a specific Recipe

Flowchart illustrating the process for finding a recipe: Cook/Chef starts, opens Savr app, searches for a recipe, app displays recipes matching search terms, user selects desired recipe, and recipe appears on screen.

Looking for a specific recipe should be direct.

Users shouldn’t have trouble picking and choosing a recipe.

Categorically, recipes are grouped according to different main ingredients and cuisines.

User Flow - Browsing Recipes

Flowchart illustrating the process of browsing recipes on an Open Savr App, starting from browsing recipes, selecting cook/chef, then choosing to browse by category or popularity, resulting in user selecting a specific recipe or choosing the popular one.

Recipes are curated in a full sector of the app where users can have the option to browse more than just what’s suggested to them.

User Flow - Learning more about Cooking Methods

Flowchart illustrating steps to learn a cooking technique using a recipe app, starting with 'Cook/Chef' and ending with 'App opens page with relevant information about technique'.

Since cooking methods are points where users can struggle getting certain actions down, Savr can now demonstrate how to perform certain methods within the recipe through hyperlink and concise information located above the ingredients list.

User Flow - Learning more about Tools

Flowchart showing steps to find recipe tools: start with 'Cook/Chef' on blue, then 'Open Savr App,' 'Search for recipe,' app populates similar recipes, then 'Select desired recipe,' app opens page, scroll through sections for tools and required tools, ending with green box about app opening the recipe and tool info for purchase.

Tools are able to be used multi-functionally.

The recipes within Savr can now list what tools are able to be substituted with a small explanation of what they are along with hyperlinks that can show users what their primary use is along with alternatives that can be substituted for a recipe.

User Flow - Checklists

Flowchart illustrating a process for using checklists to follow a recipe in an app. It includes steps for a chef to open the app, search for a recipe, select the desired recipe, and follow time constraints with interactive checkboxes, resulting in user confirmation of step completion.

Checklists are the primary feature included on Savr.

These are the visual and physical indicators that are on every recipe and ingredients list that confirm whether or not the user has completed a step or owns an ingredient.

Day 2 - Sketching

Initial sketches for the home screen express an ease of access to recipes with suggestions feeding to the user.

The Quick Access bar features horizontal scrolling based on the most popular commonly looked up recipe

Sections that were initially thought of were:

  • Most Popular 

  • Staff Picks

  • New & Bold

A black background with neon blue handwritten text and diagrams of a recipe article format, including a title 'Recipe / Article Format,' sections for 'Sow,' 'Tools Needed,' and a list of cooking tools such as bowls, a steam basket, and alternative tools. Also contains placeholder text and a square diagram representing an image or layout.
A handwritten recipe on a black background with blue ink, including sections for ingredients, techniques, and steps, with a detailed list of ingredients such as ground pork, chives, egg, garlic, soy sauce, and vinegar.

The “Recipe” articles were formatted to put the bulk of the information that users were looking for more readily in front of them.

This follows for every other article present in the Savr app of or relating to: Techniques, Ingredients, and Tools

Format:

  1. Introduction

  2. Tools Needed

  3. Special Ingredients

  4. Techniques

  5. Recipe

  6. Step-by-step Process

Day 3 - Storyboarding

White chalk drawing on a blackboard illustrating a storyboard about a person named Gokul. The storyboard includes drawings of Gokul thinking, browsing a phone, and looking through a recipe app, with handwritten notes explaining each step.

Storyboard 1: Looking up information on more ingredients

A chalkboard with six hand-drawn panels explaining how to use a story board app for cooking. The panels depict a person thinking about dinner, using a device to look up recipes, checking the phone, cooking with the recipe, then reviewing tools and finally making a meal.

Storyboard 2: Using Savr to look up what tools I can substitute

Day 4 - Prototyping

On my 4th day, I took my sketches, storyboards, and user flows and mocked up a prototype for Savr Recipes’ mobile app.

Screenshots of a mobile app called Savr featuring recipes, techniques, ingredients, tools, and cookware for cooking, with images of dishes, ingredients, and kitchen tools.

The app is separated into 4 areas where recipes articles and content related to cooking are stored:

  1. Recipes

  2. Techniques

  3. Special Ingredients

  4. Tools and Cookware

Savr Recipes - Home

Mobile app screen showing a recipes website with categories like Chicken, Beef, Noodles, and Pasta, and a section for quick and easy recipes including Carbonara Pasta, Stuffed Eggplant, and Lamb Chops.

  • 3 Main Sections

    • Most popular

    • Quick and Easy Recipes

    • Our Favorites

  • Horizontal scroll quick access buttons for recipe categories that are most popular and searched

  • “Quick and Easy Recipes” feature most recent and looked at recipes

  • Our Favorites features staff picks

Savr Recipes - Recipes

A plate of rigatoni pasta with sausage, spinach, and grated cheese on a white plate, part of a recipe webpage.

The “Recipes” sector of Savr Recipes features the bulk of the recipe for Savr’s mobile app

  • Users are able to directly search for recipes using key terms that go across the internet and the site itself. 

  • The recipes section also curates recipes based off the users’ ease and access so they’re able to pick and choose time and skill efficient recipes.

Savr Recipes - Techniques

Mobile screen displaying a cooking techniques app with a photo of a person chopping vegetables and an article titled '6 Knife Cuts every Cook should know'.

  • The “Techniques” sector of Savr Recipes stores demonstrations and information articles on the different cooking and preparation techniques for meals

  • Each article can include videos, step-by-step process explanations for users to learn how use and perform them properly.

Savr Recipes - Special Ingredients

Mobile screen displaying a webpage about special ingredients, featuring a photo of freshly harvested beets, with an Asian ingredients section showing a bottle of Asamasuraki Oyster Sauce.

  • The “Techniques” sector of Savr Recipes stores demonstrations and information articles on the different cooking and preparation techniques for meals

  • Each article can include videos, step-by-step process explanations for users to learn how use and perform them properly.

A webpage titled 'Tools and Cookware' showing a pot of sous vide cooking meat, with garlic, thyme, and seasoning nearby.

Savr Recipes - Tools and Cookware

  • The “Tools and Cookware” section of Savr includes articles and information about what users can use in their kitchen to achieve their desired result in a meal.

  • These pages explore more heavily into what these tools specialize doing in the cooking process

  • They also offer users information and other cookware similar to what’s required so that they’re able to find alternative items to help them cook their next meal

Savr Recipes - Individual Articles

Recipe page with ingredients and step-by-step instructions for beef stew, including images of ingredients and cooking process.

Each individual article is formatted in the way that it presents users with the information that they’re looking forward to seeing the most: 

  • The ingredients

  • The meal preparation steps

Each article succinctly introduces what each article is about and includes sections about what tools and special ingredients are required (as well as what can be substituted).

Day 5 - Usability Testing

Two women in a cozy, rustic kitchen, one older and one younger, baking together. The older woman is sifting flour through a sieve onto a checkered tablecloth, while the younger woman wearing an apron assists or observes.

On my 5th day, 5 participants recruited from day 1 were interviewed their feedback and data were recorded.

The usability tests focused on measuring effectiveness through users’ ability to:

  • Follow directions listed in the recipe

  • Infer from information about techniques and ingredients to help them with meal preparation.

Major Title Cards Added

Screenshots of a recipe app showing a pasta dish, a steaming kitchen, a beef stew recipe, and a selection of dinner recipes with images and descriptions.

Major Title Cards added to dictate where users are on the website.

Side-by-side comparison of two recipes for beef stew, listing ingredients including flour, ground pepper, beef stewing meat, vegetable oil, wine, beef broth, onion, carrots, baking potatoes, and salt, with special ingredients for Cabernet Sauvignon

Special Ingredients in Article Format Moved

Special Ingredients moved to below the Ingredients right before the steps of the recipe.

  • Improves user experience by introducing the necessary items to the user first and then a small explanation for ingredients that aren’t that common afterwards.

  • Improves consistency in the event that users want to substitute other ingredients to the explicit special item(s).

Relevant Tools for Special Ingredients

Screenshot of a section titled 'Tools To Prepare: Cookware Mortar and Pestle' with a 'Read: 12 mins' icon, followed by cooking instructions and an image of berries.

Added a section to explicitly state what tools a user can use to prepare a special ingredient.

Visual Card Update

A slideshow slide titled "Carbonara Pasta" by Katherine M. featuring a plate of pasta, and another slide titled "Braising" with a bowl of braised meat, including a demo duration of 10 minutes.

Updated Visual Cards to reduce clutter and give users a time indicator to expect how long to consume the content on the article pages.

The Result!

You can try out the hi-fidelity prototype here!

Smartphone screen showing a cooking app with categories for Chicken, Beef, Noodles, and Pasta, and a list of quick and easy recipes including Carbonara Pasta, Stuffed Eggplant, and Lamb Chops.

Conclusion

This was my moderated attempt at a design sprint hosted by Springboard and supervised by my UX Design mentor, John Maier.

Overall, this sprint tested my skills as a designer by assessing my ability to evaluate a situation and develop working ideas in a short span of time. While my attempt at develop Savr’s mobile app was passed to the program’s proctors, there is always improvements to be made and skills to be further developed.