Building Components That Scale

The Problem

Performance: Individual button components contained 137 elements with 102 hidden layers. Files with 50+ component instances experienced significant performance degradation.

Usability: Button configuration required navigation across 3 disconnected property panels. 70% of variant combinations resulted in invalid states or errors.

Extensibility: The system required 960 manually maintained nested variants to support all button variations. Adding new features carried high risk of breaking existing instances across production files.

Context

Dreamcoat is the design system for Daxko's B2B software platform, serving four business verticals: non-profit, for-profit, boutique, and partner products. The system supports 10+ designers building 10 distinct products with 50+ components while maintaining consistency across different interface requirements.

Research

I designed a 4-point Likert survey to measure designer experience across five dimensions: learnability, discoverability, confidence, pattern implementation, and token application. Responses clustered around "2" (slightly disagree).

Workflow assessment scores revealed specific areas of concern:

• User Friendly: +2 (lowest score)

• Stability: -6 (indicating frequent breaking changes)

• Efficiency: +3 (designers developed workarounds rather than using intended workflows)

My documentation audit showed zero component-specific documentation, negative scores for pattern guidance, and only foundational token documentation at adequate levels.

Key finding: Components were technically functional but suffered from unintuitive architecture and insufficient documentation, creating unsustainable cognitive overhead for users.

Solution

Architecture Principles

Orthogonal properties: Independent controls for size, content, type, state, and mode allow any valid combination without creating invalid states.

Variant reduction: The system uses 5 property controls to generate all valid combinations, replacing 960 nested variants (4×5×4×4×3).

Separation of concerns: Structure, content, and styling are managed by separate sub-components, allowing updates to one area without affecting others.

Token-driven styling: Components reference semantic design tokens (e.g., $dna-color-bkg-btn-primary-default-default) enabling automatic adaptation across brand contexts.

The Redesign

I mapped all existing functionality and rebuilt the component structure with a reorganized property architecture. Properties were grouped into logical categories (btn-states for visual styling, btn-padding for spatial properties) with semantic naming conventions that describe function rather than implementation.

Education & Adoption

I developed and delivered a company-wide keynote, "The Cost of a Button," to connect component architecture decisions to business outcomes: efficiency gains, cost reduction, brand quality, and revenue impact. This presentation secured leadership support and prepared teams for the migration process prior to V2 launch.

Results

Performance:

• 77% improvement in render performance

• 98% reduction in hidden layers

Usability:

• 92% decrease in variant selection errors

• Designer satisfaction increased from 4.2 to 8.7 (out of 10)

• Property structure reorganized by function rather than technical implementation

Maintenance:

• Zero breaking changes during V1→V2 transition

• Component updates achieved through targeted sub-component modifications

• Established repeatable framework applied across the design system

Outcome

This project demonstrated that systematic improvements to component architecture deliver measurable value across performance, usability, and maintenance. The redesign eliminated 95% of component complexity while increasing flexibility across a $161M product portfolio, establishing patterns that scaled across the entire design system.