OVERVIEW
A mobile app concept that redefines the experience of connecting with clubs and organizations on your campus. BruinSync takes the guesswork out and lets the student define their educational journey.
disclaimer—this self-inspired project is not affiliated with UCLA. I saw a need for this resource and took action.
DEFINING THE PROBLEM
Finding a community in college can feel overwhelming. Students often juggle classes, work, and social lives, all while having to plan for their future. An integral part of finding your community is through joining campus clubs and organizations.
UCLA prides itself on its 1000+ clubs and organizations. However, I noticed it fell short in helping students find and join them. The resources available to students are an outdated online database, recommendations by friends, or flyers at a club fair.
I created BruinSync to fix this.
I wanted to create a platform for students to make the best of their educational journey by designing an experience that was efficient and enjoyable. A lot of college experiences are due to circumstances, my goal was to create a known, in a world of unknowns.
THE RESEARCH
I conducted 25 user surveys to get a better idea of my target audience. The participants were recent UCLA graduates within the age group of 20-35. These graduates were diverse in their student identities—traditional, transfer, and commuter—helping gain a deeper understanding of their unique challenges.
Each question was set up to reveal a problem, obstacle, or goal. I wanted to cast a wide net, so I was able to identify the best candidates for further discussion. This approach helped me come to a solution based on insights instead of assumptions.
Next, I interviewed 5 users one-on-one via zoom. These interviews revealed the ways in which the users had gone about finding clubs in their past. I was able to gain further understanding of what challenges they faced as well as what they enjoyed about their past experiences.
To organize the rich qualitative data collected from the surveys and interviews I used an affinity diagram. This process aided in surfacing key needs, goals and pain points.
KEY INSIGHTS
I. While most students rely on friends, social media, club fairs, and the obsolete UCLA database to join organizations, the clubs they end up joining is a result of a “right place, right time” situation.
II. Regardless of their medium of choice, 85% of users surveyed were frustrated at the lack of adequate resources available.
As I progressed through the research and analysis phase, I set the following goals based on my findings.
PROJECT GOALS
I. Provide streamlined, accurate, and actionable information for users.
II. Create an onboarding experience that allows for personalized club suggestions.
III. Create a way for users to browse clubs without being overwhelmed.
VI. Implement a search function which allows the user to filter their results by interest and schedule.
After synthesizing all the data, three user personas were created.
These personas had similar motivations but different student identities and expectations. While there was some overlap, I felt it was crucial to include all walks of students. Oftentimes a typical university student doesn’t embody the struggles of a transfer or commuter.
THE DESIGN PROCESS
I started the design process creating user flows to understand the different paths my user would take. I took account of their objectives to determine what information they would need and when they would need it to achieve their goals.
Next, I started sketching wireframes. I chose sketching as my starting point as I didn’t want to get stuck in the details of high-fidelity wireframes. This approach allowed me to generate and visualize potential solutions rapidly and in their simplest forms.
Once I settled on a possible solution, I created mid-fidelity interactive wireframes for user testing. I chose three interviewees from my initial focus group. I kept the visual aesthetic rough to ensure the focus was on the big picture and not the design details. I was testing for—user flows, navigation, layout structure, and information hierarchy.
I had the users perform specific tasks to ensure I was headed in the right direction with my user journeys. While these wireframes were just bare bones, they helped make sure the user experience was functional and straightforward.
User testing revealed unease with the onboarding process. A standalone screen faced two main issues—the amounts of input fields felt overwhelming, and the lack of interaction made the user feel the recommendations wouldn’t be adequate. Further, when asked to locate the user profile, the hamburger menu icon wasn’t intuitive. Keeping this feedback in mind, I started designing high fidelity wireframes.
CREATING A VISUAL IDENTITY
I wanted to create a user interface that was simple and effective. To convey reliability, I created three style guides as references to ensure visual consistency throughout the user journey.
The name BruinSync came from wanting to merge the pride of UCLA with the intention of this app - to help students be in sync with their campus. For the logo, I drew inspiration from the official mascot for UCLA—the Bruin bear. A sense of familiarity combined with a polished modern feel. The end result was a geometric logo embodying the core colors of BruinSync.
BRINGING THE RESEARCH TO LIFE
I tackled the onboarding process first. During my generative research, I had discovered most students felt overwhelmed by the sheer amount of choices. I wanted to ensure the user would set at ease from the beginning of their experience. I hoped to create an interactive experience that was smooth, intuitive and also gave tailored club suggestions to the users.
Onboarding Screens
HOME SCREEN
I wanted to create a home screen from which the user could easily get to their goal in the least amount of effort. With consideration to cognitive load and information hierarchy I kept the screen minimalistic but effective. The user would be able to browse categories, be reintroduced to their tailored suggestions, and also search via keywords.
CLUB PROFILE
The club profile aimed to minimally deliver all actionable information to the user. The preliminary research showed there wasn’t adequate accurate information about the clubs. This screen allowed the user to gain familiarity while creating a functional experience in which they could:
1. Add the club to their favorites
2. Add the club to their calendar
3. Connect with clubs via social media channels
SEARCH AND FILTERING
The search results needed to be easy to read and actionable. I implemented a filtering process in which the user could choose categories, and the days and/or times most convenient to them. This was a major pain point in discovery as students were not able to find clubs that fit their busy schedules.
TAKEAWAYS & NEXT STEPS
As the project progressed, the need for this resource became even more evident.
The current solution made use of the database; however, this is not reliable long-term. The creation of a mobile application for students was only a part of the solution. My next steps include creating a backend web application for clubs & organizations to optimize the information fed into the mobile app. This will ensure that the information is always updated.
Further, this resource cannot exclude the students who do not have access to smartphones. I am currently working on a website that delivers an accessible solution to all students. Lastly, due to Covid-19, I was unable to conduct usability testing to the fullest. The coming weeks and months are filled with designing more screens and getting more user feedback.
All in all, this was an exciting start and I have a lot yet to accomplish! Click below for an interactive high-fidelity prototype!
