<- Back to Portfolio

Design System

Delaware Life Company
Senior UX Designer
8 months (ongoing)
Team: Designer, 2 Engineers

I architected the Onyx Design System by strategically extending Material Design to create a comprehensive component library that enabled a 2-person design team to support 60+ engineers across 15 product teams, resulting in faster development cycles and in annual savings.

01 The Challenge

Fragmented Design Language Across Products

Our rapidly growing financial services platform suffered from inconsistent user experiences across multiple products and teams. While we had adopted Material Design as our foundational framework, teams were interpreting and implementing Material components inconsistently, and the framework's limitations didn't fully address the complex needs of financial service interfaces. Designers and engineers were recreating similar components repeatedly, leading to design debt, inconsistent interactions, and inefficient handoff processes that slowed product development cycles.

Pain Points

  • Material Design Framework Limitations

    Material Design components didn't address complex financial service workflows, leading teams to create inconsistent interpretations across products.

  • Development Inefficiency

    Engineers were rebuilding similar components for each new feature, with lengthy design-to-development handoff processes averaging 3.2 hours per component.

  • Communication Breakdown

    No common design language between cross-functional teams resulted in frequent clarification requests and inconsistent implementation of approved designs.

  • Tooling Limitation

    Adobe XD's lack of developer-friendly features and limited collaboration capabilities hindered our ability to create efficient design-to-development workflows at enterprise scale.

02 The Solution

Nucleus-Based Design System Architecture

I architected and designed the Onyx Design System using a nucleus methodology that establishes foundational design tokens at the core, with increasingly complex components built systematically from these atomic elements. Working within Material Design framework constraints, I created custom extensions and interpretations that addressed enterprise financial service needs while maintaining framework consistency. This approach ensures scalability, systematic pattern recognition, and adherence to established design principles across all product teams.

Key Features

  • Foundational Design Tokens

    • Comprehensive color system with primary, secondary, and contextual palettes
    • Systematic typography scale with defined hierarchy and responsive specifications
    • Standardized spacing and sizing tokens for consistent layout patterns
    • Responsive breakpoint system optimized for financial service user contexts

  • Material Design-Based Component Architecture

    • Atomic components extending Material Design elements with financial service customizations
    • Molecular components combining Material patterns with enterprise-specific functionality
    • Custom organism-level patterns addressing complex financial workflows not covered by Material Design
    • Template-level specifications balancing Material Design principles with business requirements

  • Documentation & Specifications

    • Detailed component anatomy with precise measurements and spacing
    • Behavioral specifications for interactions, hover states, and responsive adaptations
    • Implementation guidelines with code snippets and integration instructions
    • Usage principles and best practices for maintaining system integrity
    • Leveraged the existing Storybook implementation used by the development team to audit and align our Figma design library with production components, ensuring precise visual consistency and eliminating discrepancies between designed and built environments.

03 The Process

Key Design Decisions

  • Material Design Framework Strategy

    Chose to extend Material Design rather than create entirely custom framework to leverage established patterns while addressing enterprise needs. Developed systematic approach to identifying when Material components could be adapted versus when custom solutions were required for complex financial workflows.

  • Comprehensive Documentation Strategy

    Invested heavily in detailed component specifications and usage guidelines to ensure consistent implementation across distributed teams and reduce design-to-development friction.

  • Token-First Approach

    Established design tokens as the foundational layer to enable systematic consistency and efficient maintenance as the system scales across multiple products and platforms.

  • Responsive-Native Design

    Built responsive considerations into every component from the foundation level rather than as an afterthought, ensuring optimal experiences across all device types and contexts.

Steps

  • Research & Pattern Analysis (6 weeks)

    Comprehensive audit of existing design patterns
    Conducted systematic analysis of all existing product interfaces to identify recurring patterns, inconsistencies, and opportunities for standardization. Interviewed designers and engineers across 15 product teams to understand pain points in current design-to-development workflows. Analyzed competitor design systems and industry best practices for financial services applications.

  • Design Token Foundation (4 weeks)

    Material Design framework adaptation
    Developed comprehensive design token system that extended Material Design's foundational elements while addressing financial services accessibility requirements. Created systematic typography scale that built upon Material Design's type system with custom weights and sizes for complex financial data display. Established spacing and sizing systems that maintained Material Design's 8dp grid system while accommodating enterprise interface density requirements.

  • Component Architecture (8 weeks)

    Material Design framework extension
    Built component library using nucleus approach that extended Material Design components for financial service requirements. Started with Material Design atomic elements and systematically created custom variations and entirely new patterns for complex financial workflows. Developed detailed specifications that maintained Material Design principles while addressing enterprise needs including data density, complex form interactions, and regulatory compliance requirements.

  • Documentation & Guidelines (4 weeks)

    Comprehensive system documentation
    Created extensive documentation covering component usage principles, implementation guidelines, and best practices for maintaining system integrity. Developed interactive component library with live code examples and integration instructions. Established governance processes for system evolution and component approval workflows.

  • Implementation & Training (6 weeks)

    Cross-team adoption and education
    Collaborated with engineering teams to implement component library in production systems. Conducted training sessions for designers and engineers on system usage and contribution processes. Established feedback loops and iteration cycles for continuous system improvement based on real-world usage patterns.

04 The Impact

Measurable Success

The Onyx Design System has become the backbone of our product development process, delivering significant improvements in efficiency, collaboration, and user experience across the entire organization.

Measurable Items

  • Accelerated product development
  • Unified the user experience
  • Scaled the designs and fostered collaboration
  • Successful adoption by 15 product teams and over 70 engineers, creating a unified design culture
  • Improved accessibility through the enforcement of color contrast and typography standards, making our products more usable for everyone
  • 40% faster feature development cycles, allowing us to deliver more value to our customers, faster
  • 94% positive satisfaction rating from designers and engineers on the system's usability and impact on their workflows