Design System Optimization Project

When I joined the team, the foundations of the design system were already in place, and I was contributing sparingly to it and using it for my day to day work. After some time, using it felt like navigating a labyrinth. Contributions were not structured, there was no clear strategy and no agreement on how to build components. Even experienced team members struggled to locate and trust components.

This was affecting productivity and quality across the board, for both designers and developers. So, I set out to rebuild.

After the rework, I managed to raise the NPS score across developers & designers by +81 points and improve the guardrail metrics by +24%.

After years of unstructured contributions and unclear work flows, we found ourselves in a bit of a situation that was affecting speed, morale, ways of working, and ultimately quality.

I decided to interviewed 6 designers and 5 front-end developers across teams, to understand their perceptions and pain points. I chose the Net Promoter Score as the North Star metric, and added three guardrail metrics.

3.5/5

2.9/5

3.1/5

-45/100

Hard-to-navigate file structure

Bloated number of variants and components

Minimal documentation (if any)

Clunky, unintuitive workflows

The results were quite clear: a change was needed.

Based on the results, I decided to focus on 3 objectives

increase flexibility and ease of use

improve designers’ workflows

improve satisfaction for designers and developers

To achieve this, I planned to focus on 5 main activities

make components more flexible

reduce number of components & variants

improve navigation and structure

improve clarity

improve documentation

Before the rework, a new component was created for each different case. To improve this, I introduced slot components in the composite components, to act as placeholders that could be swapped to match the designer's needs.

In the previous version, a new variant was created for each new case that was needed. To improve this, besides the slots components, I added boolean, text, instance swap and nested properties, to enable the creation of less variants.

The old version had macro sections, which contained many artboards with different components. This made it very difficult to find what you were looking for. For this reason, I reorganised the sections to host a component (or a set of components) each, to make it easier to locate specific elements.

Before the rework, very different components like selectors, dropdowns and text fields were all in the same page, and items constituting components were scattered around the artboards. I reorganised the structure in a way that clearly divided items (which are not supposed to be used on their own) from components. This helps having a clear understanding of what to use when designing, while keeping flexibility.

In the previous version, the documentation was scattered around the artboards (if it was even there to begin with). I allocated a specific section for documentation in each of the sections, to define guidelines.

After the rework, I ran again the same test that I had previously done to measure the impact of the work done. The results were very encouraging.

3.5/5

4.5/5 +24%

2.9/5

4.2/5 +26%

3.1/5

4.2/5 +22%

-45/100

+36/100 +81 points

Guardrail metrics +24% overall +19% for developers (+12% | +28% | +16%) +28% for designers (+32% | +26% | +22%)

NPS ⭐️ +55 for developers (from -80 to -25) +54 for designers (from -17 to +71)

The rework drastically improved system usability and trust. Designers felt empowered to build faster, and developers had a clearer foundation to work from. But more than anything, we re-established the design system as a trusted tool, not a source of frustration. This was a foundational project, and the beginning of building something scalable and delightful for the whole team. Other teams adopted the same approach and best practices.