Statistisk sentralbyrå (SSB) is the national statistical agency of Norway. It is an independent body responsible for collecting, analyzing, and disseminating official statistics about various aspects of Norwegian society. SSB plays a crucial role in providing accurate and reliable data for decision-making processes in both the public & private sectors. It’s also responsible for over 90% of the official statistics published in Norway.
In connection with a new visual identity and transition to a new Content Management System (CMS), SSB wished to create a design system consisting of visually updated components that are ready coded and can be used for building the content in the new CMS system. Additionally, all the components should be compiled into an interactive web solution in the form of a internal design system page, creating a shared and comprehensive platform that can be utilized for building future digital products at SSB.
SSB wanted to design the new design system from scratch and structured it using the Atomic Design methodology, which basically means breaking down page elements into their smallest components at the atomic level (e.g., an input field, a button) and by combining the smaller atomic components creating more complex components at the molecular level (e.g., a search field) which in turn, combine to create more complex organisms like a navigation menu or a footer. Templates provide a framework for arranging the different components on a page, and pages are the final instances of the design system, representing complete web or app screens.
Starting with the smallest of components aka. the atoms. The first step was to mapping out what exists today at SSB. Gathering all variants of the same components in one place meant that we could see what we could build upon and what would be discarded. We then went over each of the components layer for layer to cover each variation and state of the component. Going from Atom to organisms. This was a continuous design process where we would release a component and test it with the developers.
During the project I worked mainly in Sketch with the Zeplin plugin for developers and during the project I also created animations and prototypes using Principle.
I was also responsible for holding demo’s every other week in front of all the teams and stakeholders at SSB, to showcase the progression of the design system, what has been done the past two weeks. This also helped us to create both awareness within SSB and the internal teams, as it was important for us to brining them onboard of the new system.
It was very important for us when updating and redesigning the components to make sure that we met the highest accessibility criteria (WCAG). As SSB is an state owned company publicizing statistics that impacts many peoples lives. We always made sure that we checked not only contrast, alt text and sizing. We also made sure with the developers that the implemented components integrated correct tags, description and necessary information to uphold good accessibility across devices and usage.
This was the first time I had the chance to build a new design system from scratch. At the start it was a challenge to grasp everything that had to be considered when building a design system. But thinking back now, I learned sometimes its better to just start with 1 piece of the puzzle first. For me, this was starting with what needs do we have today? By utilizing atomic design, we could focus on the smallest building blocks first in order to scale up and move on the bigger and more complex components.
Personally, it was a really rewarding journey going from a complete design system beginner, to be able to actually build a functioning system used by many teams and people today.
