Refreshing Clubly's designs + design system to include proper documentation + tokens for improved organization, consistency, + efficient workflows.
TIMELINE
August – September 2025
ROLE
Product Designer
TEAM
1 Product Designer (me!)
1 Technical Product Manager
SKILLS
Design Systems
Interaction Design
Responsive Design
Challenge
My time as Clubly's lead product designer is coming to an end—meaning new designers are taking over. Already, Clubly has some inconsistencies between designers + after developer implementation.
How might I build a scalable, well-documented design system that enables new designers + developers to work efficiently + maintain consistency across Clubly?
Results
I singlehandedly:
Designed new components + variables for Clubly's design system
Wrote proper documentation + style guides to guide new designers + engineers
Redesigned Clubly's UI to reflect the new design system + changing business needs
INTRO / FINAL DESIGNS
An interactive, instructional, + inviting design system.
New micro-interactions for every affordance
From hover effects to icons to tooltips, Clubly's components offer more feedback + delight than before.
Primitive + semantic tokens are here!
With Clubly's new semantic token naming, designers have an idea of which color or text style to use.
Style guides to instruct both design + implementation
Each component now has information on when + how to use/build them, all stored in interactive templates for designers + engineers to view.
Dynamic designs that follow along with your day
Based on the time of day, Clubly's homepage changes to match the sky for a touch of personalization + delight.
See Clubly's new design system in the redesign!
Discovering clubs + events just got a whole lot better (+ more fun)!
Curious to see the original MVP designs? Read my case study here.
CAUTION!
This case study is still a work-in-progress…
Check back soon to read the full story of how I got to these designs + design system… or contact me to learn more!
CHAPTER 1 / PROBLEM SCOPE
There were business + personal reasons behind this initiative.
BUSINESS PROBLEM
Our original design system caused lengthy workflows, inconsistencies, + inaccuracies
After two years as a product designer on Clubly, I've discovered a few major problems along the way:
PROBLEM #1
Clubly is scaling fast, so we urgently need new components, but…
Clubly.org is no longer just a club-discovery website—you can now browse club events too.
PROBLEM #2
…new designers are not well-informed of our current design system…
Our system lacked specificity on how + when to use colors, components, styles, etc—which created many questions I had to answer.
PROBLEM #3
…and our developers aren't either.
This translated to inaccurate UI implementation.
PERSONAL MOTIVATION
Tokens + variables also scared me—so that's why I wanted to learn them
I was inspired after playing around with Intuit's design system during my internship—variables + tokens were everywhere, but I wasn't familiar with them yet.
So, I was motivated to tackle them head on by building + applying them myself.
DESIGN SYSTEM PRINCIPLES
So, I pinpointed three principles to guide this new design system
HOW MIGHT WE
build a design system that is…
ACCESSIBLE
Meet WCAG AA standards at the bare minimum + be accessible for all screen dimensions
CLEAR
Understandable to not only users, but Clubly designers + developers—so we'll need style guides + tokens
EXCITING
We're a university club-discovery website—finding clubs + events shouldn't feel bland, but invoke thrill instead!
CHAPTER 2 / RESEARCH
I spent a lot of time studying design system foundations.
RESEARCH METHODS
Learning how existing design systems work + how to create them
Through studying other design systems, I had a feel for what to include in Clubly's own design system. I also utilized Figma's articles to learn how to create variables + tokens.
DESIGN SYSTEMS I STUDIED
FIGMA LEARN ARTICLES
KEY LEARNING
Clubly's design system should be expressive, while maximizing accessibility
INSIGHT #1
Expressive design systems are in, especially among younger users
Backed by Material Design 3's research!
SO WHAT?
Clubly's design system should match—our demographic is 18–22 year-olds
A fresh experience to appeal to our users!
INSIGHT #2
A product's use case determines the type of design system
Jira = heavy data, smaller components
Discord = expressive sounds + interactions
SO WHAT?
Clubly's use case allows for more visual flexibility + expression
A club/event-finding platform should feel fun—we're not a data/analytics product.
INSIGHT #3
More design system flexibility allows for larger components
Accessibility tends to be sacrificed (e.g. smaller components) when there's little room.
SO WHAT?
Clubly can afford to maximize accessibility when possible
There's definitely enough room for large touch targets—so we should design them like that.
CHAPTER 3 / EXPLORATIONS
Creating an expressive design system to match new business + user needs
DESIGNING WITH AI
Streamlining component creation with Figma Make
Due to changing product needs, a few components had to be refreshed beyond fonts + colors. In order to streamline my process, I prompted AI (Figma Make) to generate basic components/features, + then refined them with Clubly's new design system.
