Context

When I joined the project, the company was migrating from a legacy UI kit to a new one. The new component library was partially built, and its documentation was incomplete. Internal and customer-facing products followed different UI patterns, with no documented guidelines for component usage.

Goal

Audit the use of toggles, checkboxes, and tables across the company’s internal and customer-facing products, organize their variants, define their purpose, and document how they should be used in interfaces.

Research

To understand the structure of the UI kit and its component usage guidelines, I reviewed internal design documentation and consulted senior designers.

I then examined how the components behaved in the products. I requested access to staging environments for customer-facing projects and tested the interfaces myself, exploring toggle states, behavior, and usage across different scenarios.

This allowed me to compare three sources: the documentation, the Figma component, and its actual implementation in the products.

Validating the Documentation Against Implementation

To develop the documentation, I reviewed internal resources, consulted senior designers, and tested interfaces in staging environments for customer-facing projects.

For the toggle component, I identified discrepancies between the Figma documentation and the implementation: some documented states were missing from the products, and the component’s colors did not match the new UI kit.

I worked with designers and developers to clarify which states were currently supported and how the component was used across other projects, including toggles paired with badges. Based on these findings, I revised the component and updated its documentation.

Design Solutions

I documented each component using the company’s established four-section structure:

• Info — an overview of the component, its purpose, and the problems it solves.

• Components — the Figma component and its variants.

• Showcase — an overview of the available variants, with guidance on when to use each one.

• Templates — examples of the component in context, common usage patterns, and links to product pages where it appears.