Adoption Metrics Framework

When to Use

• Building a business case for design system investment
• Setting up a quarterly reporting dashboard
• Justifying headcount or budget for the design system team
• Identifying which teams or products need adoption support

The Prompt

Define a complete adoption metrics framework for a design system.

Context:
- **Team size:** [number of designers + engineers]
- **Products using the system:** [list products]
- **Maturity stage:** [early / growing / mature]
- **Current pain points:** [what you're trying to improve]

Include:

1. **Component adoption** — % of UI built with design system components vs. custom code. How to measure: code scanning, import analysis, or manual audit.
2. **Token adoption** — % of styles using design tokens vs. hardcoded values. How to measure: lint rules, Figma plugin audits.
3. **Coverage** — % of product UI patterns that have a corresponding design system component.
4. **Consistency** — Number of visual deviations from the design system per product.
5. **Velocity impact** — Time to build a new feature before vs. after design system.
6. **Quality impact** — Accessibility issues, visual bugs per release before vs. after.
7. **Satisfaction** — Designer and developer satisfaction scores (survey template).

For each metric:
- What to measure (specific data point)
- How to collect it (tool or method)
- Target benchmark (what "good" looks like)
- Reporting cadence (weekly/monthly/quarterly)

Also provide a sample dashboard layout showing how to present these metrics to leadership.

Example Output

## Adoption Metrics Dashboard

### Component Adoption
- Metric: % of React imports from @acme/design-system vs. total UI imports
- Collection: Run `npx depcheck` or custom script scanning import statements
- Benchmark: >70% (growing), >85% (mature)
- Cadence: Monthly

### Token Adoption
- Metric: % of color/spacing/typography values using CSS variables or tokens
- Collection: Stylelint rule flagging raw hex/px values
- Benchmark: >80% of styles use tokens
- Cadence: Per PR (lint), monthly aggregate

### Coverage
- Metric: Number of unique UI patterns in the product vs. patterns in the system
- Collection: Manual inventory audit (quarterly)
- Benchmark: >60% coverage at growing stage
- Cadence: Quarterly

### Velocity Impact
- Metric: Average time to implement a standard page (login, settings, dashboard)
- Collection: Compare time estimates before/after design system adoption
- Benchmark: 30-50% reduction in implementation time
- Cadence: Quarterly survey

### Developer Satisfaction
Survey questions (1-5 scale):
1. "The design system saves me time on most tasks"
2. "I can find the component I need quickly"
3. "Components work as documented"
4. "I would recommend the design system to a colleague"

Target: Average score >3.8

### Leadership Summary View
| Metric              | Current | Target | Trend |
|---------------------|---------|--------|-------|
| Component adoption  | 62%     | 80%    | Up    |
| Token adoption      | 71%     | 85%    | Up    |
| Pattern coverage    | 55%     | 70%    | Flat  |
| Dev satisfaction    | 3.6     | 4.0    | Up    |
| Build time savings  | 25%     | 40%    | Up    |