Clubly is a launched product that streamlines the discovery of student organizations at UC Davis. Launched in March 2024, Clubly serves as a platform for students to explore 800+ clubs.
TIMELINE
October 2023 – February 2024
ROLE
Product Designer
TEAM
2 Product Designers
5 Engineers
2 Product Managers
SKILLS
Usability Testing
Design Systems
Product Strategy
Challenge
UC Davis boasts over 800+ student organizations, yet 90%+ of students struggle to discover clubs that suit their interests.
Clubly, an initiative of AggieWorks, was designed as a club discovery platform to tackle this issue. However, Clubly’s planned features were not feasible nor user-friendly for an upcoming MVP launch—big redesigns were needed.
The project had already begun under a previous team, + I inherited their initial designs as I collaborated with Clubly's new Fall 2023 team.
Results
Under a tight timeline for launch, I refined Clubly's original designs, integrating both new and improved features while establishing a cohesive design system.
Clubly’s MVP was officially launched in March 2024, and has garnered 13,000+ unique users and official partnerships from 265+ clubs.
TIP
CHAPTER 1 / PROBLEM SCOPE
Over 90% of UC Davis students can't find clubs they want to join*.
*according to our survey with 138 student responses
CONTEXT
Thus, Clubly was born
The student engineers, PMs, & designers (like me!) at AggieWorks (a UC Davis student organization) wanted to build a solution to club discovery struggle—introducing Clubly.
Clubly is a club discovery platform, where students can access all UC Davis clubs and their info in one hub.
Meet Steve, one of Clubly's mascots.
MVP LAUNCH TIMELINE
I jumped in last minute to help launch the MVP
By the time I had been onboarded, Clubly had already completed research + initial designs. Upon evaluation, the designs were not feasible nor essential for MVP launch. Since Clubly was set to launch in 1 month, redesigns were needed fast.
My team and I worked under an iterative process, testing new iterations with users on a weekly basis until launch.
INTRO / FINAL DESIGNS
Meet the new, informative Clubly MVP
A centralized platform that streamlines club discovery through efficiency + personaliztion.
Filter by category
Find clubs specific to your personal interests by applying category filter tags. Selecting multiple categories will overlap, allowing you to find clubs that exactly match endless combinations of interests.
Essential club info at a glance
Club cards provide basic info at a glance, answering your key questions without visiting each club page individually.
An info page for clubs
From contact info to a photo gallery, everything you need to know about your next club is organized in a single page.
CHAPTER 2 / RESEARCH
I found that the original MVP designs were not backed by research.
LITERATURE REVIEW
What are our users’ behaviors with club discovery?
Due to the fast-paced nature of this project, I was unable to conduct new user research. To accommodate to this constraint, I dug through Clubly's UXR archive to gather insights on user behavior during club discovery.
COMPETITIVE AUDIT
What are the most essential features for club-discovery platforms?
After gaining insight on my users, I observed the current state of club discovery with a comparative audit of UC Davis club-finding platforms + platforms from other universities.
USABILITY AUDIT
Based on those findings, what's wrong with the current Clubly?
Lastly, I reviewed the original Clubly designs to find core issues. After discussing with the engineers and PMs, I eliminated features that were unnecessary and were not feasible for the MVP launch.
CHAPTER 3 / IDEATION
Before we start iterating… let's define the redesign direction.
REDESIGN APPROACH
Defining the overarching goal
There's a lot to take in—I know. Thus, I framed the redesign with a How Might We statement to guide my design decisions and to prioritize the MVP features that really mattered.
HOW MIGHT WE…
maximize efficiency + personalization in club discovery?
In other words… helping users learn more about the clubs that match their interests in less time, while prioritizing impactful and feasible solutions.
REVISED MVP FEATURE SET
We finalized some features, + left some to be tested
We couldn't start on the iterations just yet. We were still on the fence about features intended to be our KPIs, + whether they were feasible, impactful to the user, or compatible with the user flow.
Ultimately, we tested these features in our iterations and finalized them based on our findings.
Read the next chapter to learn how we finalized these features through testing.
CHAPTER 3 / EXPLORATIONS
Refining features based on multiple rounds of iterations & usability tests.
USABILITY TESTS
A/B testing various iterations with 17 students & club admins
We conducted moderated usability tests and A/B tests with 17 students, ranging from freshmen to upperclassmen, including a few club admins. After each round, we affinity mapped common pain points + findings of each feature to inform the next iterations.
CLUB CARDS (AS MOLECULES)
Helping users choose a club confidently & efficiently
I began refining one of the core components: the club cards. Digestible and informative club cards enable users to grasp each club's essence at a glance. Now that they are more readily informed, users should only click on clubs that genuinely interest them, avoiding time wasted on irrelevant options.
CLUB CARDS (AS AN ORGANISM)
Guiding users through faster & more comfortable navigation
On a larger scale, I proposed displaying only 9 clubs per page, in line with Miller's Law (kudos to my psych degree). This approach maximizes the number of clubs presented before mental fatigue kicks in.
Why not less than 9? There are 800+ clubs—we still wanted our users to view more clubs at a time + spend less time clicking through pages (without the cognitive overload, of course).
SEARCH FILTERS
Encouraging users to make personalized searches with ease
User testing revealed that a significant portion of users utilize filters in their searches. Thus, we decided to promote filters + made the filters "AND" operators, allowing for club results that are more specific to the user's preferences.
CHAPTER 4 / CLIMAX
We had a long debate between good design + having a North Star metric.
THE PROBLEM
PMs wanted a call-to-action button to measure success for our North Star metric
This was the biggest debate of the redesign—the main CTA of each club page. I closely collaborated with the PMs to come up with a CTA and NSM to measure success: whether users were finding the "perfect" clubs.
INITIAL CTA/KPI IDEAS
I discovered that there was no universal way for users to get involved in clubs…
We lacked data on which type of CTA clubs prefer on their page—which is why we were aiming for a universal solution. But, I quickly found that settling on a universal solution was a huge issue—each club operates differently + unpredictably.
THE PM'S SOLUTION
So, PMs suggested a general "Get Involved" CTA to establish universality
Clicking on this button would open an overlay with information on how to get involved with the club.
THE CTA/KPI DEBATE
… but this solution, along with others, had trade-offs
The proposed solution wasn't exactly the best UX—we were met with a trade-off between design and business goals. To maintain a smooth, intuitive user experience, my partner and I presented a counterproposal to the PMs' solution.
This alternative gained buy-in from the PMs, however I wasn't satisfied with the solution just yet.
FINAL CTA/KPI SOLUTION
My final solution? Driving direct action through a single button for multiple cases
Unsatisfied with our counterproposal, I drafted another solution on my own. I realized that we were too focused on finding a single, fixed solution, rather than one that is fluid.
Thus, I presented a hybrid of our previous solutions, which changes depending on conditional cases. This solution gained approval from the PMs, and is now set as Clubly's NSM.
NOTE:
CHAPTER 5 / DESIGN SYSTEM
Crafting an organized, detailed, + responsive design system.
DESIGN SYSTEM DOCUMENTATION
Organizing a component library to guide engineers & new designers
To assist accurate design implementation, I created Clubly's first organized design system library, ensuring all components followed an 8pt grid system and WCAG AA standards (at minimum).
RESPONSIVE DESIGN
Promoting accessibility & inclusivity with designs for all screen sizes
UC Davis students are avid mobile users. Thus, we created designs for tablet and mobile screens, which served as further design clarification for the engineers during development.
CONCLUSION / IMPACT
Launched with an ever-growing presence on campus!
ANALYTICS
We definitely built (& still are building) a user base
Since launch, we've accomplished our introduction stage goal: build a massive user base that's still growing! Clubly has proven to be so successful, it has emerged as AggieWorks's biggest and most popular launched product (go team!)
13k+
Unique users
375%+
Daily active users since Sep '24
294%+
Daily new users since Sep '24
CAMPUS IMPACT
Helping students find clubs, & clubs find students
Remember how only about 55% of clubs have websites? Since launch, we've helped clubs with their outreach by allowing students to look up their club's page on Clubly!
Clubs showing off their Clubly QR code at UC Davis's 2nd annual Tech Club Mixer
AFTERWORD / LEARNINGS
Delays & setbacks are inevitable—adapt iteratively at any given moment.
REFLECTION
Building a real product is messy—especially under a rapid & iterative process
A project with a cross-functional team can be tricky to navigate. As a result, I learned that effective communication is the key to efficiency and accuracy, especially when goals, priorities, and constraints are subject to unpredictable changes.
From constant check-ins with engineers and PMs to solidifying design system components with exact measurements, our team was able to launch a product that we are truly proud of.
Some of the Clubly team, including me!
KEEP READING
