Ryan Schmidt
← Back to all case studies

Design System for D-Tools Cloud and Insights+

Built and maintain a comprehensive design system that improves consistency, accelerates development velocity, and elevates product quality across the entire platform.

  • 85% component reuse rate
  • 50% decrease in requests for whitelabeling the product
My role
Sole owner: Led strategy, component library, documentation, design tokens, governance, and cross-functional collaboration.

Problem

UI built ad hoc, with inconsistent patterns and frequent visual debt. There was no reusable library which led to duplicated work and an unpredictable user experience.

Goals

  • Create a single source of visual and interaction truth for all designers
  • Improve UI/UX consistency and team velocity
  • Make future handoff to engineers feasible via scalable tokens and guidelines
  • Ensure a color palette and patterns meeting accessibility best practices

Research & Audit

  • Began with a full audit of existing screens and patterns
  • Audited feedback: "Cloud feels toy-like" (tackled color/hierarchy); heavy debt found in text, spacing, and icons

Building the System

  1. Started completely from scratch; prioritized foundations (color, type, spacing)
  2. Standardized color palette (APCA and OKLCH). Accessible, professional, ready for code hand-off
  3. Set scalable tokens for future engineering expansion
  4. Continuous Figma audit to prune, refine, and promote best-in-class components

Design highlights

Design tokens showing color, typography, and spacing system
Defines light and dark mode color variables to ensure flexibility and visual harmony across themes.
Component library showing reusable UI components
Establishes a scalable, accessible color system with defined usage rules for consistency across the product.
Design system documentation and guidelines
Unifies navigation structures and interaction states while strengthening information hierarchy and overall usability.
Design system documentation and guidelines
Standardizes layout, spacing, and hierarchy for consistent readability across all modules.
Design system documentation and guidelines
Demonstrates one example within a broader component system, with detailed rules ensuring consistency across every UI element.

Adoption & Rollout

  • 85% adoption among designers, tracked in Figma Library Analytics
  • Noted issues with lack of code-based components due to legacy usage; addressing through better education and migration guides
  • Engineering integration and code-based site in progress for full team access via Cursor and Figma's MCP and CodeConnect

Business impact

Sales and internal feedback cite improved brand perception and product professionalism. Negative feedback vanished; whitelabeling requests are down 50%.

Lessons & next

  • A single-owner design system requires continuous buy-in and continual feedback for lasting impact
  • Top Q1 2026 priorities:
    • Modular engineering buy-in and end-to-end token/component handoff
    • Dark mode is fully designed and documented - awaiting engineering resourcing