Ryan Batch

Design Systems

Building the bridge between design and development.

About the project

Multiple teams and vendors at a government agengy were designing and building products independently. Inconsistencies in UI, interaction patterns, and language created friction for users and inefficiency for teams. This work focused on creating a shared system that supported quality, reuse, and scalability across products.

Role

  • Design System Lead
  • Component Architect
  • Design & Dev Liaison

Focus

  • Design Systems
  • Component Libraries
  • Documentation
  • Design-Dev Collaboration

Outcome

Design and development became faster and more consistent. Teams reused patterns instead of reinventing them. Users experienced clearer, more predictable interactions across products. The system scaled across teams, vendors, and platforms.

Project Overview

As products evolved, design decisions were being made repeatedly and inconsistently. Small differences added up to a fragmented experience and increased delivery cost. A design system was introduced to create alignment without constraining teams.

The Challenge

  • Inconsistent UI and interaction patterns
  • Repeated design and development effort
  • Accessibility and compliance risks
  • Limited shared ownership of design standards
  • Without a system, scale increased friction rather than efficiency.

The Approach

We defined a comprehensive set of design principles. We created modular components with clear usage guidelines. We documented everything with examples and code snippets. We trained teams on how to use the system.

Establish a foundation

We identified common patterns, components, and language across products.

  • Core UI components
  • Reusable interaction patterns
  • Shared UX writing guidelines
  • Accessibility standards baked in
  • The focus was clarity, not completeness.

    Build for adoption

    The system was designed to be practical and easy to use.

  • Figma libraries for designers
  • Code-based components documented in Storybook
  • Clear usage guidance and examples
  • Adoption mattered more than perfection.

    Scale intentionally

    The system evolved alongside product needs.

  • MVP first, then expansion
  • Feedback loops with designers and developers
  • Governance focused on enablement, not control
  • The system grew as trust grew.

    What Changed

      Reduced design and development time

    • Improved consistency across products
    • Lower cognitive load for users
    • Fewer accessibility issues
    • Broad adoption across teams and vendors
    • The system became shared infrastructure.

    Why This Matters

      Design systems aren't simply about UI kits. They're about reducing friction, supporting teams, and enabling quality at scale.

      This work turned design principles into operational reality.

    Multidisciplinary Designer