TUI
Optimising a clunky design system to achieve +81 points on the NPS of devs and designers
2025
Design systems, UI
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%.
Problem
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.
Navigation
3.5/5
Clarity
2.9/5
Documentation quality
3.1/5
NPS ⭐️
-45/100
Pain points
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.
Goals
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
Jump to the results
Activities
Make components more flexible
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.
Reduce number of components & variants
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.
Improve navigation and structure
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.
Improve clarity
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.
Improve documentation
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.
Results
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.
Before
After
Navigation
3.5/5
4.5/5
+24%
Clarity
2.9/5
4.2/5
+26%
Documentation quality
3.1/5
4.2/5
+22%
NPS ⭐️
-45/100
+36/100
+81 points
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.
