Duration: June 2018 - May 2019

Team: Product & Engineering Managers, UI/UX Designer, 10 Developers

Purpose: BruinMeet was a progressive web app seeking to connect UCLA students through meaningful interactions. As millennials frustrated by the impersonal and often demeaning nature of “swipe culture” on traditional dating apps, our team designed a product to encourage . While the dating app is no longer live, during my time at BruinMeet we had 1000+ registered users and over 400 weekly active users.

My Role: BruinMeet was my first experience working with a full engineering team, where I was able to get a feel of what working together with devs entailed in creating a product. During my time on the team, I redesigned the logo, created marketing materials, created the landing page, and shipped multiple new features

Logo Study

My first task on the team was designing the logo for our app.

1st Iteration: I explored different

2nd Iteration: We agreed that we wanted to keep the bruin as part of our logo, but the versions with two bears either had too much detail or seemed contrived. BruinMeet’s mission was to foster natural relationships, and forcing love was not how we wanted to be perceived

Final Design: To keep the look minimal and clean, we decided on a simple bruin as our logo and mascot throughout the site…with a heart nose as a subtle ode to our mission!

Typography Decision

The web app had previously used Monserrat as the font for the logo, which was consistent with its use as the primary font for the rest of the app. However, users shared that the angularity of the type was off-putting, so we tested some other options.

We decided on Quicksand because we liked the openness and clean lines of a Sans-serif, and found that softer, rounded edges translated as more welcoming. Finally, we decided to change the case of the logo to lowercase in keeping with the youthful and playful nature of BruinMeet, while still maintaining its case in text for readability.

Fun Fact: We had such a positive response to the type change in the logo that we changed the primary font to Quicksand across the site!

Marketing

After the logo redesign, BruinMeet was set to relaunch with an optimized match algorithm as well. In prior versions of the app, users had difficulty understanding how the match flow process worked.

For the next demo day, I designed a graphic to illustrate the new algorithm, which we then presented to prospective users.

Prior to relaunching, I was tasked with creating some graphics as a final marketing push before release.

This marketing graphic and FB Profile frame were shared both digitally through our social media avenues, and physically as flyers on campus and in the dining halls.

Landing Page Study

BruinMeet did not have an informative landing page, and had received feedback from users saying that they were unsure of what the site itself was. To make matters worse, competitors such as Tinder and Bumble had begun aggressive marketing campaigns with our school so it was getting harder to distinguish ourselves from the “big fish”.

We needed our users to understand our mission, and to get that message to them as soon as they clicked on our page.

What’s New?

1. The first design decision I made was to have the second page bleed into the first above the fold, so users could discover the information following.

2. I still wanted to keep the page clean, with the CTA serving as the highlight of

3. We filmed a fun promo video detailing the app and match process,

4. Each feature was clearly explained in the “How it Works” section so prospective users could get a feel for the app before they joined

Features

Profile Redesign

Since BruinMeet sought to provide a more humanized approach to dating, the user profile was jam-packed with information. We wanted to give users the best first impression to learn about their matches, so we provided a ton of prompts for them to showcase their personality.

In the first iteration of the profile however, this led to a cluttered jumble of text that was overwhelming and confusing.

2nd Iteration

Users told us that having only a small, single, profile picture was frustrating because photos showcase so much personality - something we’ve learned from current dating apps as well! So our first order of business was designing a carousel.

After deciding on the layout of the carousel, I designed the next iteration of the profile as an enhanced version of the original - so as to not confuse users. While the iconography helped make critical information more clear, the profile was still impersonal, and most of the prompt responses weren’t as readable as we’d like.

Final Design

I was still unsatisfied with the redesign after the 2nd iteration, so I brought my concerns to the team at the next product meeting. We had received feedback from users saying that the format of the “Looking For” section felt impersonal and mechanical - kind of like a resume. Many users responded that they didn’t even read most of the information presented in the bios!

At this point, I decided to start from scratch and create a new profile page. The goal of the profile page is to showcase the users’ personality - both through their photos and their responses. We wanted pairs to have a comprehensive overview of their prospective match so that they want to read on and meet them.

I changed up the format of the “Looking For” section to make it more conversational, while preserving the critical information, and gave users opportunities to personalize their photos with both a carousel and cover photo.

Where to Meet

One of the main goals of BruinMeet was to get users off the app and meeting in person. However, we received feedback that even though matches wanted to meet, they couldn’t figure out where to meet. This ended up in expired matches and dissatisfied users.

After a product meeting ideating on this problem, we came up with the Where to Meet flow. When creating their profile, users could now rank their ideal meeting preferences from a preset list of locations, and would be matched with other users accordingly. This selection page was also accessible through the profile page.

Deactivation

The app was still in its early stages when I joined, so there was native deactivation method built in yet. Users would have to email the admin, who would then delete their account from the database. This was a deterrent for many users so a deactivation flow was critical to the success of the app. Initially, deactivation removed users from the match cycle so that they would no longer appear, but did not remove them from the database. It was crucial that we were transparent in this, so users were made aware of the status of their accounts.

Lessons Learned

BruinMeet was my first project working on a full development team…and a large one at that! During my time there, I was able to dive into design, marketing, UX research & user testing, and product design.

I attended product meetings with the PM and Engineering Lead, where I had the opportunity to advocate for our users, and address their pain points in new features.

I learned about the give and take when working with devs, and find a balance between my ideal design and the technological constraints. While BruinMeet is no longer live, I’m grateful for the opportunity to learn and grow with a team, and I can’t wait to tackle another challenge alongside them.