Make it stand out.

Bruinwalk, UCLA’s highly frequented website with 5.7 million visits annually, needs an enhanced Clubs Page to improve the browsing and search experience for students looking for student organizations. This update will complement existing features like class and apartment searches. The goal is to design a user experience that boosts the visibility of clubs, making it easier for students to discover organizations they might otherwise overlook.

Sector

Community, School, Education

Challenge

My Role

Project Lead, UX Researcher, UX Design, Web Design

Project Time

12 weeks

Context

Bruinwalk, an essential UCLA resource for our 33,000 undergraduates and 13,000 graduate students, offers information on classes, apartments, and student organizations.

In our proposal to the President for the upcoming academic year, we suggested creating a Clubs Page to complement the Enormous Activities Fair (EAF), a one day event featuring where students can talk to members of all the clubs.

This initiative was suggested to help students find smaller communities with shared interests and enhance their integration into the expansive campus environment.

Researching to understand our users

Problem: Too many clubs available with varied exposure, no structured method to filter and identify the best fit.

During 10 user interviews and 60 user surveys with students across various cohorts and backgrounds at UCLA, a notable theme emerged: with over 1,000 clubs at UCLA, the more popular ones tend to overshadow others, leading to uneven exposure. Students often depend on word-of-mouth from their connections to discover clubs, which is an unstructured approach and results in students mostly considering the more prominent clubs, even if they may not be the best fit for their interests.

Later, students may discover clubs that align with their interests in their third or fourth years. However, they often find that it’s past the "golden time" for joining, meaning that club members have already formed strong bonds, making it awkward to join. Alternatively, some clubs, particularly professional ones, may not even accept upperclassmetn as they want members who can contribute for longer.

Students also reported encountering false advertising about popular clubs, leading them to invest significant effort in exploring and applying to these clubs, only to find that they were not enjoyable.

Students primarily learn about clubs is through the one-day Enormous Activities Fair held at the beginning of the school year. Clubs set up booths and often present an overly positive image to attract new members. For those who invest significant time in applying to competitive clubs, this can lead to a lot of wasted effort and disappointment when reality doesn't match their expectations. Additionally, the time-consuming application processes for these competitive clubs can cause students to miss out on exploring other clubs during the crucial early weeks of the school year.

Users need a platform to showcase all potential clubs matching their interests and provide accurate details to help them decide which ones to explore more in-depth.

Given the effort and maintenance required to gather all the club information ourselves, we envision a crowdsourced platform where students can contribute and update information about clubs, ensuring the site remains current and comprehensive.

Based on the user information we gathered, we performed affinity mapping with 60+ data points to distill our data into two distinct user personas - underclassmen and upperclassmen. The purpose of doing so was to convey our findings to the developers and project managers in a digestible manner, and also to serve as a reminder to the design team as to who we were designing for. This approach helps illustrate how the challenges faced by lowerclassmen contribute to the difficulties experienced by upperclassmen. Without a comprehensive way to explore all available clubs, lowerclassmen miss opportunities that could have been a better fit, leading to missed social and professional development opportunities later in their academic journey.

Developing a strategy to solve the problem

In order to help students create a streamlined way by providing them a platform that surfaces to them clubs that are aligned to their interests and provides accurate information on clubs so that they can make the best choice as to which is the greatest fit and join and become involved in these clubs sooner, these are the 2 main goals we wish to meet with our design:

(i) Making it simple for students to find and engage with all clubs that align with their interests, not just those that are more well-known

(ii) Putting up content and information designed in a way that would help them to decide which clubs might potentially be the best fit for them among all the options

Design Process

Testing design concepts

There were three design directions that we considered going in, collecting ideas from designers, developers, and project managers. However, we quickly eliminated the first two because it was clear that those two were not going to solve the problems we identified (friends system pairs you with a senior in the club, making one still susceptible to false advertising, and the bulletin board would only surface clubs that were more active with their updates). In hindsight, we should have reminded the whole team about the goals we were trying to meet before holding this discussion.

Besides, the fact that the ratings and reviews solution would best address the Bruinwalk has typically run on a ratings and reviews system, so there was no compelling reason to deviate from this model especially when this solution would address the problems we identified. Notably, some departure from the current designs was soon to occur…

Lo-fis of Discovering Clubs to save to visit at EAF or to apply to

What changes we made from V1 to V4 and why:

#1 Improved exploration and discoverability of all clubs:

  • Change: displaying all clubs at the side, allowing users to click on a club and view details on the left.

  • Reason: When we did some quick rounds of gathering user feedback with the lo-fis, users reported liking the new design more as it kept all clubs visible on the same page, reducing the need to open new tabs. It enhanced user satisfaction and encouraged prolonged interaction, causing users to scroll for longer and notice all of the clubs that pique their interest

