Clubly is a completely student-built web application 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 over 90% of students struggle to discover clubs that suit their interests.
Clubly, an initiative of AggieWorks, was designed as a centralized 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, and 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 10,000+ unique users and official partnerships from 265+ clubs.
TIP
This is an old version of Clubly!
The following designs are from my earlier days of my product design journey. Keep reading to learn more about the product/feature decisions we made, and check out this case study to see the newest redesign.
INTRO / FINAL DESIGNS
Meet the new, organized, + 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 essential information 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 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
How does Clubly play into this?
The student engineers, PMs, & designers (like me!) at AggieWorks (a UC Davis student organization) wanted to build a solution to club discovery struggle—thus Clubly was born.
Clubly is a club discovery platform, where students can access all UC Davis clubs and their information in one location.
Meet Steve, one of Clubly's mascots.
MVP LAUNCH TIMELINE
Where do I jump in?
By the time I had been onboarded, Clubly had already completed user research and initial designs. Upon evaluation, the designs were not technically-feasible nor essential for MVP launch. Since Clubly was set to launch in 1 month, redesigns were needed fast.
Due to this tight timeline, my team and I worked under an iterative process, churning out iterations to be tested by users on a weekly basis until launch.
MVP GOALS & CONSTRAINTS
What are my goals as the product designer?
After discussing with my PMs, we set three redesign goals that correspond to the needs of product life cycle stages.
CHAPTER 2 / RESEARCH
Clubly's current designs are not user-friendly, necessary, nor technically feasible under our constraints.
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 (consisting of interviews and a survey with 138 respondents) 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 the UC Davis club-finding platforms, as well as platforms from other universities.
USABILITY AUDIT
What's wrong with the current Clubly?
Lastly, I reviewed the original Clubly designs to find issues at the core. After discussing with the engineers and PMs, I eliminated features that were unnecessary and were not technically-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
So, which features are making it, & which ones need to be tested?
With the HMW statement in place now, we still couldn't start on the iterations just yet. We were still on the fence about features intended to be our KPI's, and 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.
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 created affinity maps to organize the most common pain points and findings of each feature to inform the next iteration designs.
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 and 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 the usage of filters and settled on making the filters "AND" operators, allowing for club results that are more specific to the user's preferences.
INITIAL CTA/KPI IDEAS
Finding a universal way for users to get involved in clubs…
Lastly, the biggest debate of the redesign—the main CTA. Throughout this process, I closely collaborated with the PMs to come up with a CTA and NSM to measure success: whether users were finding the "perfect" clubs.
We quickly discovered that finding a universal solution to fit all clubs was a huge issue—each club operates differently and unpredictably.
THE CTA/KPI DEBATE
…while maintaining a balance between good design & business
After revising our approach to establish universality, we were met with a trade-off between design and business goals. In order to maintain a smooth, intuitive user experience, my partner and I presented a counterproposal to the PMs' original solution.
This alternative gained approval from the PMs, however I wasn't satisfied with the solution just yet.
FINAL CTA/KPI 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 interchanges depending on conditional cases (inspired by the knowledge I've learned in my coding classes at Davis!) This solution gained approval from the PMs, and is now set as Clubly's NSM.
NOTE:
This isn't the most ideal design… but the best one given our constraints.
After our MVP launch, our constraints ultimately changed, thus giving me more freedom to design an even better solution: a custom CTA button. See it in action in this case study.
CHAPTER 4 / EXPLORATIONS
Crafting an organized, detailed, + responsive design system.
DESIGN SYSTEM DOCUMENTATION
Organizing a component library to guide engineers & new designers
With such a major renovation of Clubly's design components, there were many specifications to keep track of—especially for the engineers. 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 the very least).
RESPONSIVE DESIGN
Promoting accessibility & inclusivity with designs for all screen sizes
UC Davis students don't just use their laptops—they're also 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!)
10k+
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
Communication is key—especially under a rapid & iterative process
A project with a cross-functional team can be tricky to navigate—we can all feel like we're on different pages at times. 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.
