MatthewMarshallHuntsberry

Turning Assumptions Into Insights

Health Dashboard

Executive Summary

Scaling a design system across 48+ brands required more than components and tokens—it demanded real-time visibility into usage, adoption, and trust. I designed and built a comprehensive Health Dashboard leveraging the Figma REST API, D3.js, OpenAI, and soon, MCP to track component insertions, detachment rates, usage consistency, and overall system momentum.

This platform redefined how we measure success. By shifting from gut-feel to quantified engagement, we transformed the system from a static resource into a living product with measurable ROI and cross-functional alignment.

The Problem: What We Couldn’t See

Before the dashboard, adoption was assumed but not proven. Teams claimed to be “using the system,” but we had no idea

  • Prioritize training and onboarding
  • Justify deprecations or feature gaps
  • Identify disengagement or rogue component use
  • Validate success across dozens of brands and products

Figma's native analytics provided snapshots but lacked momentum tracking, quality scoring, and real-time signals required to manage a system at enterprise scale.

Health Breakdown - Reach
Health Breakdown - Reach

We needed more than usage counts. We needed to understand who was using the system, how far it extended across teams, and whether those usages remained consistent over time.

Why Not Just Use Figma Analytics?

Figma’s dashboard was a helpful starting point but it didn’t answer the bigger questions:

  • How has usage trended over the past 90 days?
  • Which components are falling off or being detached?
  • Are teams reusing components as intended?
  • Where is momentum gaining or fading?
Figma's analytics dashboard
Figma's analytics dashboard

Our custom dashboard filled these gaps—and laid the groundwork for deeper analytics across design and code.

The System I Built

Tech Stack

  • Frontend: Next.js 15
  • Data Sources: Figma REST API for usage and detachment metrics
  • Visualization: D3.js for custom health visualizations
  • AI Integration: OpenAI API for generating executive-ready summaries
  • Future Integration: MCP (Model Context Protocol) for code-level analytics
Hearst Design System Health Dashboard
Hearst Design System Health Dashboard

The Dashboard in Action

Health Summary

AI-generated weekly insights highlighting key wins, risks, and usage shifts.

System Summary
System Summary

Component Insertions (90 Days)

Live usage tracking shows how adoption aligns with system events (new components, education, platform shifts).

Component Insertions over the past 90 days
Component Insertions over the past 90 days

Top Component Usage

Identifies most-used and underutilized components to guide future training, support, and deprecation planning.

Top Component Usage
Top Component Usage

System Health Breakdown

Radar visualizations scoring adoption coverage, usage growth, consistency, reach, and time to value.

Overall System Health
Overall System Health

System Health Breakdown

Radar visualizations track the five key dimensions of system value:

  • Adoption Coverage
  • Usage Growth
  • Consistency
  • Reach
  • Time to Value
Radar chart visualizing the design system’s health across five dimensions: Adoption Coverage, Usage Growth, Consistency, Reach, and Time to Value. All metrics show high performance, with Adoption Coverage and Consistency nearly maxed out, and Reach slightly lower than others.
Radar chart visualizing the design system’s health across five dimensions: Adoption Coverage, Usage Growth, Consistency, Reach, and Time to Value. All metrics show high performance, with Adoption Coverage and Consistency nearly maxed out, and Reach slightly lower than others.

What’s Next: Connecting Design and Code

The next phase integrates

  • Token usage tracking across repos
  • Component adoption in production
  • Storybook-to-live mapping
  • Cross-source alignment (Figma ↔️ Code ↔️ Usage)

This will position the Health Dashboard as the

Reflections

“If you're not measuring adoption, you're just maintaining inventory.”

This project reshaped how we educate, maintain, and roadmap. By proving the system’s impact with real data, we earned stakeholder buy-in, improved onboarding, and repositioned the design system as a strategic product—not just a tool.

Measured Progress: Week 8 vs. Week 16

To show the tangible impact of the Health Dashboard, we tracked five key metrics over an eight-week span. The results illustrate how visibility, feedback loops, and system-level awareness transformed the design system from a static asset into a data-informed product.

Dashboard view from Week 8 displaying key health metrics: 100% Adoption Coverage, 99.9% Consistency, and a -72.3% decline in Usage Growth. The component insertions graph shows a gradual upward trend. Additional panels display top-used components (with Button and IconButton leading), an Overall Health score of 53.5%, and a radar chart indicating strong Adoption and Consistency but lower Reach and Time to Value.
Dashboard view from Week 8 displaying key health metrics: 100% Adoption Coverage, 99.9% Consistency, and a -72.3% decline in Usage Growth. The component insertions graph shows a gradual upward trend. Additional panels display top-used components (with Button and IconButton leading), an Overall Health score of 53.5%, and a radar chart indicating strong Adoption and Consistency but lower Reach and Time to Value.
Dashboard view from Week 16 showing improved design system health: Adoption Coverage remains at 100%, Consistency slightly dips to 99.7%, and Overall Health rises to 91.4%. The component insertions chart reveals a spike in mid-May followed by a dip and steady activity into July. The top components used include Button, IconButton, and Badge. The radar chart reflects strong Adoption and Usage Growth, moderate Time to Value, and slightly lower Reach and Consistency.
Dashboard view from Week 16 showing improved design system health: Adoption Coverage remains at 100%, Consistency slightly dips to 99.7%, and Overall Health rises to 91.4%. The component insertions chart reveals a spike in mid-May followed by a dip and steady activity into July. The top components used include Button, IconButton, and Badge. The radar chart reflects strong Adoption and Usage Growth, moderate Time to Value, and slightly lower Reach and Consistency.