Bruin Bite

USER RESEARCH & UI DESIGN

Bruin Bite is an iOS concept app designed to help students, especially Freshman and Sophomores living on campus, to broaden their connections by meeting new students. It enables users to be matched with other individuals based on dining hall and time preferences, so they can grab a meal and get to know each other. The goal of introducing Bruin Bite was to make networking easier and convenient for everyone at UCLA.

My Role: Bruin Bite originally started with a team of 10 UCLA students. As the sole UX/UI Designer, I worked directly with the Product Manager to rebrand the identity of the original idea and lead the product design of the app, right from the UX research to the final UI.

The Problem

UCLA is a big university with many students coming from all over the world to study. So many people to meet and so little time. A Facebook Page was created to recognize the need for a platform to meet people through dining halls and within a few months, we noticed that many people started posting requests in this discussion page to find new people to eat with. This prompted the Product manager, Ayush Patel, to gather a group of students at UCLA to build a product directly catered for this need.

The Process

Rebranding

Logo: The original logo seemed a little generic and lacked any connection with UCLA. Hence, I decided to change the color scheme to include shades of Blue to make it more inviting and friendly. To emphasize the fact that this product was primarily designed for UCLA students, I utilized the bruin paw as a representation of the famous Bruin Bear mascot. I further added a bite to suggest the purpose of this app in a playful manner.

Style Guide: To consolidate the new branding for Bruin Bite, I also created a comprehensive style guide to clarify the colors, typography and logo formats for any future app designs or marketing collateral.

User Research

To identity the specific users for the app, we conducted a few interviews with students to further understand the needs and priorities of our target market. The culmination of all the research helped me to create the following user persona for this app:

Product Strategy

Site Map: Following the research, I worked with the Product Manager to finalize the User Flow and the Site Map for Bruin Bite. After many iterations and long discussions, we decided on the site map shown below to refine the scope of Bruin Bite and make the app as simple as possible.

Feature prioritization: This was also an important exercise as it helped us to finalize the product vision and the roadmap for Bruin Bite in the coming year. We decided on the following features of the app:

- UCLA Dining Hall menus: to allow users to conveniently access menus to speed up the decision process

- Matching feature: to allow users to enlist their dining preferences and then get matched to users accordingly

- Real Time Messaging: To allow users to co-ordinate with their match before the meet up.

Wireframing & Testing

Wireframing: After finalizing the site map, I started wireframing on Figma to get a quick idea of the look and functionality of the product.

Usability Testing: Along side this, I also did a quick prototype of the wireframes to test the flow with a couple of users. This helped me to make two very important changes in the app:

FIELD INDICATORS

User feedback showed that many people weren’t entirely sure what the fields were. Hence, to clarify this, I added a question in each field to make it easier for users to understand what they were supposed to do.

TIME SELECTION OPTION

Selecting a time was confusing for users as they didn’t know if they were choosing a starting time for the meal or for the full length of the meetup.  Hence, to make this more clear, I changed the selection method from a slider to an option selector with 15 minute intervals.

Solution

The final designs for Bruin Bite incorporates all the feedback from the wireframing stage into a sleek and modern looking interface. Only the Menu feature was implemented for the BETA release to align with our goals in the road map. I am currently in the process of user testing on the Matching and Messaging feature of Bruin Bite so we can further iterate the design based on feedback and implement the changes in our update for Winter 2019.

Onboarding

When signing up for Bruin Bite, users are prompted to type in their name and their UCLA email ids to verify student status. After this, the flow has two screens that allows users to create their profile by adding in a profile picture and entering information like a short bio, college year and major.

Menu

Menus tab shows a selection of UCLA dining halls and their activity levels (busy or fairly empty) during the selected time period. Users can access full menu of each dining hall by click on ‘view more’ and also learn more information of each dish. All of this information is parsed regularly from the UCLA dining hall website to ensure that it’s accurate and up to date at all times.

Match

The selling point of Bruin Bite, this scenes allows users to type in their preferences for when they’d like to grab a meal with someone. After clicking ‘Match Me’, the app searches for an ideal fit and provides a match to the user accordingly.

Chats

This tab allows users to chat with all of their matches and co-ordinate the finer details of their meet up. It also enable users to refer back to the details of their match and even access people’s profiles for future reference.

Bruin Bite Collateral

For the Beta Release, I also designed the following collateral for marketing purposes during Week zero of Fall 2018.