Kitchenova
A project in HCI that aimed to design a software system that encourages college students to cook more at home.
Team: Ell Park, Annahi Paez, Alma Flores Ortega, Justine Chou, Kenny Ton, Tiffany Vo
Role: UX Designer, Researcher
Spring 2022
Overview of Design Process
Challenge statement: How might we encourage UCI students to cook more frequently?
Problem
Many UCI students find it difficult to cook, whether they lack the time, experience, and/or motivation.
Solution
An application that helps students find simple recipes using the ingredients in their homes to help streamline and simplify the process of cooking. The app will recommend users recipes based on what they’ve cooked before and what ingredients they have so that they don’t need to spend time figuring out what to cook and how to cook it.
Competitive Analysis
In order to gain a better understanding of other software systems that accomplish similar goals to ours, and to determine the necessity of our app and how we could make it distinct and stand out from the rest of the competing systems, we completed a competitive analysis on mobile and desktop applications related to recipe-finding and cooking.
Through our competitive analysis, we found that some of the systems we evaluated had very similar functionalities to our system, which was to give users recipes based on the ingredients they already had in their kitchen. However, these applications had a low-quality UX design, making their interfaces difficult to navigate and just generally unpleasant to look at. In addition, the recipe apps that allowed users to input a list of their available ingredients did not save that list of ingredients, so every time the user would reload the app, they would have to start over in listing out their ingredients. Most of these apps also allowed for some level of personalization, such as adding any dietary preferences or food allergies, saving recipes, and creating a shopping list to get ingredients for recipes.
Key Insights
After conducting user research and defining our key insights, we designed our system to prioritize personalization of the user experience, so each user can get the most out of this app according to their personal needs, tastes, and preferences. Our main features include allowing users to filter through recipes based on their diets, save recipes, specify their dietary preferences and restrictions, keep a digital inventory of their groceries, and participate in optional monthly challenges to encourage expanding their cooking skills.
INSIGHT: Users should be able to filter through recipes by cuisine type, meal, dietary restrictions, and the time it takes to cook.
We found that those we interviewed desired a more personalized experience when searching for recipes to make. Users focused on health and who followed certain diets wanted to be able to filter by dietary restrictions. Many users also cited a lack of time to not cooking as much, so giving users the option to filter by the time the recipe takes to make will be helpful.
INTERVIEW #214:
Q: "Is there anything that prevents you from cooking regularly?"
UCI student: "Time and energy."
INSIGHT: Users should be able to enter the ingredients that they already have in their kitchen in order to get appropriate recipes that use those ingredients.
Allowing users to do this through the system will save them time from looking for recipes online. They would be able to make recipes using just the ingredients that they already have at home. This can help them also save money from buying extra groceries or throwing old groceries out because they did not get to use them in time.
INTERVIEW #221
Q: "What do you like or don’t like about using recipes?"
UCI student: "I don't like that sometimes it isn't clear what should be done or used in the recipe. When they give you ingredients that aren't readily available to you, and don't mention substitutes, I have to go to multiple stores to find them. One time I went to a few different stores looking for this one product only to find out that it isn't sold in my country."
INSIGHT: Users should be able to view a recipe's nutritional information.
Many users who want to cook more do so because they believe that it is healthier to cook at home rather than to eat out. In order to aid these users with health goals, including the nutritional information of each recipe gives users better insight into exactly what they are nourishing themselves with.
INTERVIEW #222
Q: "Would you consider any recipe/cooking application to help you cook more?"
UCI student: "Yeah I think it would be good to be able to reach my nutrition goals. I want to have recipes that are easily accessible with nutrients and protein consumption to help myself keep track of my macros. Having a specific app for that would be cool."
INSIGHT: Users should be able to convert measurements in order to adjust their recipes for the number of people that they are cooking for.
A common pain point found among those interviewed was that following recipes was difficult when the amount of the ingredients had to be adjusted for the number of people they were cooking for. The system should automatically adjust the amounts of each ingredient in a recipe depending on the number of servings the user desires to make.
INTERVIEW #217
Q: "What do you like or don’t like about using recipes?"
A: "I don't like the long paragraphs before getting to the actual recipe. I also don't like that it does not let me convert the amounts of ingredients for the number of people that are eating. It would be helpful if they do have that option."
Personas
From our user interviews, we came up with 2 personas. Carl is our main persona and represents our target user. His pain points, goals, motivations, and important quotes to describe his attitudes towards cooking are included in the persona below. This information was gathered from our user research; for instance, some users reported that they cooked 3-4 times a week. We also took quotes from user interviews and added them to the personas. We wanted to represent these different habits in order to finalize the system features, so that they could better aid multiple users in achieving their goals and easing their frustrations.
User Journey
To get a better understanding of the user’s thoughts, feelings, and actions while cooking a meal, we created a user journey map of our main persona. We found that the user went through several different emotions, such as feeling confused when deciding what to cook, annoyance when preparing and cleaning, and happiness and satisfaction when the meal was done and ready to eat. This allowed us to empathize with our user, understanding their wins and frustrations, so we could better tailor our application towards them
Scenarios
These scenarios show example situations in which a potential user within our specific target user base could find themselves in need of our system.
Scenario 1:
Sam, 23, a 4th year UCI student majoring in Computer Science, needs to cook more at home because her budget for expenses is limited. She is skilled in downloading and using phone applications on a daily basis because she is technologically savvy. However, with multiple options and different ways to look for recipes to cook for dinner Sam gets overwhelmed and confused with all the information because she wants fast recipes to cook. She believes an application that has recipes that can be filtered will be easier for her while looking for food cook. In addition to this have an option to enter items you have in your fridge would be a plus for her because recipes will be specific to her accessible ingredients. By having all of this in an application it will be a one stop shop for Sam and she won't have to look through google, other applications, or pintrest to get recipes to cook with ingredients she has at home.
Scenario 2:
Emily is a 2nd year at UCI majoring in Education and loves to cook ever since she moved into her apartment at school. She has always helped cook around the house, but finally has more freedom to cook foods she wants to cook and is excited about learning to make new and different dishes. So, she often looks online for recipes on her phone as she is a tech savvy student, but is often annoyed at the fact that most online recipes are usually only for a certain number of people. Calculating the math for every recipe is a hassle and finds other things like ads and long paragraphs annoying. She also finds that she has too many ingredients from recipes and wants to be able to know what to do with her leftover ingredients instead of throwing them out or having to buy even more ingredients to find other foods to make. So, Emily would like an application that could help her with her math and to not waste food.
Storyboards
The storyboards are examples of how our app will be used in the real world. It will help keep us focused on the important aspects of the app.
Finding a Suitable Recipe
This storyboard illustrates the user’s process of using the app from start to finish. It shows the user first contemplating whether they want to cook or order takeout. After looking through the app and successfully finding a recipe that fits their needs, such as meeting their dietary needs and/or utilizing the ingredients that they already have. The app rewards the user with a badge for using the recipe.
Finding a Recipe with Constraints
The storyboard above depicts the user’s process of cooking with the ingredients they have by using the app. It is shown that the user has some ingredients and does not have much time to cook. However, They are able to find a recipe that uses their ingredients and the recipe takes about 30 minutes. The user then finishes cooking their dish and uploads a picture of the food they made and earns a Star badge.
Sketches
We decided as a group that each of our team members would sketch their vision of the application. Having each of us sketch our ideas for the application helped bring new creative ways to visualize the application. In addition this encouraged us to use not only one idea, but multiple ones to influence our design decisions when we start to design our wireframes and our low-fidelity prototype.
Home Page
The five sketches of our homepage bring many different and some similar ideas that are represented differently. For instance in homepage sketch 2, 3 and 5 each have a different way of displaying recipes that can be quickly accessed by our user if they find that recipe appealing. In sketch 1 and 4 they both have badges displayed so that users can be encouraged by what they have gained so far. We see that one just shows badges earned and one shows progress and ones that can be claimed. So by combining these two we can have a section that shows earned badges and ones that are in progress to keep the user informed.
Search Page
These sketches depict our ideas of the search page of our application. Our team wanted to consider the different kinds of things people want to be able to filter by when cooking. This includes different cuisines, dietary needs, cooking time preferences, and ingredients. After conducting our research through interviewing, we found that having these different categories from which to filter by are important to people.
Scanner + Ingredients Pages
A feature that we believed would be beneficial to include in our app is a barcode scanner in which users could scan their groceries for a more seamless experience when documenting nutrition facts as well as their groceries. These sketches help visualize how the feature might appear on our app.
Wireframes
After reviewing our sketches and discussing ideas we wanted to incorporate from each other, we moved from pen and paper over to Figma to create low-fidelity wireframes of the pages we felt were necessary to include in the app. We decided on which pages to create, and split the wireframes among us to flush out based on the sketches.
Home Page
This is usually the first page that the user sees when opening the app. The only exception is when they have downloaded the app for the first time and the pages displaying the options to login or create an account are shown instead.
Login / Create an Account
Users have the option of creating an account in order to use some features of the system. Users who create an account can set up their profile, save recipes, set their dietary preferences and restrictions, and collect badges.
Adding Dietary Restrictions and Preferences
Users can add their dietary restrictions and preferences, which will be saved in their profile, to help them find the recipes suited for their individual tastes and needs.
Search Page and Adding Ingredients
Users can search for recipes through the search page (left) and use the filters to add the ingredients they already have (right). Using this filter returns recipes that only use the ingredients added.
Barcode Scan Page
Users can scan the barcodes of ingredients they have so that they can easily add ingredients. After scanning a barcode, the interface navigates to a page prompting the user to fill in additional information about the item.
Saved Recipes Page
Users can view their saved and favorited recipes here, and can also search through these saved recipes, applying the same filters as the search page. There is also the option to toggle between showing all saved recipes and only showing their favorited recipes.
Recipe Details Page
The recipe details page shows the recipe, including a recipe image, cooking time, ingredients, directions, and nutritional information. Users can also adjust and convert the amounts of the ingredients as needed.
User Evaluations
Objectives
The objectives of our user evaluations were to find the answers to the following:
-
What are users’ first impressions of the app?
-
Do the options in the navigation bar make sense to users?
-
Are users able to search for recipes with items from their fridge successfully?
-
What are users’ thoughts on the monthly challenge being the first thing they see?
User profile
We will recruit users who use the internet or other platforms to search for recipes since it is similar to our prototype. They will be UCI students between the ages of 19 and 25 who search for recipes to cook at home.
Methods
We will each recruit 1 user for a total of 6 users, one person per team member, for individual testing sessions. Each session will be either held over Zoom or conducted in person and led by one of our team members. They will share a link to the prototype and ask the test user to share their screen via Zoom or use the proctor's computer within eye range while on Zoom. They will record the Zoom session. They will observe and take notes during the session.
How we conducted the tests
Each of the team members asked a participant from our target demographic to be part of our usability testing. We shared a link to our interactive mid-fidelity prototype, and verbally stated a series of tasks for them to complete. As they went through the mockups, they shared their screen with us and thought out loud as to their initial thoughts and reasoning behind their decisions in order to successfully complete the task. After each task and at the end of the session, we asked follow up questions regarding their experiences and the difficulty of the task.
Tasks
Task 1: Setting dietary restrictions and preferences
Description of task
The user should create an account and then fill out the preference/dietary pages. In the process they should also save the suggested recipe.
Summary of Task 1
-
Thoughts and Experience
-
The users overall expressed that they wanted more category food suggestions
-
Some users who were unfamiliar with Figma prototypes were confused by the lack of aesthetics and high-fidelity features.
-
-
Missed Clicks
-
Suggested recipe: clicked on the recipe name which is not prototyped. They had to click on the recipe image.
-
-
Were they successful?
-
Every user was successful and completed the task.
-
Task 2: Home screen and searching for a recipe
Description of task
The user should take a look at the home screen and talk about what they see. They should say where they think each of the icons on the bottom navigation bar would take them. After they have familiarized themselves with the home page, they should find a recipe that they can cook for dinner that includes chicken as an ingredient.
Summary of Task 2
-
Thoughts and Experience
-
Category on search page was useful to find recipes faster.
-
Confusion on some stuff can be eliminated with onboarding screens
-
-
Missed Clicks
-
Clicked on categories rather than search bar the first time
-
-
Were they successful?
-
Every user was successful and completed the task.
-
Had no issues identifying any of the icons in the navigation bar besides the fridge icon, which they quickly understood after clicking on it.
-
Task 3: Add an item to ingredient list and find a corresponding recipe
Description of task
The user should use the barcode scanner to scan a barcode on a sample chicken package and use their Fridge page to find recipes that include chicken and avocado.
Summary of Task 3
-
Thoughts and Experience
-
Liked that you can find recipes after scanning items from your fridge
-
May be difficult for some because of the check boxes in the list
-
-
Missed Clicks
-
None
-
-
Were they successful?
-
Every user was successful and completed the task.
-
Task 4: Locate a saved recipe
Description of task
The user should try to find the recipe that they had saved earlier.
Summary of Task 4
-
Thoughts and Experience
-
Have saved section on home page just like favorite
-
Pretty easy and simple for all users
-
They remembered where the saved tab was when they did task 2
-
-
Missed Clicks
-
None
-
-
Were they successful?
-
Every user was successful and completed the task with ease.
-
Task 5: Difference between saved and favorite icon
Description of task
The user should click on a recipe of their choice and take note of the two different icons on that page that they can click. The user should talk about the difference between a saved recipe and a favorite recipe, and how they would distinguish between the two.
Summary of Task 5
-
Thoughts and Experience
-
Most people understood the difference between liking and saving, but there was one confusion about the difference
-
-
Missed Clicks
-
None
-
-
Were they successful?
-
Every user was successful and completed the task.
-
Summary of Findings
Overall, our users were able to understand and complete the task successfully that we presented to them. However, we learned that some of our features in the application could have been thought out a bit better. For instance, one thing that stood out to our team was that one user noticed favorites on the home page, but there was not a saved category on the home page. This made us realize that we should also have a saved category on the homepage to allow users to navigate to those respected categories without needing to click on the search icon on the navigation bar. In addition it is always useful in design to allow users to be able to have more than one access point to a certain page if possible.
Final Prototype
Our final prototype is demonstrated in this gif below. The user evaluations were conducted on this prototype. Click on the image to view it in a pop-up.
Challenges
The prototype was challenging to design because we had a lot of features and functionalities we wanted to add to the application. As a team we designed each page and their corresponding pages for clicked states on Figma. However, feedback from our professor suggested that we should create interactive components in our design to reduce unnecessary pages and to gain additional realism in our application. Learning how to create interactive components was a bit difficult in the beginning, but after watching some YouTube videos, one of our teammates, Annahi, was able to create all the components in our design. This made our prototype more functional to our users because we did not limit them from clicking different options in our food/dietary preference pages. In addition, it made the design more interactive for users because they were able to see the different components change when hovering, clicking, or in their unclicked state.
Future Work
For future work our team would like to accomplish the following in order to improve our application:
One thing we would like to add to our application is a cookbook feature for users. This feature would allow users to upload custom recipes that the user wants to share or simply keep for their own reference. These custom recipes would be in their cookbook as well as other saved and favorited recipes. This would allow users to find all these recipes with more ease and have more organization.
Another step we would like to take is to make a more high fidelity prototype. We would want to ensure that it feels like a completed application. This would include adding images, recipes, choosing an aesthetic color scheme, and allowing the features to operate as it should.
Finally, a third step would be to keep improving our application. Our team would like to take into consideration user feedback. The feedback would be collected through user evaluations of our prototype. We would alter if and when necessary according to the feedback because we want our users to have an application that can give users the best experience.