top of page
Frame 431.png

Bruin To-Go


Product Designer

April 2022 - June 2022

Mobile App

1 Product Manager,
1 Product Marketing Manager
User Research, Design Thinking, End to End
🗣️ Introduction
Bruin To-Go is a mobile app that provides an online ordering system for UCLA Dining’s food takeout locations. Integrated with the UCLA Dining system (meal swipes, dining dollars, etc.), the app would allow students to virtually queue for food and pickup takeout orders when ready.

This mobile app mockup was created for the
Product Space Fellowship Final Capstone Project. The Product Space Fellowship is a competitive yearlong fellowship (11% acceptance rate) where UCLA students develop a product sense through a bootcamp consisting of workshops in topics such as recruitment, product, user research, casing, and more; mentorship; and a tight-knit community. Product Space Fellows also specialize in one of three tracks – product management, product marketing management, and product design.
🌱 Background

During the 2021-2022 school year, UCLA Dining consisted of 3 traditional dine-in dining halls and 5 takeout places that offered food such as customizable burrito bowls, pizza, and sandwiches, as well as coffee, boba tea, and smoothies. That year, UCLA Dining offered a meal plan to students living in the dorms, which is around 10,000 students, however pre-pandemic, any UCLA student was allowed to purchase a meal plan. Additionally, due to COVID-19 precaution measures, food takeout options were often encouraged to reduce the spread.

There are two traditional flows of the takeout places: 

Portfolio Playground - Page 2 (1).png

As you can see, students spend lots of time waiting in-person in line, which can detract from extracurricular activities and studying.

👥 User Research

We surveyed UCLA students about their dining experiences on campus and found the following:


of students eat takeout from UCLA dining at least 2 times a week


of students have waited more than 30 minutes in line for takeout food


of students that eat takeout more than 2 times a week would prefer an online ordering system


of students say they order the same 1-2 items every single time

🔎 How Might We Statement

How might we create a mobile app that makes dining easier for busy UCLA students as well as helps ease the load on UCLA’s dining system and hardworking staff?

💭 Let the Ideation Begin!

Idea #1: Redesign Kiosk Flow + Implement Kiosk System In Other Takeout Places

Our first idea was to redesign the kiosk system to be more user-friendly, which includes the option to provide a phone number for takeout status updates so students don’t have to spend extra time waiting in-person.

Frame 432.png

Idea #2: Mobile Food Ordering App

Create a mobile app that would allow students to customize and place orders from their smart phone.

Frame 433.png

After deliberations, we went with Idea #2: Mobile Food Ordering App!

⚖️ Is this Feasible: Competitive Analysis

To further investigate the viability of our idea, we conducted a SWOT analysis:

Frame 434.png
🧑‍🎓 User Personas

Before starting our wireframes, our team created various user personas to understand our users' needs, experiences, and motivations, to help us design a better platform. By creating user personas, our team wanted to ensure we were designing the product with a specific user in mind, rather than trying to appeal to a general audience. This allowed us to create a more targeted and personalized experience for our users.

User Persona BTG 1.png
User Persona BTG 2.png
🚧 Hashing Out the Details

Finally, before moving on to the process of designing the wireframes, we specified the goal of our app and the different functionality:


Bruin To Go is a platform that pairs with UCLA’s dining halls so both Hill and off-campus residents can order meals online. Pick-up locations will be located in the to-go dining halls, with the feature to customize orders and save previous purchases. The application notifies users when their meals are ready, saving time spent waiting in lines. Additionally, it allows the entirety of UCLA’s student body the opportunity to enjoy its dining halls. With Bruin To Go, students would be able to capitalize on the dining experience on the Hill.

🌊 User Flow

We mapped out a flow based on popular apps such as Doordash to ensure we were designing a familiar and streamlined process for ordering takeout food.

Portfolio Playground - Page 3.png
🐻 Design Inspiration, UCLA Edition

Starting with the style guide, I used UCLA branding colors and inspirations from other apps created for UCLA students:

Screen Shot 2023-01-11 at 1.49.00 PM.png
Screen Shot 2023-01-11 at 1.49.00 PM.png
🖍️ Low Fidelity Wireframes

Using the flow chart, I created low-fidelity wireframes to visualize the placement of different design elements on the frame. After, I had my team members and other Product Space fellows give feedback on the design elements they liked and didn't like. Here are some examples:

To Go Selection Scroll.png
Order Food A.png
✨ High Fidelity Wireframes

Using the flow chart, I created low-fidelity wireframes to visualize the placement of different design elements on the frame. After, I had my team members and other Product Space fellows give feedback on the design elements they liked and didn't like. Here are some examples:

Sign In Flow

Bruin To Go Home.png


Login Page.png

Sign In

To Go Selection Scroll New.png


Customizing Order Flow

Order Food A.png
Pick Up Details.png
Order Food B.png
Order Confirmed Page.png

Other Pages

Wait Times.png

Wait Times



Profile Page.png


🔮 Future Implementations

1) More Social Features

An example could be buddy pairings to meet other UCLA students or different groups to join (i.e. people that like KPop)

2) Expansion to On-Campus To-Go places

Currently, this app only serves dining places near the student dorms. However, there are various takeout places on campus that require physical meal vouchers. Integrating virtual meal vouchers from the app could make dining experiences even better!

💌 Personal Reflection

This was the first time I’ve really created something end-to-end with full ownership over the design. It was really fulfilling to work with my wonderful team to use the knowledge we learned in the first 15 weeks of the fellowship to holistically create this app mockup!


Special thanks to the amazing people at Product Space – can’t wait to pay it forward with the next cohort 💜

bottom of page