Bruin To-Go
Role:
Product Designer
Timeline:
April 2022 - June 2022
Platform:
Mobile App
Team:
1 Product Manager,
1 Product Marketing Manager
Tags:
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:
.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:
92%
of students eat takeout from UCLA dining at least 2 times a week
48%
of students have waited more than 30 minutes in line for takeout food
75%
of students that eat takeout more than 2 times a week would prefer an online ordering system
72%
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.
Idea #2: Mobile Food Ordering App
Create a mobile app that would allow students to customize and place orders from their smart phone.
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:
🧑🎓 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.
🚧 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.
🐻 Design Inspiration, UCLA Edition
Starting with the style guide, I used UCLA branding colors and inspirations from other apps created for UCLA students:
🖍️ 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:
✨ 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
Landing
Sign In
Home
Customizing Order Flow
Other Pages
Wait Times
Favorites
Profile
LOOKING FORWARD
🔮 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 💜