Workd Design System
Duration: 12+ Months
An atomic, WCAG-compliant system that streamlines design and development.
Role on Project
Design System Manager
Tools Used
Adobe XD
Figma
Microsoft Teams
Team Members
UI/UX Designer: Jesse Bruner
UI/UX Team Lead: Austin Holland
Product Manager: Rafi Almhana
60 Second Overview
I took ownership of a fragmented design system that lacked consistency, accessibility, and developer alignment.
To solve this, I led the migration from Adobe XD to Figma after its sunset was announced, giving the team scalable component management and smoother handoff. I standardized naming conventions, expanded CSS variables, enforced WCAG compliance, and applied Atomic Design principles while refining key components like tables, calendars, and Kanban boards.
The outcome was a cohesive, scalable system that improved efficiency, reduced dev friction, and set a strong foundation for future growth.
Discovery
Challenge statement
The design system lacked consistency, accessibility standards, and clear documentation, causing friction between design and development.
Background
When I joined, components existed but were inconsistently documented and not always reusable. Developers faced CSS conflicts and designers had no reliable component library.
Goals & Objectives
Standardize documentation and rules for designers and developers.
Improve accessibility to at least AA standards.
Create scalable naming conventions and variables to reduce dev pain points.
Establish a unified design system in Figma.
Constraints
Small design team with limited bandwidth.
Fast-moving product roadmap requiring incremental improvements.
Needed alignment across multiple development teams.
Legacy system dependencies.
System built largely on Material V2, limiting flexibility.
Research
User Interviews (Developer Feedback)
Developers identified pain points with CSS variable conflicts, unclear states, and inconsistent naming conventions.
Competitive Analysis
Reviewed Monday.com’s design system for design-to-dev collaboration models.
Studied Material Design for scalable structure and documentation practices.
Discovered Pain Points
Inconsistent component documentation.
Lack of accessibility compliance.
Overlapping CSS variables leading to unintended system-wide issues.
Final Solution
UI Showcase
Component Expansion
Refined and expanded core components: Kanban, Calendar, Tables, Stepper, Tabs, Trees, Form Fields, Tooltips, Popovers, Coachmarks, Notifications.
Added secondary/tertiary buttons, dark mode support, and standardized states (hover, drag, focus, disabled).
Atomic Design Application
Atoms: color tokens, typography, spacing, icons, inputs.
Organisms: tables with filters, Kanban boards, calendars.
Molecules: labeled fields, dropdowns with filters, toggles.
Problem Resolution
Problem: The existing system had inconsistent naming conventions and rules, creating friction between designers and developers.
Solution: Standardized component naming conventions and documentation rules for consistency.
Problem: Overlapping CSS variables caused unexpected changes across components and accessibility issues.
Solution: Expanded CSS variables to isolate dependencies and improve maintainability.
Problem: Accessibility standards were not consistently met.
Solution: Updated components to meet at least WCAG AA compliance, with many reaching AAA.
Problem: Adobe XD was being sunset and no longer fit the scale we needed for our design system.
Solution: Migrated the design system to Figma, which offered scalable component management and stronger design-to-dev handoff.