WERK.DANCE · DESIGN SYSTEM · 2 months
Months to Weeks: Building a Design System for a Team That Couldn't Slow Down
Role: Product Designer, led the system design
ON THIS PAGE
01 Context
02 The Problem
03 Key Decisions
04 Screens
05 Outcomes
06 Evolve
A Small Team, A Fast-Growing Platform
01
Werk is the home base for dancerpreneurs — a link-in-bio-style platform that runs the business side of independent dance teaching: pop-up classes, shows & battles, private bookings, multi-week programs, a synced master teaching schedule, and student list ownership, replacing a patchwork of Linktree, Squarespace, Venmo, and Google Forms. As one of werk's product designers, I led a 2-month effort to bring the platform's visual and component system up to the pace the product was shipping at.
Design Couldn't Keep Up
02
Before the system, brand and UI assets were scattered across loose files with no single source of truth — competing logo lockups, unreconciled color palettes, duplicate promo banners in different gradients. Even the parts that were documented didn't hold: the typography guide specified Barlow Condensed for every heading, but live profile screens used a serif display font instead. The visual style existed, it just lived as static Photoshop comps copied into Figma — never a living, reusable system.
Final results with new design system:
What Stayed, Changed, & Why
03
decision #1
Adopted Practical UI, a design system by Adham Dannaway, as the foundation instead of building a component library from scratch.
WHY?
Small team, no time or budget to build custom from zero — needed real structure fast without stalling the redesign on infrastructure.
Result
A working, consistent baseline in place quickly, freeing real design time for the pieces that actually needed it.
Adapted
e.g. the segmented control, check boxes and radio buttons — kept the kit's underlying structure, flattened the 3D styling to match werk's flat visual language.
Decision #2
Went component by component into three buckets, based on whether it carried the brand, was outdated, or cohered with everything else.
WHY?
A blanket "use everything" would've read generic. A blanket "build everything" would've blown the timeline. The split protected brand expression exactly where it's visible.
Result
New screens shipped in weeks instead of months.
Custom Built
Buttons, color/branding, input fields, typography, icons, card styles, and custom components like labels and status colors — everything carrying brand expression or high visibility.
From Kit Default to On-Brand
04
Before
After
The Result: Months to Weeks
05
New screens now ship in weeks, not months — same team, same scope, just no longer reinventing structure with every feature.
What's next
Applying the same framework to the booking flow, listing creation, the dashboard, onboarding, and a v3 profile redesign — months of work, now built on structure instead of guesswork. If I did it again, I'd finalize visual branding with the founders first, so the interface and the marketing language matched from day one instead of syncing them after the fact.
Connecting Claude Cut Implementation From Days
to Hours
06
decision #3
Connected the design system to Claude Code via the Figma MCP, using it to generate mockups and dev-ready handoff documentation directly for Hector, and built a single HTML reference page where founders could see the system — and anything recently updated — without needing a walkthrough.
WHY?
Manual handoff was the actual bottleneck in finishing production, and founders had no living reference for the system, so every update meant explaining it to them by hand. Same root problem as before the design system existed — no single source of truth — just a step further downstream.
Result
Production/finishing time dropped from days to a couple of hours, and founders gained self-serve visibility into the system instead of relying on a walkthrough for every change.
New screens now ship in weeks, not months — same team, same scope, just no longer reinventing structure with every feature.
What's next
Applying the same framework to the booking flow, listing creation, the dashboard, onboarding, and a v3 profile redesign — months of work, now built on structure instead of guesswork. If I did it again, I'd finalize visual branding with the founders first, so the interface and the marketing language matched from day one instead of syncing them after the fact.
let me organize your design chaos.
Let's work together.
Book a discovery call
halo studio
Product Design partnership for founder-led creator economy startups moving beyond MVP.
FOLLOW