Kitchen Bear
August 2021 - November 2021
Overview
This project is aimed at improving the eating habits of college students. We want to help busy college students make better decisions about nutrition and food, so we have created a helpful kitchen friend, the Kitchen Bear, who offers you recipes, shares meals with you, and offers nutritional insight.
Team
5 Creative Researchers
Role
Researcher and UX Designer, Specializing on Nutritional Information
Description
Kitchen Bear is a concept born from the need for an accessible way to practice nutritional, balanced eating for college students and new cooks. My role in this project was to develop a nutritional page, through which users could view the content of their meals right after they have been eaten, and the nutritional averages of the meals throughout the week.
Ideation
After conducting interviews on five different college students who cook for themselves, we created an affinity diagram from notes taken during the interviews. The diagram included notes from all aspects of the interview, and noted a few clear categories (shown below).
After analyzing our affinity diagram, we created a persona (shown below) based on the data we gathered. We noticed that most people had a few key goals: to eat in a balanced style, make easy and quick meals, and stay healthy. These goals led us to examine the industry around nutrition, and caused us to really think about the issues pertaining to healthy eating as a young adult. These goals helped us shape our persona, a busy, college student who aims to cook healthy meals, but isn’t always sure how.
Sketching
Our design, based on the requirements we laid out, ended up being Kitchen Bear, an application aiming to encourage health through the positive reinforcement and guidance of a virtual companion. Originally, the bear was a virtual friend, but we decided that making the person a bear might make users more comfortable and excited to use the app. The original sketch for the design looked like this:
The tasks we created which happen in the app occur in a sequential order, and allow the user to go through the process of viewing their meals nutritional value. These tasks begin with the user opening the app and getting to personally create their “Kitchen Bear.” The Kitchen Bear is the character in the app that gives positive feedback to the user about their meals, offers a nutritional write up about the food they scan, and offers recipes and personalized tips for the user down the line. To begin, however, the user gets to customize the Kitchen Bear to look however they want, which can help in getting the user passionate about the app, and make them want to continue revisiting the app.
The second task is the food scanner. This allows the user to take a picture of their food on their phone, which is then scanned into the app and it guesses what food is on the plate and how much. The user then has to verify that the app is correct in its guesses. The following step appears when the Kitchen Bear virtually “eats” the meal you just made with you, and reacts based on what you made. If the Kitchen Bear isn’t getting enough nutrients, it will appear sad, but if the user is eating healthy, it will be happy as ever!
After that step, the Kitchen Bear offers up a nutritional write up of the food. The Kitchen Bear makes sure to complement the user’s good choices, noting aspects of nutrition that the user is good at, like eating enough protein.
After this step, the user returns to their home page, where the Kitchen Bear might offer up some tips or recipes if the user isn’t actively scanning food into their app. From this page, the user is able to scan their food, view Kitchen Bear’s current state health-wise, and see previous meals nutritional value. These are all very useful for the user to access at any time, so they are on the main page.
After developing tasks, we each took one task, mine being the viewing and consumption of nutritional information, and created a storyboard and wireframes.
High Fidelity Prototyping
After running a user interview with a paper prototype, we created our final high fidelity prototype.
My portion of the high fidelity prototype shows the nutritional value of their meal, and the nutritional value of their meals throughout the week. This portion is important because it allows our user to interact with the basic nutritional values of their food. There are two scrollable screens that are used to execute this task: Meal Nutrition Page and Weekly Nutrition Page. The individual meal nutrition page is meant to give instant feedback about the food they have just made. It shows the kitchen bear, offering positive feedback about their food, a pie chart about three main food categories and how much of each category was in the meal, and a nutrition label breakdown of the meal. The weekly page, however, reflects the summation of average daily and weekly values. This page shows the kitchen bear offering positive feedback, a bar graph demonstrating the performance of those three main food categories throughout the week, and a nutritional label breakdown of daily and weekly averages. The weekly nutrition page can be accessed from almost any page from the navigational toolbar, represented by the scale weighing the food. The meal nutrition page is shown after the bear eats the meal you have just made, when the user is prompted with the show nutritional information button. Both of these pages need to be scrolled through via the prototyping feature in order to spread the information out a bit more and avoid cramming.
Prototyping In Motion
A video has been added to show the functioning of my portion of the prototype.
Design Practices
To view the nutritional information of the meal the user just made, they must click the button on the reaction page labeled “Get Nutrition Info.” This button is prominent, large and in the center of the screen, so that the user is drawn to it. It is also designed to match other buttons in the app, in addition to it looking like buttons on other apps, so it is a very standard design that the user will be accustomed to. After clicking the button, the user is taken to the “Meal Nutrition Page.” The design of the nutrition information page is important. First, it is built to match a nutrition label one would see on food in real life, to support a metaphor that is familiar to the users. This way, the user will be able to interpret the information relatively easily, and will not have to learn a new system. Additionally, this page features a pie graph, which is familiar to the user, and also offers a good visual representation of what the user ate that day. This is a good way to see that the user is eating a balanced meal, which is an excellent reflection of our persona’s desire to eat healthy and balanced. The bear is also featured on this page to offer good feedback on your meal as positive reinforcement.
From this page and the others, the user can go anywhere using the navigation bar, which is standardized across the app, and made with similarly sized icons to indicate similar functionality. The only one that looks different is the camera button, which is a bit larger, as it is the most important and usable feature of the app, and we want users to be drawn to it.
The user can click the scale icon, which indicates nutrition and balance, something our interviewers often associate with health, to get to the “Weekly Nutrition Page.” This page has some familiar aspects including the labeling system, this time with daily and weekly averages per food or vitamin group, and kitchen bear. This time, the kitchen bear will offer positive feedback pertaining to one food group they are doing strongly in, and offer an explanation for why that is important. This is helpful, but is placed at the bottom corner of the screen because it may not be the most important aspect. At the top of the screen is a graph that tracks the three main groups from the pie chart throughout the week. This graph is standardized to look like other graphs the user has seen, so it should be easy to read, and uses the same colors as the pie chart from the previous page, so it is standardized across the app as well. This one is at the top because it is very important for the user to see how balanced their eating is throughout the week.
Key Takeaways
Follow Design Standards
After working on this project while learning about design standards, key elements worked their way into our design. Visibility, for example was a key player in making sure my charts and graphs were readable. Also following standardization In our navigation bar and buttons made our app easy to pick up.
Utilize Real Life Metaphors
Through situations involving my virtual nutrition label, I was able to mimic a real nutrition label one would find on a food item, making it quick for the user to digest and understand using prior knowledge.
Divide and Conquer, But Stay in Touch
Our team learned a lot about how to best work together. As students with our own schedules, it was best for us to all take on different sections of the app, but in order to thrive, we all had to stay closely in touch to ensure our app remained consistent throughout.