myChef
your personal cooking assistant.
Team: Manaal Joyo, Cathy Zhang, Amira Chou
Discipline: UX Research, UX Design, Human-Centered Design
Duration: Jan 21’ - May 21’
Tools: Figma, Google Jamboard
My Role
Over the duration of a few months, I:
Conducted 5 user interviews
led affinity mapping sprints to find pain points
created wireframes and mid/hi-fi prototypes
produced final UI/visual design
conducted user testing and iterated the design
Purpose
This project was the sole focus of UC Berkeley’s course "Human-Centered Design," which is a course that guides students through the design thinking process and create innovative solutions to problem spaces in their communities. The preliminary research phase is completed within teams, after which team members branch off and and created the final design individually.
Problem Space
Sabrina is a freshmen in college who doesn’t have much cooking experience and is also on a strict budget. Eating out can get really expensive, so she often resorts to skipping meals. Because she is juggling work and a full load of classes, she doesn’t have time to cook, let alone learn how to. To save money, she often heats up unhealthy frozen meals. Sabrina’s circumstances resemble those of many college students, who tend lead compromised lifestyles and have an unhealthy relationship with food.
Challenge
"How might we enable college students to develop a healthier relationship with food?"
User Research
We narrowed the search to university students, as this problem space is prevalent within the college environment. From the 10 students we interviewed, we learned more about the details of university eating habits, touching on how they manage cooking and eating well while juggling school and other responsibilities.
We collected quotes from the interviews, and conducted a team affinity mapping session to create clusters of themes we found. The 4 themes we narrowed the data down to were:
time/money
food wastage
hopes/wants
unhealthy eating habits
This method led us to extract valuable insights that guided us in our decision-making process.
Key Insights
From here, we synthesized all of our findings into our three key insights, which are as follows:
Our Users
After conducting interviews and identifying patterns we saw from the data, we defined three user personas and mapped them to their respective needs.
The Saver
A student on a tight budget, hoping to sustain herself with cheap yet nutritious meals.
A student working part time alongside her studies, struggling to juggle all of her responsibilities. Is seeking to save time and make quick, healthy meals.
The Hustler
An avid eater with massive cravings but limited cooking skills, seeking to develop healthier eating habits. Wants to make easy but delicious meals.
The Foodie
Storyboard depicting typical user journey:
Credit: Amira Chou
Solution Ideation
Design Sprints | My fellow designers and I conducted an initial design sprint in which we put our heads together and drew up possible solutions to meet the needs of our users. We once again clustered the ideas into common themes we identified, some digital, others not. The themes we identified were:
Artificial intelligence solutions
grocery services
donation services
app based solutions
human resources
After conducting the initial design sprint, our team split up and completed the rest of the project individually.
I narrowed the possibilities down to a digital app since it is the most accessible and relevant to university students. This app will:
allow users to select recipes of choice and save to a personal cookbook
suggest groceries to buy and formulate a weekly meal plan based on estimated expiration dates to prevent food and money waste
scan the user’s grocery receipt and spit out recipes according to ingredients
suggest estimated time and difficulty of a recipe to allow user to adjust to circumstances
Bringing Everything to Life
Wire-framing & Sketches | After identifying the key functions of the app, I created some quick sketches which I then transferred to figma to create my mid-fidelity prototype.
Lo-Fi sketch containing the onboarding screens as well as main app function.
Whatever it is, the way you tell your story online can make all the difference.
Make it stand out
Iterating Through Feedback
Before prototyping the hi fidelity prototype, I had multiple users interact with the product and provide useful feedback:
Users were unaware with the contents of the app, indicating to me that an on-boarding experience may be useful in allowing users to get acquainted with the app
Flow of the app needed to be improved; adding buttons such as "next", "back", and "home page", can help guide the user through the app
Hi Fidelity Prototype - Early Designs
The first iteration of the hi fidelity prototype addressed the concerns that the users had in the first usability testing. Onboarding frames were included and specific buttons were added to each frame in case the user wished to go back or return to the home page.
Login and Onboarding Tabs'
I decided to keep the opening frame simple - with the option to either log in or sign up. If signing up, the user is directed to the onboarding tabs which detail the main functions of the tab. The three dots at the bottom indicate to the user how many onboarding frames there are, the “next” button is a clear indicator of how to move to the next tab.
Homepage Tab
The Homepage tab was meant to be personalized to the user, giving them access to their preferences and goals one one tab. The homepage was redesigned to include all of different functions one tab, allowing it to be more intuitive and clean.
Browsing Tabs
These frames are the meat of the app, giving them information about various recipes and helping them to organize their eating habits. Although it was a start, the visual design needed improvement. One of my design principles is for each tab to serve a singular purpose so that the user is not overwhelmed. This was also taken into account here, with each frame serving a different function.
Iterating Through Feedback
Once, again, I conducted user testing on 5 users to find points of improvement. I found that
the onboarding screens made the various functions of the app very clear.
the visual design could use some work, perhaps having a consistent color theme.
The “homepage” screen felt difficult to navigate, and users weren’t always sure how to return to it.
The “myInfo” and “personal goals” screens did not seem to be very beneficial for the users.
users prefer for the app to create the meal plan instead of user doing so; although users wanted the ability to edit.
Final Design
The onboarding screens were simplified and redesigned to be visually appealing to the eye.
I decided on these tones for my color palette because a “colorful plate” is usually a sign of a nutritious meal. I wanted the visual aspects of the app to represent that concept.
The navigation bar at the bottom of every screen was added so users can easily switch screens. The icons were intentionally selected to be intuitive and self explanatory for the users.
Moving Forward
If this app was implemented, the goal would be for college students to be cooking simple yet nutrient dense meals while saving money on takeout and not wasting groceries. This would consequently affect other aspects of their lives, including academics and overall wellbeing. The challenge is how to make people “hooked” on implementing healthy habits, and create long term change.