How to optimize components based on user needs?

When I arrived at Deezer, the designers were encountering numerous performance problems with the files, as well as problems using the components. What's more, the developers were making the missing component specifications themselves. Here's what I did to remedy the situation. Let's take the example of a button.

Timeline

8 months

My roles

Design system manager

Goals

Optimize and complete every single components

Constraints

Change the structure of components in more than 700 files

Button use audit in march 2023

Here we can see the number of button variants used in the product and their usage in % in all Figma files.

Studying this, I quickly realized that some button variants were used very little, if at all.

I therefore carried out user tests directly with the designers to see how they perceived these different buttons and if they could tell me what they were used for.

Main issues with old button

- Too many different variants with no predefined use.
- Problem of hierarchy between different button types.
- 3 button sizes but only 2 used.
- No pressed, focused, selected or loading status.
- Over 100 button variants in the file, with 89,000 instances added to all design files, creating real performance problems.

New optimization of the button

We decided to implement child elements with the button refactoring.

This enabled us to reduce the size of the component by a factor of 4, which was extremely significant given its use, and also reduced the number of layers used in the button component by a factor of 2.

Following the success of this implementation, we decided to implement child elements and switch instances for modal components and overlays.