The failing Design System
Overview
What to do when the design system is poorly built, contains significant technical errors, lacks tokens, and is not up-to-date with the storybook, resulting in discrepancies with production.
Another issue is the underdeveloped components and their states. A major problem was also the lack of proper components, which limits the user experience.
In addition to the significant technical debt created by using such a system, and the lack of consistency, we also face a serious problem with aligning the work of designers.
This particularly affects the onboarding and work of new designers joining the project— they have no idea how and which components to use, and must constantly check their current UI against production.
Solution
The solution turned out to be building a new design system - 2.0.
In the case of such erosion in the design system, it turns out that rebuilding it from scratch is a more cost-effective solution than attempting to fix it.
This allows for more efficient and consistent naming, creating variants, and most importantly, creating tokens.
Scope of Work
To create such a design system, many tasks need to be completed.
First of all, an audit of what has been done in Figma and how it reflects in production is needed.
It is also essential to check the storybook and verify what can be used, and what needs to be recoded from scratch.
It is necessary to estimate the cost not only of rewriting the existing components but also of renaming them to maintain consistency.
Once everything is verified, we can start re-writing what we have in Figma. After creating the appropriate library and its structure, we can begin the first steps in updating the storybook, followed by the gradual process of replacing old components with new ones in the environment.
Next Step
Here, we start working on the components that are currently missing in both the design system and production. We begin creating new components and developing existing ones with missing states and variants. Then, we implement them into the storybook, and during subsequent design work, we recommend using the new components when the appropriate user experience is required.
Result
A fully functional design system in Figma that clearly defines which components should be used at the required moments.
A consistent library and naming convention, with no discrepancies between what we design and what the user sees.
Quick and easy updating of not only the library in Figma but also the production environment.
Faster work and lower costs for designers and developers.
