Recipe Saver App

Recipe management made easy!

Recipe Saver is a mobile app that I designed for a course in 2019 at the Touro College Graduate School of Technology. This post describes its design process, from identifying the problem to the interactive prototype.

How might we improve cooking through recipe management?

Recipe Saver App

Table of Contents

1. The Problem
2. Research
   a. Competitive Analysis
   b. User Survey
   c. User Interviews
3. Insights
   a. Observations
   b. Goals & Non-Goals
   c. Personas
4. The Design
   a. Customer Journey Map
   b. Wireframes
   c. User Flow
   d. Paper Prototype
   e. Design System
   f. Android vs. iOS
5. Prototype
6. Next Steps

The Problem

Cartoon by Dorrance

Finding recipes you’ve previously seen is difficult. Where was it… In a book? The computer? A print-out? This problem becomes more acute if you have your own modifications of that recipe, which you also need to find. I have this problem with my own recipe “organization”:

So many ways to collect recipes!

There are three distinct problems illustrated above:

1. Collecting recipes for later: they come from many sources, both digital and analog.
2. Finding recipes later: they’re all in different places.
3. Modifying a recipe: editing is usually not easy, neither in digital nor in analog media.

Research

Competitive Analysis

These are our direct competitors: apps that allow adding any recipe.

Direct competitors for Recipe Saver (apps that allow adding any recipe)

And these are out indirect competitors: food apps and notebooks.

Indirect competitors for Recipe Saver (food apps and notebooks)

While no competitor solved every issue satisfactorily, they all contributed insights into the design problem and possible solutions, which I will recount below (in the Insights section).

User Survey

User survey: “How do you manage your recipes?”

I sent out a survey entitled “How do you manage your recipes?”. It consisted of 8 questions: 6 closed-ended questions (multiple choices were offered, along with “other”, which the respondent could fill in manually), 1 open-ended question, and 1 question simply asking if the respondent was open to a follow-up interview. The survey received 28 responses, with a 96% completion rate, taking an average of 4m19s.

These are the top answers to question 2, What tools and methods do you use to save recipes?:

Question 2: “What tools and methods do you use to save recipes?”

Thus, the top ways in which people save recipes are bookmarks, print-outs, social media, and recipe sites/apps.

These are the top answers to question 6, For which features do you mainly use these apps and tools?:

Question 6: “For which features do you mainly use these apps and tools?”

Thus, people use the above tools to save online recipes, watch recipe videos, and follow recipes.

Finally, these are a few of the responses to question 7, What app features would improve your own recipe management?:

• “A way to keep track of my recipe experiments without having to type them down”
• “I’d like to see a device that talks so that I don’t need to hold my phone while cooking”
• “I have recipes scattered all over the place … I use search words … Having a centralized place would be a game cha[n]ger for me”

User Interviews

From the 28 survey respondents, 5 volunteered for a follow-up interview. These are a few quotes from those interviews:

• “Hard copies don’t require scrolling and it doesn’t matter if they get dirty.”
• “Blogs have too much talk before getting to the recipe.”
• “If I really want to save it, I write it in a WhatsApp conversation with keywords so I can search for it later.”

Insights

Observations

The first and most obvious observation from all the research is that everyone has problems with recipe organization. Additionally, no one wants to write recipes on their phones, so a recipe-management solution has to be exceptionally easy to use.

The second observation is that, besides saving recipes, there are also recipe-design problems. It breaks down into these issues:

1. It’s tricky to follow a recipe on your phone. For example, you often need to go back and forth between the ingredient list and the directions. Also, just finding the recipe on a page is hard, due to all the talk.
2. Ingredients are not always suitable. For example, you might need to change the yield, or your diet requires substitutions, or you prefer different units. Similarly, you may not understand the language in the first place.
3. Adding notes to a recipe is usually very difficult.

Finally, on top of these major issues, there are also secondary issues:

1. Sharing a recipe
2. Sharing a recipe collection
3. Buying the ingredients

Goals & Non-Goals

Based on these observations, we have a few goals to reach in designing our solution. Moreover, there are also a few non-goals.

These are features our solution should have:

1. Import a recipe both from the Web and from physical media (such as cookbooks).
2. Modify or add recipes manually and add notes.
3. Convert ingredients into different types of measurements or substitutions.
4. Present recipes in an optional hands-free/full-screen mode.
5. Show the ingredients needed per step.
6. Organize recipes based on the user’s tags.

These are features we do not want to offer:

1. No recipe discovery. This is outside the scope of the problems we are trying to solve. It is best kept as a separate step prior to using our app, as there are already many good ways to discover recipes, which do not need to be replaced.
2. No shopping list. There are already good apps for this, and it makes little sense to force this feature into an app for managing recipes.
3. No unrelated sections, such as meal plans, calendars, or pantry inventory.

The app should manage recipes you’ve already discovered and nothing else.

Personas

Based on the survey and interviews, there appear to be two types of cooks: the obsessive cook and the casual cook.

Two types of cooks: the obsessive cook and the casual cook

Ideally, a recipe-management solution should address the concerns of obsessive cooks while remaining simple enough to satisfy casual cooks without overwhelming them.

The Design

Customer Journey Map

Based on the three sub-problems identified at the beginning, three customer journey maps were created:

Three customer journey maps for Recipe Saver

Wireframes

Next were the wireframes for the entire app, which were drawn by hand:

Wireframes for Recipe Saver

User Flow

Along with the wireframes, a detailed user flow was created to explain how everything works:

User flow for Recipe Saver

Paper Prototype

Before the app was digitally prototyped, a paper prototype was created to test the layout and flow. It was tested on several people, who enjoyed the physicality of the prototype.

Paper prototype for Recipe Saver

Design System

For the digital prototype, a design system was created, based on Google’s Material Design:

Design system for Recipe Saver: Material Design, device size, color; type, padding & sizing, icons & imagery; widgets, and UI patterns

Android vs. iOS

Although the app was prototyped as an Android app, one iOS mockup was also created as an exercise:

iOS mockup for one screen of Recipe Saver

Prototype

Here’s a video demo of the Sketch prototype of Recipe Saver:

Recipe Saver — UX Demo, by me

You can also try the prototype yourself:

Recipe Saver — Prototype (Note: Step-by-Step Mode will open a new page.)

Next Steps

A few enhancements could be added to the app:

• Info cards for individual ingredients and cookware
• Nutritional information

This is an app I would very much want to use, as I have not found any of the competitors sufficient. Therefore, I sincerely hope someone builds this. If you’re interested in doing that, please contact me!