WERK.DANCE · DESIGN SYSTEM · 2 months
Role: Product Designer, led the system design
In progress
context
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.
The problem
Design Couldn't Keep Up
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 right below:
key decisions
What Stayed, What Changed & Why
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.
outcomes
The Result: Months to Weeks
New screens now ship in weeks, not months — same team, same scope, just no longer reinventing structure with every feature.
Months → weeks
Build Speed
Days → hours
Handoff Speed
Self-serve for founders, no walkthrough needed
System Visibility
Freed up for the work that needed it
Design Capacity
Extended to 5 more flows
Extended to 5 more flows
Built straight from Claude-generated specs
Handoff Quality
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.
Postscript
Connecting Claude Cut Implementation From Days to Hours
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.
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