#2 Improved Data Presentation:

  • Change: Replaced subjective heuristics where users rated on a scale of 1 to 5 (e.g., "social level") with frequently mentioned tagged words (e.g., "social" mentioned 64 times in V4).

  • Reason: The original heuristics led to subjective and potentially misleading interpretations (e.g., “1” on “social level” could refer to unsocial or different social vibes - partying vs. kickbacks) when we interviewed users. Tagged words provided clearer and more accurate information, helping users make better-informed decisions.

We also conducted card sorts to refine the information hierarchy, ensuring that the most helpful data for students to determine the best fit was prioritized - as seen in V4.

Some interesting takeaways from this were that students said that the order could change depending on what was their motivation for joining the club - for professional development or for making friends. While objective information like “when the club meets” or “time commitment” were universally ranked as must-have information, users did not agree much on the rest of the filters. While this might have called for more personalization, this project did not have the means to support this flexibility at that moment, so we tabled it for the future.

For the information that was universally ranked as most important, we made sure to surface this at the top of the information hierarchy and in our design.

Hi-Fis

Searching and comparing clubs with goal to find clubs to join

Applying down filters to narrow down potential clubs

Saving clubs of interest and accessing them again later

How does this solution address the problem?

Recall: Users need a platform to showcase all potential clubs matching their interests and provide accurate details to help them decide which ones to explore more in-depth.

To achieve the “all potential clubs matching interests” part, we included:

  • A "Top Mentions" section: To allow users to search not only by club names (in cases that popped up where the club name is not related to what the club does) but also by frequently mentioned topics, making it easier to discover clubs that match their interests. With only shorter phrases included in “Top Mentions” , users could also skim to get a better picture of the clubs rather than needing to read the full reviews to see if the club piques their interests or not

  • Custom Filters: To streamline navigation, we added filters based on common criteria students use, such as when clubs meet, ensuring users see only the clubs that fit their availability and interests

  • Left Side Scroll Bar: This feature enhances interaction by making browsing through clubs more intuitive and engaging as users do not have to leave the current page

  • "Clubs We Think You Might Like": Located at the bottom of the page, this section highlights less popular clubs, giving them more visibility and encouraging users to explore a wider range of options.

These design choices ensure users find and engage with clubs that match their interests and needs.

To ensure accurate details, we implemented the following:

  • Detailed Review Prompts: Through user testing, we decided to replace the general comments section with specific prompts asking users about what they liked, what could be improved, and useful information for future applicants. This approach led to more balanced and informative reviews.

  • Top Mentions Instead of Ratings: We removed the 1-5 star rating system due to inconsistent interpretations. Instead, we introduced "Top Mentions," which captures frequently mentioned keywords or phrases, providing clearer insights.

  • Reviewer Context: We included information about the reviewer’s background, as experiences vary—e.g., some clubs may be more welcoming to freshmen than transfer students. This helps tailor the platform to reflect diverse user experiences.

Impact: 75% less misclicks and 50% less time taken to achieve task goal

To evaluate the success of the redesign, we recruited 7 incoming freshmen who were unfamiliar with Bruinwalk's previous design. Conducting remote usability tests, we assigned identical tasks for both the old and new designs, recording misclicks and average task completion times. We made sure to alternate the order as to whether participants tested with the old or new design first to account for bias.

  • Old Design:

    • Average Task Completion Time: 6 minutes

    • Misclicks per Task: 4

  • New Design:

    • Average Task Completion Time: 3 minutes

    • Misclicks per Task: 1

These metrics demonstrate that the new design significantly improved usability, reducing the average task completion time by 3 minutes and decreasing misclicks by 75%. Users were also asked some quick questions about how they felt about both designs at the end so as to gain insights as to what they preferred about the new design and what could be further improved.

What I Learned

  • I learned the critical importance of securing buy-in from developers early in the design process. By frequently checking in with them and involving them in design discussions, I made sure they felt integral to the project. This collaboration was crucial in aligning design changes with practical implementation. I largely leveraged on reusable components to make the design less taxing to implement and if there was need for innovation, backed it up with solid user research. This approach not only facilitated smoother implementation but also ensured that the design was both functional and supported by evidence, ultimately leading to a more cohesive and efficient workflow.

Future Steps

Enhance User Feedback Integration: Based on insights from user interviews and surveys, we'll further refine the Clubs Page by incorporating detailed user feedback. This includes making it easier for users to leave reviews as the current form is way too comprehensive.

Continuous Testing and Iteration: Conduct ongoing usability tests with a diverse group of students. Based on our convenience sampling, we mainly reached out to lowerclassmen and also people who are not trasfer students. Diversifying the UCLA population that we are testing with will help us identify any remaining issues and areas for improvement. We will focus on tracking user engagement and satisfaction to ensure the new design meets the needs of the UCLA community effectively.