Elisa Design System Renewal

Renewal design system project at Elisa took place in 2020 and 2021. New design system is:

• Well-structured Figma document with defined designed tokens, all the patterns gathered, rethought, and re-designed;
• Library of React components to be used across dozens of Elisa products;
• Automatically extracted CSS-only library implementation;
• Seamless process of design and development.
• Documentation for all the aspects of the design system: design, tokens, development, using and contribution, accessibility, etc.

My role in the project is design system architect and engineering manager.

From the management perspective, I guided the process of design and development taking care of following the roadmap yearly, quarterly and monthly.

Speaking of the hands-on part, outlined the architecture of React library, tuned continuous integration and continuous delivery processes, set up a custom solution for automated visual-regression tests, and wrote documentation for all the components.

As a design system steward, I supported the teams using the component library, provided them with instructions for customizing the library set up, and assisted when and if they had difficulties in adopting the components.

Measuring the level of design system usage and its success

To answer the question “who is using the design system?” (and in more detail, “what part of the design system they are using?”), I developed the methodology of tracking the usage of components in both development and production phases for most of the company products. Following this methodology, I implemented a solution for regularly gathering the needed data as well as its visual representation for future analysis.

For a large organization where the design system is used as a helping tool and all the specialists decide themselves if to use it or not, such measuring very much helps to understand if the design system is responding to the needs and what to improve in the next step.

Visual regression tests for Elisa design system

Renewing the design system at Elisa in 2020 included creating a custom solution for automated visual regression tests. The solution was built on internal company tools and integrated with the existing continuous development processes.

Automated visual regression tests ensure the bullet-proof quality of the components on every single change. Operating with dozens of components and hundreds of modifications for them, visual regression test system is the must for providing the library users with solid solution in every single release.