盧家亨
Thanks for stopping by — happy exploring!
v2.6.0 Last updated 11/18/25
盧家亨
Thanks for stopping by — happy exploring!
v2.6.0 Last updated 11/18/25
盧家亨
Thanks for stopping by — happy exploring!
v2.6.0 Last updated 11/18/25
BruinDine
BruinDine
Reimagining dining for thousands of UCLA students
UX, Mobile, Visual Design, Prototyping
UX, Mobile, Visual Design, Prototyping
2024
2024
OVERVIEW
Mobile Ordering for UCLA Dining
BruinDine @ UCLA Dining
In Fall 2023, UCLA rolled out its campus-wide mobile ordering system to its residential dining halls. However, the app has faced issues with the high volume of orders, which led to a temporary shutdown. (Daily Bruin, 2023)
I led initiatives to reduce ordering friction and redefined the visual direction of the current UCLA Dining platform
I led initiatives to reduce ordering friction by 21% in ordering time and redefined the visual direction of the current UCLA Dining platform.
TIMELINE
3 WEEK SPRINT
ROLE
UX DESIGNER
CONTRIBUTORS
DESIGN MANAGER
UX DESIGNER
TIMELINE
3 WEEK SPRINT
ROLE
UX DESIGNER
CONTRIBUTORS
DESIGN MANAGER
UX DESIGNER
PROBLEM
Student frustrations are exacerbated by long dining hall lines and wait times.
Student frustrations are exacerbated by long dining hall lines and wait times.
Discouraged to take time out of their busy schedules, students often skip meals or plan hours in advance to avoid the hassle of waiting. Although long wait times are primarily caused by understaffing, the extra time it takes to correct ordering mistakes can be frustrating when delays are unavoidable.
Although long wait times are primarily caused by understaffing and high order volume, the extra time it takes to correct ordering mistakes can be frustrating when delays are unavoidable.
Discouraged to take time out their busy schedules, students share that they often skip meals or plan hours in advance to avoid the hassle of waiting.
USER RESEARCH
We started by distilling user pain points into actionable insights.
We started by distilling user pain points into actionable insights.
In our early explorations, we interviewed 9 students, dining hall workers, and those who worked with student affairs to define the scope of our target improvements. Much of the feedback was systematic problems out of reach, whether that be in backend programming or back in the kitchen. Therefore, we identified 3 main areas of frustration that could be relieved through design adjustments.
In our early explorations, we interviewed 9 students, dining hall workers, and those who worked with student affairs to define the scope of our target improvements. Much of the feedback was systematic problems out of reach, whether that be in backend programming or back in the kitchen. Therefore, we identified 3 main areas of frustration that could be relieved through design adjustments.
No Real-Time Updates
Students want to see how many remaining meal swipes they have and how busy each dining hall is to gauge whether to go and how much to order.
Lack of Dietary Management
No options to customize orders to accommodate dietary restrictions or personal preferences.
Confusing Language & Navigation
Varying menu naming styles and hidden scheduling options make ordering cumbersome, with some features only available in certain dining halls.
USER INTERVIEW FEEDBACK
No Real-Time Updates
Students want to see how many remaining meal swipes they have and how busy each dining hall is to gauge whether to go and how much to order.
Lack of Dietary Management
No options to customize orders to accommodate dietary restrictions or personal preferences.
Confusing Language & Navigation
Varying menu naming styles and hidden scheduling options make ordering cumbersome, with some features only available in certain dining halls.
USER INTERVIEW FEEDBACK
No Real-Time Updates
Students want to see how many remaining meal swipes they have and how busy each dining hall is to gauge whether to go and how much to order.
Lack of Dietary Management
No options to customize orders to accommodate dietary restrictions or personal preferences.
Confusing Language & Navigation
Varying menu naming styles and hidden scheduling options make ordering cumbersome, with some features only available in certain dining halls.
USER INTERVIEW FEEDBACK
ITERATION
Consultation with dining hall employees revealed that students frequently missed traffic information.
Consultation with dining hall employees revealed that students frequently missed traffic information.
Initial wireframes of our redesign focused exclusively on users' perspectives. However, the root of the issue was the overwhelming volume of orders amidst a staffing shortage. With this in mind, we sought feedback from dining hall employees to address the service environment.
Initial wireframes of our redesign focused exclusively on users' perspectives. However, the root of the issue was the overwhelming volume of orders amidst a staffing shortage. With this in mind, we sought to address the service environment.
Students don’t always know when food will actually be ready, so they hover around and crowd the counter.
We housed all dining hall menus natively and displayed crowd meters to allow students to make informed decisions regarding traffic when thinking about their next meal.
Students don’t always know when food will actually be ready, so they hover around and crowd the counter.
We housed all dining hall menus natively and displayed crowd meters to allow students to make informed decisions about their next meal.
LO-FI DESIGNS
LO-FI DESIGNS
SOLUTION
Final Designs
Final Designs
Our improvements kept quality of life in mind for both the consumer and the restaurant workers so that we could alleviate of the stress of bottlenecking for both parties.
Our improvements kept quality of life in mind for both the consumer and the restaurant workers so that we could alleviate of the stress of bottlenecking for both parties.
Real-time Feedback
Real-time Feedback
Menus and meal currency updates were previously housed only on external sites. Including them in-app helps students decide on the amount to order and whether to dine-in, take-out, or wait for a less crowded time.
Menus and meal currency updates were previously housed only on external sites. Including them in-app helps students decide on the amount to order and whether to dine-in, take-out, or wait for a less crowded time.
INFORMING THE USER
INFORMING THE USER
Reducing Visual Cognitive Load
Reducing Visual Cognitive Load
Breaking down the extensive menu names into easily readable buttons and a hierarchical subcategory structure reduces clutter & confusion (No need to search & scroll for your next meal).
Breaking down the extensive menu names into easily readable buttons and a hierarchical subcategory structure reduces clutter & confusion.No need to search & scroll for your next meal)
HOME DASHBOARD
HOME DASHBOARD
An Emphasis on Customizability
An Emphasis on Customizability
We added the ability to edit your order without restarting, a cart system, and food restriction warnings per dietary preferences specified in the user's profile. The clearer interface with dynamic time slots and multiple pick-up options aim to spread out traffic.
We added the ability to edit your order without restarting, a cart system, and food restriction warnings per dietary preferences specified in the user's profile. The clearer interface with dynamic time slots and multiple pick-up options aim to spread out traffic.
CHECKOUT FLOW
CHECKOUT FLOW
😋 Coming Back for Seconds
Coming Back for Seconds
Easily go back to your favorite recipes to reorder with a bookmark system for past meals. The picture, name, and ingredients can be customized to shortcut future ordering.
Easily go back to your favorite recipes to reorder with a bookmark system for past meals. The picture, name, and ingredients can be customized to shortcut future ordering.
BOOKMARKING SAVED RECIPES
BOOKMARKING SAVED RECIPES
IMPACT
21% decrease in ordering time for existing users per usability testing
21% Decrease in ordering time for existing users
I love that it shows how many swipes I have left. This makes it so much easier to plan out my meals for the week.
– Julia @ UCLA Student Affairs
I love that it shows how many swipes I have left. This makes it so much easier to plan out my meals for the week.
Julia @ UCLA Student Affairs
REFLECTION
Lessons I learned from peers who use UCLA mobile ordering daily.
Lessons I learned from peers who use UCLA mobile ordering daily.
#1 Design with inclusivity in mind
Since I don’t personally count calories or have food allergies, incorporating those features wasn’t something that initially came to mind. However, after hearing from other students, I realized how small details can make a huge difference for users.
#2 Poor UX can amplify struggling service design
Much of the student frustration came from system mishaps such as overestimating the pick-up time or the lack of push notifications when the order is ready. While we can’t fix these backend issues, I’ve learned to filter the scope of specifics I can improve upon in ways we can control.
#1 Design with inclusivity in mind
Since I don’t personally count calories or have food allergies, incorporating those features wasn’t something that initially came to mind. However, after hearing from other students, I realized how small details can make a huge difference for users.
#2 Poor UX can amplify struggling service design
Much of the student frustration came from system mishaps such as overestimating the pick-up time or the lack of push notifications when the order is ready. While we can’t fix these backend issues, I’ve learned to filter the scope of specifics I can improve upon in ways we can control.