Skip to main content
UI Coach Logo
Advanced

Deprecate a Design System Component

Design a governance workflow for retiring a shared component while giving product teams evidence, migration guidance, and a fair exception path.

Desktop web4 hours plus

The brief

Understand the problem

Background

Removing a flawed component is not just a library release. Teams need to find live usage, understand the reason for change, plan migration work, and manage genuine exceptions without letting the old pattern persist indefinitely.

User context

Nadia maintains a company design system. The legacy modal component fails current accessibility requirements and appears in 43 product surfaces owned by nine teams.

Product problem

The system team needs to coordinate a measurable deprecation while product teams need enough context to estimate work and avoid unsafe replacements.

Objective

Create a component deprecation workspace covering impact review, announcement, migration tracking, and exception decisions.

What to design

Define the experience

Required experience

  • Review component health, adoption, and known risks
  • Define a replacement path and milestone dates
  • Notify affected owners with usage-specific guidance
  • Track migrations and decide time-limited exceptions

Screens and states

  • Component health detail
  • Deprecation setup
  • Migration tracker
  • Exception review

Core user flow

Follow the critical path

  1. 01

    Nadia opens the legacy modal report and validates the affected products

  2. 02

    She selects the accessible dialog pattern as the replacement and defines milestones

  3. 03

    Owners receive notices that link to their detected usages and migration recipe

  4. 04

    One team submits an exception for a regulated release freeze

  5. 05

    Nadia approves a limited extension with an owner and review date

Product rules

Requirements and constraints

Requirements

  • Show component versions, detected usages, owners, and confidence in each match
  • Connect the deprecation reason to concrete design and code guidance
  • Support announcement drafts tailored to adopters, maintainers, and leadership
  • Track migration status at the product-surface level
  • Require rationale, risk controls, owner, and expiry for every exception

Constraints

  • Usage detection can be incomplete and must show its last scan date
  • Published packages cannot be removed before the announced support date
  • The replacement may not support every legacy behavior

Reality check

States worth considering

A detected repository has no active owner
Two package aliases point to the same component
A team claims migration but still ships an older bundle
A critical accessibility issue requires an accelerated deadline

Ready-to-use content

Mock data

Use this content to test hierarchy and realistic data states. You can expand it when the concept needs more depth.

Adoption

  • 43 detected surfaces
  • 9 owning teams
  • 31 current package versions
  • 12 versions more than one year old

Milestones

  • Notice published: April 8
  • New use blocked: May 6
  • Support ends: August 30

Finish line

What to deliver

  • Four desktop screens documenting a component deprecation from impact review through exception handling

Optional direction

Visual resources

Use these as a starting constraint if you want one. They are not part of the required solution.

Font pairing
Abril FatfaceRoboto

Abril Fatface & Roboto

Clear interface writing gives people the confidence to understand what changed and decide what to do next.

Icons
Illustrations

Keep practicing

Advanced
Enterprise

Multi-Team Admin Platform

Design an organization administration system for teams, inherited permissions, shared billing, and auditable access changes.

Desktop web4 hours plus
Information ArchitectureDesign Systems
Advanced
Enterprise

Delegate a Sensitive Task to a Virtual Assistant

Design a remote-assistance workspace that defines scope, grants minimum access, and records completion without exposing an entire business account.

Desktop web4 hours plus
Trust and SafetyInformation Architecture
Advanced
Enterprise

Data Retention Policy Builder

Design a governance tool for defining how long each data class is kept, archived, reviewed, and deleted across regions.

Desktop web4 hours plus
Information ArchitectureTrust and Safety
Advanced
Enterprise

Enterprise Role Builder

Design an administrator workflow for composing a least-privilege role from permissions, conditions, and resource scope.

Desktop web4 hours plus
Information ArchitectureTrust and Safety
Advanced
Enterprise

Multi-Organization Workspace Switcher

Design a workspace switcher that makes organization, role, environment, and unsaved work clear before context changes.

Desktop web2 to 4 hours
NavigationInformation Architecture
Advanced
Enterprise

Auditable Admin Data Export

Design an administrator export flow that scopes sensitive records, estimates impact, and controls secure delivery.

Desktop web4 hours plus
FormsTrust and Safety