Project description

As it was decided to no longer maintain the design system managed by Visma we decided to build our own version of it ourselves. Our goal was to keep it as simple as possible, meaning keeping the styling and look and feel of our components but remove variants that we didn’t need and add things that we were currently missing.

Role and responsibilities

My role as designer was to collaborate with two more designers and four developers. We all contributed to providing examples of our existing components and discussing future needs in the new design system.

Work process

Weekly meetings with the team. We started by making a list of our components and arranging them by priority. We then started adding examples of these components in Figma to see what our needs for it were. Which variants do we need, does any variant need to change its styling and do we need any additional variant? The discussions also included some technical discussions with the developers to undertand how to categorize components.

Once components were designed in Figma, with all its variants, documentation and properties, it was developed and tested by both developers and designers in Storybook. After getting approved it was then released. All documenation, including visual examples, were available in GitHub.

Tools used

Figma for designing the components and extracting the properties of it to code
Storybook for testing the developed component
GitHub for documenation

Challenges

Due to organisational changes we had to adjust our work and align with another design system. This meant following another token setup than what we already had as well as a mapping our components to a new color palette and typography styles.

The amount of components also made the whole process slow as all of us working in this team had other projects with higher priority.