Redesigning components for an existing design system

What to do when a component is no longer aligned and causes downstream usability issues

Illustration by Manuel Rovira

As a designer, have you ever come across an outdated component in your design system that was no longer serving the needs of your team? Dusty from the years since its conception, it fails to provide its original value as it has accumulated its fair share of pain points and usability issues?

If this sounds familiar, redesigning the component may be the best thing you can do for yourself and for your design team moving forward. This is a step-by-step guide on how to do just that based on a recent side project I worked on at MongoDB.

Step #1: Audit the component’s current usage across your product’s platform.

In order to best understand the potential value a newly designed component can provide for future projects, identify where it has been in former projects. Explore your current application or platform to best understand what specific contexts it lives in.

Internal audit board I created to map out documented usage for my team’s stepper component

Step #2: Identify pain points and poor usability attributes.

Write down all of the different pain points you’ve experienced using this component and all of its areas of improvements. Then, transition into internal interviews with members on your design team who have used this component in their former projects. From this internal research, you’ll be able to learn more about the reasoning behind its usage and confirm existing or discover new pain points across a multitude of different teams within your organization.

For my specific stepper component, below are examples of pain points I collected from speaking with my team.

1. Limited Step Count
   The component’s width size doesn’t allow for a high number of steps due to its limited parent container size.
2. Inconsistent Sizing
   Currently, the step indicator component faces challenges that come with its usage, specifically with sizing. As…