Kitchen Bear

how can we give students access to easy, affordable, and balanced recipes?

OVERVIEW
This project focuses on how to find an effective way to promote healthy, balanced eating habits for college students via a virtual pet named Kitchen Bear.

PROJECT YEAR
2021

ROLE
UX Designer & Researcher

TOOLS
Figma

The Description

The Description

Kitchen Bear is an app dedicated to help students who are tasked with the enormous responsibility of feeding themselves and want to maintain a healthy, and balanced diet. Kitchen Bear is a virtual pet that gives users access to healthy recipes, provides nutritional information on meals, all while also giving positive feedback when the user uploads their meal. My role as a UX designer and researcher on the project was to develop a mechanism that allowed the user to scan and upload their meal to Kitchen Bear.

The Research

The Research

Our team began the research process by interviewing college students around campus who aren’t on any sort of meal plan, and are responsible for cooking their own meals. We asked them questions pertaining to the meals that they currently eat, how often they eat out, how often they cook a meal, what healthy eating means to them and asked them to brainstorm ideas on how to eat healthier. Following the questions portion of the interview, we asked them to give us a tour of their kitchen so they could show us the process by which they cook a meal for themselves. After compiling all of our notes, my team and I created an affinity diagram and were able to extract a few key insights.

Affinity Diagram

Affinity Diagram

The following insights were extracted from multiple interviews with students. We wrote activity notes for statements that the students made when we interviewed them. From there, we organized the activity notes into clusters based on themes of the same nature. We then named these themes and were able to distinguish insights from them.

An affinity diagram of insights for Kitchen Bear.

Key Insights

An affinity diagram of insights for Kitchen Bear.

Key Insights

The Solution

Persona

The Solution

Persona

Meet Allison, our prototype. 
21 years old
Lives in an all-girl co-op
Minimal experience 
cooking
A lot on her plate
Outside activities
School work
Social Life
Rotates through familiar recipes
Spends no more than 30 minutes in kitchen on
average
Desires to eat healthy

Storyboarding & Sketching

Meet Allison, our prototype. 
21 years old
Lives in an all-girl co-op
Minimal experience 
cooking
A lot on her plate
Outside activities
School work
Social Life
Rotates through familiar recipes
Spends no more than 30 minutes in kitchen on
average
Desires to eat healthy

Storyboarding & Sketching

Based on the persona, my team and I were able to come up with five tasks that meet the needs of our persona, Allison—and, one for each of us to design. 

I was in charge of designing task number two, where the user can take a picture of their food, and have the opportunity to verify and edit the food input. Below are the early ideation storyboard and sketches.

Storyboard:

A storyboard of task number two for Kitchen Bear.

User Interface Sketches:

Storyboard

A storyboard of task number two for Kitchen Bear.

UI Sketches

A UI sketch of task number two for Kitchen Bear.
A UI sketch of task number two for Kitchen Bear.

The Prototype

High fidelity prototype of task two for Kitchen Bear.

The above sketches evolved into the above high fidelity prototype made via Figma. 

The Prototype

High fidelity prototype of task two for Kitchen Bear.

Design Rationale

Design Rationale

The following design rationale pertains to my design decisions when creating the layout for task number two. As seen above, From the home screen, the user clicks the camera button, which is large and in the center of the navigation bar to put emphasis on one of the main functions advertised in our product: scanning the food to eventually feed Kitchen Bear. The camera icon is a metaphor that allows the user to recognize what is going to happen next: they will be directed to their camera. This is also a standardization across the many technologies where the camera icon signifies camera access.

From there, the user is taken to a camera interface that is modeled after most smartphone designs to play on the user’s existing mental models about cameras. There are guidelines that model the corners of a square that the user must align the food within to make it easy for Kitchen Bear to scan the food. In addition, there is an option for the user to select the gallery icon in the bottom left corner. The gallery icon is meant to mimic the photo libraries of the user’s phone. This is another example of external standardization. If the user clicks on the gallery icon, they are directed to their personal photo libraries where they can select a photo of food that will be scanned.

The next page is the Scanning page where a pop-up window appears with a buffer icon. The pop-up window is meant to demonstrate Kitchen Bear scanning the food, and the buffering icon is familiar to users across the Internet as it is the universal sign for processing data. This buffering icon is meant to signify to the users that Kitchen Bear is processing the information they’ve provided, and so they know to wait.

The next screen, Verifying Food Page 1, features the food that Kitchen Bear has processed and opportunities for the user to edit the food. The design features error recovery because the user can select the back button to take them back to the camera screen where they can retake a picture or select a new one. In addition, the design follows natural mapping by having the edit button right next to where the food is listed.

Once the user has edited and confirmed the food, they click the submit button, which is at the bottom of the screen in accordance with the concept of natural mapping, and the task is fulfilled.

Back to projects
continue to the next project

Milstein Program in Technology and Humanity

back to projects