Chef.me
- A mobile app that helps college students meal plan with budget and diet-friendly recipes.
Project Type
Individual Project
Academic Project
Role
Project Researcher
UX/UI Designer
Duration
6 weeks
Tools
Notability
Figma
Dovetail
Project Summary
The problem:
Time constraints lead to a lack of meal planning. This causes malnutrition, overreliance on takeout, and food waste from improper ingredient management.
The users:
College students are the target demographic because of higher time and monetary constraints.
Primary goal:
With an effective meal planning application suited to their needs, students can manage their time better by preparing meals more easily, giving them more time and motivation to study.
Chef.me is a meal-planning application that provides recipes and an opportunity for users to quickly add recipe ingredients to an automated grocery list.
The project's process consisted of market research, user research in the form of interviews, personas and storytelling, and wireframing/prototyping, all critiqued by my professor and three other classmates during in-person sessions.
Table of Contents
Market Research
HelloFresh
HelloFresh is a meal kit delivery service that sends a recipe and a box of ingredients to the user’s door. The user can view recipes on the application, and then order them to their house with the exact ingredient units to prepare the meal.
HelloFresh Usability Issues
1
Lack of Diet Filter
There is no filter option to choose the type of diet (e.g. Vegetarian, Ketogenic, Kosher, Halal, etc.) It does let the user choose by cuisine/ingredients though.
2
Visibility
The feedback on how long the user wants to prepare the food is hard to see, especially if both thumbs are on the screen.
Whisk
Whisk is an AI-powered application that helps users plan meals and create recipes. It also takes human-made recipes and lets users save them to their profiles.
Whisk Usability Issues
1
Cannot Sign in with Google
After a few minutes of reviewing the application, there was a bug where the pop-up to sign in with Google would close as soon as it showed up.
2
Unnecessary Features
The list feature is just for shopping lists, which can be done on a Notes app.
Mealime
Mealime is a meal planning helping application which provides different recipes for users, and also transfers the ingredients to a list to help users know what to buy.
Market Research Summary
Key Takeaways
1
Sustainability
Grocery lists to make sure the user knows exactly what they need.
2
Learnability
Easy-to-understand user interface and recipes for beginner cooks to avoid stress and frustration.
3
Filtering
Make sure the filters contain a diverse amount of cuisines and dietary restriction options.
4
Time Management
Allow users to plan meals within the application ahead of time.
User Research & Analysis
Interview Analysis
To understand the issues that college students typically face in preparing their meals during the academic year, I conducted semi-structured interviews with four students with varying cooking experience levels and eating habits.
My questions revolved around four main topics: eating habits & struggles, where they find and buy recipes & groceries, and online food resources.
Participants
Participant A
Participant B
Participant C
Participant D
Group 1: Meal Planning Obstacles
Environmental Limitations
Time Management
Group 2: Takeout
Group 3: Food Resources
Influences to order takeout
What users like and want
Summary of Insights
1
Chef.me needs to account for different cooking skills, budgets, and living environments when centering around college students.
2
Chef.me needs to be designed around convenience to keep students motivated to meal plan and cook.
3
Chef.me should implement filters based on cooking experience, diets, cuisines, etc. to make helpful recipes.
User Personas & Storyboards
User Persona #1: Isabel
Isabel's Storyboard: Isabel's Issues with Mistranslations/Miscommunication while cooking.
Isabel's Storyboard Part 1
User Persona #2: Ali
Ali's Storyboard: Ali's Struggles in Learning How to Cook in a Busy Academic Life.
Ali's Storyboard Part 1
Sketches
Home, Grocery List, Meal plan, and Profile Pages
Originally, the sketches showcased the meal plan page separate from other pages and a profile page. After criticism of the homepage concept's appearance, I used the meal plan page as the home page's foundation.
Explore & Filter Recipes Pages, Recipe Page and "Add to Plan" Confirmation
These sketches show a glimpse of the main user flow process on the application where the user can add a recipe into their meal plan. When the user clicks on the floating buttons, they can add the recipe to their meal plan and the ingredients to their grocery list.
Low-Fi Wireframes
Home, Grocery, and Meal Plan Pages
For the home page, changes from the sketch include an added “View Shopping List” button to direct users to the grocery list (also a navigation bar function). Also, a profile page was removed due to the redundancy of features that could be put within the hamburger menu.
The grocery list page features users’ grocery lists based on the meals they added to their meal plan. I also included an aspect in the design that organizes categories of foods/ingredients to streamline shopping based on the shopping aisle in which related items may be located. Changes in the sketch include an added dropdown to hide meals of the week to show more of the grocery list.
The last page is the actual scheduling/meal plan page, where the user can see the meals of the day/week. The "begin cooking" button is an interactive method of following the cooking process for users who like a step-by-step instructional method.
Recipe Main Page, Filters, and Recipe Page
The recipe page is where users will find recipes that they can add onto their schedule and also automatically add the ingredients to their grocery list. The recipe page includes three tabs that highlight which cookware and ingredients are necessary to make the meal with. Additionally, as one of the design insights specified, the filters page has depth and different categories to benefit users by appealing to specific preferences.
User flow for Adding a Recipe
Adding a recipe is a feature of the recipes page where the user can add their own/family recipes and easily add those to future meal plans. There is a step-by-step process to include ingredients, necessary cookware, and the steps for future use.
A Reflection
Chef.me was a great project experience for me to practice thematic analysis and present my work to a group of people, but also learn auto-layouts and basics of the Neobrutalism design style.
I really like to play around with palettes and make sure that my high-fidelity prototypes function as if it was an actual application, so having so many different types of gesture controls and making sure that the screen would adjust to opening dropdown tabs was a new skill I learned and I believe it reflected well in this prototype.
Next Steps
I would like to think more intuitively about filling in some of the gaps that the user flow has that might confuse new users. Sometimes I feel like I go over the imperfections of the minor details more thoroughly and miss out on the broader picture that affects the usability.