Chapter 1: eBay Design System

Building at Global Scale eBay

Objective: Implement a robust design system for eBay's intranet to improve consistency and streamline processes across product teams.

65+
Modular, reusable components built
–33%
Reduction in design time
+25%
Increase in design consistency
+30%
Improvement in team efficiency
+20%
Increase in stakeholder satisfaction
Foundation: Design Tokens
Tokens are the symbols of design choices, transforming raw values into scalable, significant, and easy-to-read labels used consistently across teams and platforms. Every component in the eBay system is built on this token layer, enabling theme-level changes without component-level rework.
Design Patterns
eBay design patterns 1

eBay design pattern library: tokens & foundations

eBay design patterns 2

Design token structure across teams and platforms

Component Library
eBay components 1

65+ modular, reusable UI components

eBay components 2

Component documentation with all interaction states

Pain Points
  • Navigation Complexity: Cross-team navigation and integration challenged consistent adoption
  • Consistency Maintenance: Keeping consistency amid diverse inputs and evolving requirements
Growth Indicators
  • 30% improvement in team efficiency across product teams
  • 20% increase in stakeholder satisfaction scores
Future Vision
  • System Expansion: growing the component library across more product surfaces
  • Adaptive Updates: continuous iteration as product needs evolve
  • AI Integration: embedding AI tools into design system workflows
  • Enhanced Collaboration: deeper cross-team contribution and governance model

Chapter 2: DSP Design System

Unifying Four Products Yahoo!

Objective: Create a comprehensive design system for Yahoo!'s Demand-Side Platform, unifying four internal products under a single, scalable visual language.

35+
Interactive components built & documented
–33%
Reduction in user-reported interface issues
+45%
Improvement in design coherence
–30%
Reduction in development time for new features
+22%
Increase in compliance & accessibility ratings
Design Patterns
DSP design patterns 1

DSP design patterns: foundational layer

DSP design patterns 2

Token-based design language across DSP products

Component Library
DSP components 1

35+ interactive, fully documented DSP components

DSP components 2

Component states and accessibility annotations

Pain Points
  • Complex User Needs: Diverse, evolving requirements across four internal product teams
  • Maintaining Consistency: Keeping components aligned as each product independently evolved
Growth Indicators
  • 30% reduction in development time for new features
  • 22% increase in accessibility and compliance ratings
Future Vision
  • Comprehensive System Expansion: growing to cover all DSP product surfaces
  • Continuous Adaptation: evolving the system as product requirements change

Chapter 3: Mail Style Guide

Where It All Started Yahoo!

Objective: Standardize visual elements and improve the user experience of Yahoo!'s Mail web application. This meant establishing a foundational style guide covering color schemes, typography, layout structures, and core interactive components.

Yahoo Mail style guide 1

Yahoo! Mail color palette & typography system

Yahoo Mail style guide 2

Button and input component library: all states

Pain Points
  • UI Inconsistencies: Non-uniform appearance across Mail surfaces
  • Scalability Issues: Struggles adding new features to an undocumented system
  • Limited Guidance: Minimal documentation for complex interactions
Achievements
  • Established foundational style guide: color, typography, layout
  • Reduced design inconsistencies through a shared visual reference
  • Initial components: buttons and input fields with all states & sizes
Future Vision
  • Expansion into a comprehensive design system
  • Enhanced customization and flexibility across surfaces

Across All Three Systems

Similarities & Differences

What All Three Share
Design system similarities
Standardization as foundation
User-centric approach
Cross-team collaboration
Where They Differ
Design system differences
Complexity & scope
Future vision & adaptability
Focus on inclusivity
Documentation depth

Cumulative Impact

From Style Guides to Global Systems

65+
Components at eBay
–33%
Design time (eBay)
+30%
Team efficiency (eBay)
35+
Components at DSP
+45%
Design coherence (DSP)
–30%
Dev time (DSP)
+25%
Design consistency via UI audits (eBay)
+20%
Stakeholder satisfaction (eBay)
+22%
Accessibility & compliance ratings (DSP)
"From crafting basic style guides to developing sophisticated, scalable design systems: a progression reflecting growth in handling complex environments, diverse teams, and global scale."
"A design system is never done. It's a living product that grows with your team."
"A design system only works if people believe in it. The real work is human: building trust with engineers, convincing PMs that slowing down to build reusable components accelerates everything that comes after."

Want to go deeper? Connect on LinkedIn for access to full component documentation, contribution guidelines, and token architecture files.

Previous
Case Study
Yahoo! Ads Tables
Next
Specialized Work
Yahoo! DSP Mobile