Top Data-Driven Design Systems To Inspire Your Metrics Tracking

We know that for organizations looking to streamline operations, foster innovation, and maintain consistency, design systems provide an essential framework. However, the success of design systems lies in their ability to balance creativity with measurable results. By embedding robust metrics and quality indicators into their workflows, teams can transform their design systems into engines of efficiency and user satisfaction. We've previously gone over the essential metrics that you need to be tracking in your design system. But, it's also important to see how teams are building and using these data-driven design systems to full effect.

Below, we dive into examples of data-driven design systems, exploring their unique measurement strategies and the metrics they track to ensure success.

Hotmart’s design system: holistic metrics driving team collaboration and efficiency

Hotmart’s design system, created by one of Latin America’s leading EdTech companies, is a model of data-driven excellence. By focusing on development metrics, adoption coverage, team operations, and shared responsibility, the system ensures that every component contributes to a larger organizational goal.

Metrics tracked:

• Number of components built
• Time invested in each component
• Qualitative data from team surveys

Why it works: Hotmart’s design system doesn’t just measure outputs — it provides actionable insights that foster collaboration. For example, by tracking time invested in each component, teams can identify bottlenecks and optimize workflows. Surveys help gauge satisfaction and uncover pain points, ensuring the system evolves in response to team needs. This holistic approach ensures both efficiency and adaptability. 

‍"At Hotmart, we conducted this experiment, and the use of DS reduced the time for a screen from 26.4 hours to 8.4 hours. We were more than 3 times faster with DS." — André Rolla, Design System Manager at Hotmart

Read the full article here.

Badoo’s Cosmos design system: UI coverage precision with developer feedback loops

Badoo’s Cosmos design system stands out for its focus on performance and user-centric feedback. By employing robust UI coverage metrics and gathering survey data, Cosmos ensures that components are both effective and widely adopted.

Metrics tracked:

• UI coverage metrics
• Survey-based user feedback on adoption and usability

Why it works: Cosmos emphasizes the practical use of UI coverage metrics to ensure that components are consistently applied across the platform. These metrics provide a clear understanding of adoption rates, while user surveys offer qualitative insights into developer satisfaction and challenges. This dual approach not only tracks success but also identifies areas for growth and improvement. 

“The reason for introducing a design system in a company is not because so people can work less, but because so people can work better.” — Cristiano Rastelli, Design System Lead at HashiCorp

Read the full article here.

Preply’s Path design system: visual tracking for team-specific adoption insights

Preply’s Path design system uses an innovative methodology centered on visual coverage. By monitoring the proportion of components utilized across teams and pages, and displaying the insights on an internal dashboard, they empower teams to make informed decisions.

Metrics tracked:

• Visual coverage metrics
• Team-specific and page-specific adoption data

Why it works: Preply’s internal dashboard transforms raw data into actionable insights. Visual coverage metrics highlight underutilized components, enabling teams to optimize their workflows and ensure consistent application of the design system. Team-specific tracking allows for targeted interventions, fostering better adoption and alignment across the organization.

“Preply is a data-driven company. All the teams elaborate on a long-term strategy (following the Good Strategy, Bad Strategy book approach) and define the metrics that allow them to measure their successes toward that strategy. The metrics are evaluated, challenged, discussed, tweaked, and approved. The design system team makes no exceptions.” — Stefano Magni, Senior Front-end Engineer and Team Leader at Preply

Read the full article here.

Productboard’s design system: automated adoption tracking via real-time dashboards

At Productboard, measuring design system adoption is a meticulous process supported by both hard and soft metrics. The team tracks component usage, deprecated component instances, and typography adherence using tools like React Scanner, ESLint, and stylelint. These measurements are fed into Looker dashboards to provide actionable insights across their monorepo.

Metrics tracked:

• Instances of components and deprecated components
• Usage of props on React components
• Custom typography definitions versus design system-controlled typography
• Migration progress for components and typography

Why it works: The Looker dashboards at Productboard are a game-changer, allowing teams to visualize adoption rates, identify deprecated components, and monitor typography adherence in real time. By automating data collection through ESLint and stylelint, Productboard reduces manual effort and ensures accuracy. This data-driven approach facilitates better planning, maintenance, and prioritization of updates. 

“Since we are able to track the usage of every component, we now know what we should prioritize with maintenance, regardless if the components are frequently used or not. All this data is crucial for planning and maintaining our design system, and it would be hard to imagine going back to a time where we didn’t have this deep insight.” — Filip Daniško, Software Engineer previously at ProductBoard

Read the full article here.

Twilio’s Segment design system: analytics-driven legacy migration strategies

Twilio’s Segment design system uses adoption metrics to refine its impact and track progress against legacy libraries. By analyzing usage data, the team identifies areas for improvement and ensures their system remains relevant.

Metrics tracked:

• Component usage analytics
• Adoption comparisons with legacy libraries

Why it works: Twilio’s meticulous tracking of component usage highlights areas where legacy libraries still dominate, enabling targeted efforts to phase them out. By comparing current adoption rates with historical data, the team ensures their design system continuously evolves to meet developer and user needs. Read more here.

“The adoption dashboard was the final piece in making Evergreen a success as it helped us migrate over old parts of our app systematically and with full confidence. It was easy to identify usage of legacy components in the codebase and know when it was safe to deprecate them.” — Jeroen Ransijn, Full Stack Designer at Segment

Onfido’s Castor design system: component visualization guiding iterative adoption

Onfido employs an innovative visualization technique to monitor adoption. By using color-coded overlays, the team gains a clear view of component usage and can refine strategies based on insights.

Metrics tracked:

• Component usage visualized through overlays
• Adjustments to adoption strategies based on visual insights

Why it works: Color-coded overlays offer Onfido’s teams an intuitive way to assess component usage at a glance. This visualization method simplifies the identification of gaps in adoption and provides actionable insights to guide updates. Despite lacking a defined design system name, Onfido’s approach delivers a robust framework for fostering consistency and collaboration.

“You don’t need as many metrics as you probably think, so get comfortable with “good enough” metrics, focus on actionable ones, and get what you need to tell compelling stories to retain or grow investment in your system.” — Steve Dennis, Senior Design Manager at Onfido

Read the full article here.

These examples underline how data-driven design systems can transform the way teams work, measure success, and deliver user-centered solutions. From visual metrics to adoption comparisons and feedback loops, each system demonstrates a unique approach to embedding data into design workflows. By embracing these strategies, organizations can stay ahead of the curve, driving collaboration, consistency, and innovation across their design systems.