Design Systems

Component Audit And Categorization

A component audit catalogs every UI element across your product. It reveals inconsistencies and redundancies that you might not know exist. This exercise is the foundation for any design system effort.

Duration
3 hours
Group Size
3-5
Category
Design Systems
Difficulty
Easy
Participants will:

  • Systematically audit existing UI.

  • Identify and categorize UI components.

  • Surface inconsistencies and redundancies.

  • Create a foundation for design system planning.

  • Build shared understanding of design debt.

Participants will:

  • Complete an inventory of UI components.

  • Document inconsistencies and redundancies.

  • Lay the foundation for design system development.

  • Share team awareness of design debt.

Be thorough; components hide in settings and error states. Question every variation: "Is this intentionally different?" Don't fix during the audit; just document. Take photos of the sorting process. Common findings: 5-10 button variations, inconsistent typography, similar components with different interactions, and "snowflake" components appearing only once. Share findings with the team. Use as input for design system prioritization. Create a consolidation roadmap.

  1. Screenshot Collection (45 minutes): Capture every unique screen, including all states (empty, loading, error, success), edge cases, and admin views. Organize screenshots by feature or user flow.

  2. Component Identification (60 minutes): Print screenshots or use digital tools. Circle and number each distinct UI component: buttons, inputs, cards, modals, icons, typography. Note variations.

  3. Categorization (45 minutes): Group similar components. Create categories like navigation, forms, content display, and feedback. Identify intentional vs. accidental variations. Note components for consolidation.

  4. Documentation (30 minutes): Create a component inventory spreadsheet. Record component name, category, variations, locations, and issues. Photograph each unique component. Note usage patterns and inconsistencies.

  5. Synthesis (15 minutes): Summarize total component count and category breakdown. Highlight consolidation opportunities. Prioritize components for standardization. Plan next steps for design system development.

Unlock Step-by-Step Instructions

Create a free account to access step-by-step instructions, agendas, and resources for all activities.

For Facilitators

  • Review participant profiles and expectations
  • Prepare all materials and supplies
  • Test technology and room setup

For Participants

  • Complete pre-session survey
  • Review background materials
  • Prepare examples or case studies

Unlock Pre-Work Requirements

Create a free account to access step-by-step instructions, agendas, and resources for all activities.


  • Access to product screens.

  • Screenshot tool.

  • Large wall space or digital collaboration tool (Miro/FigJam).

  • Printed screenshots (if physical).

  • Colored stickers or markers.

  • Component inventory template (spreadsheet).

  • Category labels.

  • Shared folder for screenshots.

  • Presentation template.

Unlock Materials Required

Create a free account to access step-by-step instructions, agendas, and resources for all activities.

Discussion

0/2000
Loading comments...

Related Exercises

See all exercises

Design System Documentation Strategy

2 hours

Design system documentation turns code into a usable product. This exercise creates a strategy covering what to document, how to structure it, and how...

Design systems

Design System Landscape Mapping

2 hours

Before building a new design system, map what already exists. Design system landscape mapping inventories all components, patterns, styles, and docume...

Design systems

Design Token Exploration

2 hours

Design tokens are the core of your design system. They are colors, spacing, typography, and other values that ensure consistency. This exercise helps ...

Design systems