top of page

Testing New Components Before Publishing in a Design System

📍4 min read, Feb 6, 2025

A design system is only as strong as the components within it, and ensuring their usability before publishing is critical. A new component must work for designers—who use it in their designs—and for end users, who interact with it as part of a product experience.
Testing with both groups ensures the component is functional, flexible, and truly effective in real-world applications.

Why Testing with Designers Matters

Designers are the first to interact with new components. They need to:

  • Understand its functionality and limitations.

  • See if it integrates smoothly into their designs.

  • Check for missing properties or inconsistencies.

How to test with designers:

  1. Ask designers to use the component in real projects.
    New components are often built because a team needs them for an ongoing project - let them use the component to build their designs and prototypes.

  2. Observe them in action.
    Treat this like a usability test: record sessions, take notes, and analyze later.

  3. Iterate based on findings.
    If major usability issues arise, fix them and ask designers to try again with an improved version.

💡Tip: You can treat this task as a regular usability test on a prototype and create test objectives, take notes, and analyze findings. The FigJam board below illustrates how I organize test results and analysis for design system components.

A Figjam board for visualizing component usability tests.

Testing Components with End Users

Once designers validate that a component works technically within their workflows, it’s time to check if it works practically for users.
 

Testing with end users provides insights on:

  • Perception - Does it feel intuitive and clear?

  • Interaction - Are micro interactions smooth and helpful?

  • Flow - Does the component support the intended user journey?

How to integrate end-user testing:

  1. Align on usability testing goals.
    Check what usability tests are planned for the project where the component will be used. Ensure the new component is tested as part of a real flow, rather than in isolation.

  2. Collaborate on analysis.
    Work with the team that originally requested the component to review usability findings. Their involvement fosters engagement and helps drive adoption.

From Testing to Implementation: Applying the Insights

Once the component has been tested with both designers and end-users, the next step is to refine it based on findings and ensure smooth adoption. The insights should directly shape how the component is iterated on, documented, communicated, and monitored.

Iterate on The Component

Before publishing, address any usability issues uncovered during testing:

  • Fix functional gaps or missing properties identified by designers.

  • Adjust UI, interactions, or accessibility based on end-user feedback.

  • Validate the improved version with quick follow-up testing if needed.

Document Best Practices

Use testing insights to create clear guidelines:

  • Provide do’s and don’ts based on real-world challenges.

  • Define configuration options and edge cases.

  • Offer examples of correct and incorrect implementation.

Monitor Adoption and Performance

After publishing, continue tracking the component’s effectiveness in real projects:

  • Monitor adoption rates and check if issues persist.

  • Gather qualitative feedback to inform future updates.

  • Watch for long-term usability concerns that might emerge over time.

By iterating before publishing and continuously refining after launch, the design system remains practical, adaptable, and aligned with real user needs. 

bottom of page