Overview
*I am not associated with Bon Appétit in any capacity and all the efforts were made for my learning purpose and to enhance my design experiences.*
Bon Appétit is a California-based restaurant company that provides food services to many colleges and universities, including my college (I graduated June 2020).
Timeline
1 week (+30 hours) / March 2021
Role
UX/UI Designer
Skills
User Journey Mapping, Storyboarding, Information Architecture, Crazy 8s, Wireframing, Visual Design, High-Fidelity Prototyping
Challenge
Nutrition is indeed a crucial part of everyday lives, especially students, as they benefit both mentally and academically from healthy and consistent meals. However, as I recalled from my experiences in school, one of the many things that I found most frustrating was the ordering process and maintaining my meal plans.
The goal of this project is to build and improve a mobile app for college students to coordinate their meal plans better and personalize the ordering experience.
Discovery
After going through the overview photos of their IOS app on the App Store, which I found visually plain and not having any kind of customized system for different schools, I navigated back to their mobile website customized for my school and did an in-depth analysis of the functionalities, hierarchy and navigation.
Through the analysis, I was able to identify major usability issues. I listed all of them to validate them after my User Research.
Usability Issues
-
Overwhelming and cluttered content on the Menu page
-
Disorganized categorization on the Menu page
-
Lack of hierarchy
-
Difficult to categorize ingredients
-
Limited portal to giving feedbacks
User Interviews
I conducted 30-minute semi-structured interviews with 10 students who goes to my college, who are subscribed to the school meal plans and order their food from the Bon Appetít cafeteria. The information helps determine the users’ experiences with the current browser system, their consumption habits and what motivates them to create/maintain healthy meal routines.
Some key insights from the interviews:
-
4/10 browsed the menu online to check the menu during the day.
-
6/10 usually ordered food from the cafe during their breaks between classes.
-
7/10 built a customized meal course based on the ingredients of their choice.
-
5/10 had chef/cook preferences and wanted to be informed of when these chefs made food.
-
10/10 wanted to order and customize their meal plans online.
Pain Points
After synthesizing the user insights, I joined the information with the assumptions I made and some more questions I asked in the interview to indicate the following pain points that most users had trouble with.
Overwhelming content
As all information and navigation is embedded on one single page, this increases users’ cognitive load which causes decision fatigue and difficulty for users to browse and find relevant information.
No categorization
8/10 users complained that lack of categorization in ingredients makes it challenging to maintain a consistent diet and causes anxiety for users with special dietary needs.
Lack of hierarchy
The lack of hierarchy on the menu page causes disorientation and makes users feel lost and fatigued. 6/10 users expressed that they wanted a “Save” button to pin their favorite food or drinks.
No personalization
Both the web browser and current mobile app do not support user needs individually. 3/10 users complained that they had to update their account balance and meal plan information on a different system that requires complicated navigation.
User Personas
From qualitative interviews, I gathered findings and information and created the personas of two type of users. This allows me to keep the users at the center of the design process and ensure the design experience to align with users’ expectations and goals.
Katherine, 20
Sophomore / Biology Major
Goal: Easy and quick food order during class breaks. Explore different types of cuisine and ingredients. Vegetarian.
.png)
Cameron, 23
Junior / Student Athlete
Goal: Maintain a consistent and balanced diet. Informed about ingredient information and resources.
Ideation
Based on the above findings and analysis, I further explored some ideas and used the Feature Prioritization Matrix to refine what features should be included in the final solution. The suggested solution would improve the ordering experience for college students and help users conveniently find information without feeling stressed or lost.
Some quick paper sketches of early ideas for the app
Navigation
The suggested solution has four tabs, including “Home”, “Search”, “Orders” and “Profile” pages. The information architecture is illustrated in the following app map:
.jpg)
The early user flow for the app
High-Fidelity Solutions
Home Page
The "Home" page will display all the general information about menu of the day, food categorized by ingredients and recommended by order history. The information hierarchy is the key requirement to ensure that users feel oriented when browsing the app.
%201.png)
%202.png)
%201.png)
Search Page
I created a Search page with added filters based on recommended ingredients and users’ order history. This makes it easier for users to browse food availability and explore new ingredients and dishes based on their preferences.
Online Orders
The “Orders” page will inform users of their incoming orders and delivery time which helps users more easily track orders and avoid confusion when it comes to picking up their orders.
User Profile
The function of the Profile page is to keep users informed of their account balance (at school we used Culinary Cash to pay for items in the cafeteria), different payment methods (if users run out of Culinary Cash), order history and features usually installed on a setting page.
Style Guide
Reflection
If I had more time with this project, I would spend more time creating payment features that allow students to make easy payments with their student account and a notification system where students are informed of order complete. Also, I would spend more time on the visual design of the interface and add more social features which allow users to engage more with the staff for better user communication and increase food quality.
