Design Problem:
The purpose of this design study is to help users store and sort their recipes for easy access. People who cook at home generally collect recipes from a bunch of different sources, and as a result, they will keep their recipes in more than one location. Some will be stored online, maybe as a bookmark, some will be printed and kept in a notebook, some will be handwritten and kept in a card box, etc. Because these recipes are kept in different locations, the users must remember where a particular recipe is stored if they want to access it.
Target Users:
The target users for this product are people who love to cook at home and want easy access to their favorite recipes. They want to save recipes as they find them and sort those recipes in a way that suits them. They may have tried a digital recipe keeper in the past and were unsatisfied with the solutions available on the market. They may currently have several solutions to store and sort their recipes, such as digital and analogue, but they would like to have something more simplified and streamlined to save time and space.
High Level View:
This application will serve as an all-in-one digital recipe storage solution. It will allow users to keep their recipes in one place to quickly and easily find their desired recipe.
To serve as an all-in-one recipe storage solution, the app will support five key tasks:
1. Help users write and save recipes
2. Help users to easily save recipes from around the web
3. Allow users to categorize and search their recipes
4. Allow users to save recipes to a meal plan
5. Allow users to save recipes to a shopping list
Research Methods:
For research methods, we conducted user interviews and user tests throughout the design process.
The user interviews were held during the initial design phase to identify user needs. We asked questions to determine the cooking habits of each participant. Six participants completed the user interviews. Of those six, three were women and three were men. Five of the participants claim to cook at least two times per week and use some method of recipe storage. The sixth participant claims to cook less often and relies on another person to store recipes.
The user tests were held during the paper prototype and final prototype phases. Three users from the initial interviews participated in both sets of user tests. In the paper prototype tests, two of the users, who have high technical literacy, completed the tasks without seeking guidance. The third user stumbled during some of the tasks.
The initial sketches were developed after conducting our competitive analysis and user needs analysis. In the sketches, rough layouts and user flows were considered, as well as how the improvement opportunities identified in the competitive analysis could be designed.
Paper Prototype
The previous sketches were further developed to create the paper prototype. In the paper prototype below, user flows and layouts were refined to determine usability. Here you can see the steps a user might take to complete the five key tasks.
User Needs Analysis
The primary need for users is that they need to store and sort their recipes for easy access. After conducting our needs finding study, we learned that many users have multiple ways to manage their recipes. All of our participants have adapted their storage systems over the years to find a way that works for them.
Most of our participants in the study expressed frustration with their current system because they struggle to find a solution to store all of their recipes. When asked how they store their recipes, three participants said they use a combination of printed and digital recipes.
“In a binder or in an online bookmark.”
“Some in paper files, some saved websites.”
“In a 3 ring binder with page sleeves and dividers. I also have a folder on my desktop with recipe PDFs. I also have a few cookbooks with post it notes in them.”
One participant said she is currently using evernote to manage her recipes because she likes that she can create a lot of customization with sorting.
“I create tags for appetizers, main dishes, side dishes, desserts, and drinks. I’ll also make tags for specific things, like cuisines or ingredients, that I know I’ll search for later, like Thai, vegan, or squash.”
When asked how they prefer to store their recipes, two participants said they only use digital recipes because they prefer the ease of use and convenience.
“Digital. Paper just gets crumpled up, stained, and lost. It also takes up space.”
“I used to have paper recipes and they would get stashed in whatever corner or drawer was unused. I hated having a bunch of paper lying around. I’m more of a minimalist now and keep less crap in my kitchen. Plus, I can check digital recipes wherever I am and share them more easily.”
Two personas and scenarios were developed from the information gathered during the needs finding study. To review the personas and scenarios, please refer to the appendix at the end of this report.
Competitive Analysis
The current competitive landscape can be broken into two categories: analogue and digital.
In terms of analogue solutions, many users who store recipes use a variety of tools. They keep notebooks for handwritten recipes, boxes to store recipe cards, pages ripped from magazines, and photos of recipes. Many people also keep multiple cookbooks, but only refer to a handful of recipes from those books. Most analogue users have recipes scattered across these different tools and can’t quickly find what they need.
As for digital solutions, the current competitive landscape presents many opportunities for improvement. Many apps are paid services and the free options leave much to be desired. Two apps on the market represent the best free recipe solutions, but they are both lacking in certain design areas. The best in terms of UI design is RecipeBox, but the search feature is severely limited. Users are unable to search for recipes based on tags or categories, which renders the user tags useless. This is an easy opportunity for improvement. The other app, Recipe Keeper, has better functionality, but the UI is just plain ugly. While it is rich in features, those features are too bloated and prevent the user from quickly completing their tasks. This is another opportunity for us to improve upon.
The available apps have a few common features that serve as the best practices in the market. The best practices we’ve identified are: populating recipes from a url, saving recipes to a meal plan, and saving recipes to a shopping list.
Design Goals
Based on our user needs analysis and the best practices and opportunities identified in the competitive analysis, we have decided on five main goals to address with design.
Help users write and save recipes
Users must be able to create recipes manually and store them in one spot without resorting to a hodgepodge solution.
Users must be able to create recipes manually and store them in one spot without resorting to a hodgepodge solution.
Help users to easily save recipes from around the web
Users must be able to save new recipes to the app, by quickly and easily importing information from a blog or website. Recipe information will automatically populate with text from the website or blog.
Users must be able to save new recipes to the app, by quickly and easily importing information from a blog or website. Recipe information will automatically populate with text from the website or blog.
Allow users to categorize and search their recipes
Users must be able to customize their tags for recipes and then use those tags in the search feature to find their desired recipes.
Users must be able to customize their tags for recipes and then use those tags in the search feature to find their desired recipes.
Allow users to save recipes to a meal plan
Users must be able to add recipes to an integrated meal plan to quickly organize their meals for the week.
Users must be able to add recipes to an integrated meal plan to quickly organize their meals for the week.
Allow users to save recipes to a shopping list
Users must be able to add ingredients from their recipes to an integrated shopping list to quickly plan their shopping trips.
Users must be able to add ingredients from their recipes to an integrated shopping list to quickly plan their shopping trips.
Prototype
With the prototype, users can perform 5 key tasks:
1. Save a recipe from a website to the app
2. Manually add a recipe to the app
3. Search for a recipe with custom tags
4. Add a recipe to the weekly meal plan
5. Add recipe ingredients to the shopping list
General Layout
The navigation for the app lives at the top of the screens and adjusts as needed for other screens. The main body of each screen is reserved for information and user input.
Task Flow Illustrations
Task 1: Save a recipe from a website to the app
Task Flow: User taps on add recipe button > Pop up with entry fields open > User enters a enters a URL >
Recipe information is populated from website > User saves the recipe to the app
Task 2: Manually add a recipe to the app
Task Flow: User taps on add recipe button > Pop up with entry fields open > User clicks “Write a recipe” >
Blank recipe form opens > User enters recipe information > User saves the recipe to the app
Task 3: Search for a recipe with custom tags
Task Flow: User taps on search icon to open the search bar > User enters search terms > Results with relevant tags populate
Task 4: Add a recipe to the weekly meal plan.
Task Flow: User taps on calendar icon to open My Meal Plan > User taps on a day to add a meal >
Pop up with entry fields open > User enters a recipe and selects a meal > My Meal Plan is updated with the new information
Task 5: Add recipe ingredients to the shopping list.
Task Flow: User taps on list icon to open My Shopping List > User taps on “Add Recipe” > Pop up with entry fields open >
User enters a recipe and selects ingredients > My Shopping List is updated with the new information
Final Usability Test
Test goals:
The goal of this final user test is to answer the following questions:
1. Can users who have not used a digital recipe manager before, use this app to manage their recipes?
2. What problems do users encounter when trying to use the app to manage their recipes?
These are important questions to answer since there are many options for users to choose from when managing their recipes. Many users have developed their own system over years and are hesitant to change.
Participants:
For the final usability test, we interviewed and observed three participants. Throughout this section, we will refer to them as P01, P02, and P03.
P01 is an American man in his mid 30s. He normally cooks 2 times per week, usually for two people. He says he does not have a method for storing recipes, but he keeps a few as notes on his phone. He prefers to search for something online as he needs it.
P02 is an American woman in her early 60s. She normally cooks 2-5 times per week, usually for 4-6 people. She uses a ring binder and recipe box to store and sort her recipes. She likes to print her recipes.
P03 is an American man in his early 60s. He normally cooks 1-2 times per week, usually for 2-4 people. He keeps some recipes as printouts and some as saved bookmarks in his web browser.
Process:
For this test, we observed the three participants in person while they used the prototype and completed the tasks. We used a script, pre-test questionnaire, five tasks to be completed by the participants, and post-test debrief.
Pre-test questionnaire:
Have you used a digital recipe manager before?
How do you currently store your recipes?
Tell me about the last time you searched for a new recipe.
What do you search for?
What prompts you to look for a new recipe?
What convinces you to try a new recipe?
What information is the most important when you are looking for a recipe?
How often do you cook?
Tasks:
Please write a new recipe in the app.
Please save a recipe from a website to the app.
Please search for a recipe in the app.
Please add a recipe to the weekly meal plan.
Please add a recipe to the shopping list.
Results:
Overall, this user test was successful in answering the the questions asked in the test goals:
1. Can users who have not used a digital recipe manager before, use this app to manage their recipes? All three users were able to complete the five tasks.
2. What problems do users encounter when trying to use the app to manage their recipes?
The users ran into a few problems when using the app, but users P01 and P02 were able to easily fix them without help. User P03 asked for clarification when he ran into problems and was able to fix them with minimal help.
Even though it was not part of the task, all three users tried to edit the meals within the meal plan.
User P03 had trouble locating the button to add a recipe to the app.
While the users faced some problems when using the app, these are all problems that open opportunities for improvements with the design.
Key Findings:
Finding 1: Users can’t find the button to add a recipe.
Severity: 4/4
Heuristic violated: Flexibility and Efficiency of Use
The button to add a recipe to the app is currently in the upper right corner of the navigation. User P03 had trouble with the tasks 1 and 2 because he expected to find the button within the body of the home screen.
Severity: 4/4
Heuristic violated: Flexibility and Efficiency of Use
The button to add a recipe to the app is currently in the upper right corner of the navigation. User P03 had trouble with the tasks 1 and 2 because he expected to find the button within the body of the home screen.
Recommendation (right image): Move the Add recipe button to the bottom of the home screen and enlarge it to make it more visible.
Finding 2: Users can’t edit meals that have been added to the meal plan.
Severity: 4/4
Heuristic violated: User Control and Freedom, Consistency and standards
Severity: 4/4
Heuristic violated: User Control and Freedom, Consistency and standards
Recommendation: Allow users the ability to edit the meal plan. If a user clicks on a meal, like “Breakfast”, let them change or remove the recipe.
Finding 3: Users can’t view the meal plan after adding a recipe from the recipe view.
Severity: 3/4
Heuristic violated: Visibility of System Status, User Control and Freedom
When a user adds a recipe to the meal plan from the recipe view, they can’t immediately view the meal plan. In order to see the updated meal plan, they have to go back to the main screen and then click on the meal plan icon.
Severity: 3/4
Heuristic violated: Visibility of System Status, User Control and Freedom
When a user adds a recipe to the meal plan from the recipe view, they can’t immediately view the meal plan. In order to see the updated meal plan, they have to go back to the main screen and then click on the meal plan icon.
Recommendation (right image): When users click on the meal plan icon in the recipe view, give them an option, possibly in a pop up, to add the recipe to the meal plan and give them an option to view the meal plan.
Finding 4: Users can’t view the shopping list after adding ingredients from the recipe view.
Severity: 3/4
Heuristic violated: Visibility of System Status, User Control and Freedom
When a user adds ingredients to the shopping list from the recipe view, they can’t immediately view the shopping list. In order to see the updated shopping list, they have to go back to the main screen and then click on the shopping list icon.
Severity: 3/4
Heuristic violated: Visibility of System Status, User Control and Freedom
When a user adds ingredients to the shopping list from the recipe view, they can’t immediately view the shopping list. In order to see the updated shopping list, they have to go back to the main screen and then click on the shopping list icon.
Recommendation (right image): When users click on the shopping list icon in the recipe view, give them an option, possibly in a pop up, to add the ingredients to the shopping list and give them an option to view the shopping list.
Finding 5: The shopping list icon is unclear.
Severity: 2/4
Heuristic violated: Match between System and the Real World
The shopping list icon is not immediately identifiable. During the user tests, P03 mentioned that the icon looks like it represents a file or a document rather than a list, so they were uncertain where the icon would take them
Severity: 2/4
Heuristic violated: Match between System and the Real World
The shopping list icon is not immediately identifiable. During the user tests, P03 mentioned that the icon looks like it represents a file or a document rather than a list, so they were uncertain where the icon would take them
Recommendation (right image): Change the shopping list icon to a list icon.
Finding 6: The check mark icons in the shopping list are unclear.
Severity: 2/4
Heuristic violated: Consistency and StandardsThe check marks in the shopping list are not immediately identifiable as being checked or unchecked. When the icons are checked, the background is white and when the icons are unchecked, the background is also white, which can lead to some visual confusion.
Severity: 2/4
Heuristic violated: Consistency and StandardsThe check marks in the shopping list are not immediately identifiable as being checked or unchecked. When the icons are checked, the background is white and when the icons are unchecked, the background is also white, which can lead to some visual confusion.
Recommendation (right image): Change check marks to have more visual distinction between the checked and unchecked states. For example, use a green background with a white check mark for checked and a white background without a check to represent unchecked.
