The essentials of
Workd Design System
Duration: 12+ Months
An atomic, WCAG-compliant system that streamlines design and development.
Project Overview
Role on Project
Lead UI/UX Designer
Tools Used
Adobe XD
Figma
Miro
Jira
Microsoft Teams
Team Members
Product Manager: Rafi Almhana
UI/UX Team Lead: Austin Holland
UI/UX Designer: Jesse Bruner
Project Summary
Who were the users?
Designers and developers using shared components across Workd’s CRM and e-commerce tools.
Why did we need a developed design system?
The existing system was still in its early stages — loosely structured and incomplete — which made it difficult for the team to design and build with consistency or confidence.
What value did it bring?
A standardized, clearly documented system improved usability, reduced friction, and allowed both design and dev to move faster with confidence.
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 WCAG standards.
Create scalable naming conventions and variables to reduce dev pain points.
Migrate the design system into Figma.
Constraints
Small design team with limited bandwidth.
Fast-moving product roadmap requiring incremental improvements.
Needed alignment across multiple development teams before pushing updates.
System built largely on Material V2, limiting flexibility.
Legacy system dependencies.
Research
What We Knew
The design system existed in Adobe XD but was still early in its maturity. Components were loosely defined, documentation was sparse, and designers often built one-off elements instead of using shared assets. Developers faced inconsistent specs, leading to visual and functional mismatches across products.
What We Needed to Learn
We needed to understand how the existing XD libraries were being used, where designers and developers struggled most, and what prevented consistent adoption. The goal was to identify structural gaps that made the system hard to scale or trust.
How I Researched
Audited every XD component library, documented inconsistencies, and mapped duplicates and conflicts.
Interviewed designers, developers, and PMs to capture real workflow pain and handoff gaps.
Benchmarked leading systems from Google, Atlassian, and Monday to identify patterns that improve clarity and adoption.
Deep dive into Material V2 to understand native component behavior, state models, and constraints, then translated those rules into guidance that made it clear to developers what was possible and what was not.
Key Findings
Developers rebuilt layouts from scratch due to outdated assets and incomplete specs.
Multiple unofficial versions of the same component existed across teams.
Accessibility was not enforced, contrast and focus guidance were missing from the workflow.
Designers frequently duplicated or modified components because coverage was limited and rules were unclear.
Insights
The design system wasn’t missing effort — it was missing structure and clarity. To move forward, we needed to standardize rules, centralize components, and create documentation that aligned both design and development around a single, trusted source of truth.
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