Handout of the Case Study
Development of a design system for the Canton of Bern
The Canton of Bern maintains more than 50 websites, which consist of more than 80,000 individual pages and are visited more than 40 million times a year.
2019, the Canton of Bern commissioned us to develop a «basic layout including key templates» for the complete relaunch of these 50 websites.
The challenge was essentially to develop a design for the different websites that gave each individual site individual scope, but at the same time ensured that the canton’s websites were perceived as a unit. In doing so, all elements had to meet the AA conformance level standards for accessibility.
Instead of developing a series of templates as initially requested by the client, we were able to convince our client to take a modular approach that would provide them with several benefits.
We decided to develop a modular, scalable design system based on Atomic Design principles. To create this design system we used a tool called «AtomicKitchen», which I have developed myself over the last 7 years.
With this tool, one can iteratively create an Atomic Design system and publish it online.
«Code patterns» for technical implementation can be pulled from this and assembled into websites. This reduces the communication effort between design and production and prevents misunderstandings, since the design does not have to be “translated into code”. In this way, the design is native as HTML/CSS code and behaves 100% pixel-precise and responsive.
For reasons of cost and complexity, we decided to take a lightweight approach, i.e. after developing a number of basic components, such as buttons, basic typographic elements and a few teaser and stage elements, we only developed elements that would actually be used on one of the applications. This iterative approach increased the usability of the design system and reduced the effort on both sides, design and implementation.
Already implemented designs:
- https://www.bsm.sid.be.ch
- https://www.police.be.ch
- https://www.pass-id.sid.be.ch
- https://www.shsm.bkd.be.ch
- https://www.be.ch
Why AtomicKitchen and not Storybook, for example?
AtomicKitchen takes a different approach than Storybook. Storybook and other tools are geared much more towards developers. In contrast, using AtomicKitchen requires significantly fewer coding skills than Storybook. Much is done via drag & drop, as a user you only need a solid knowledge of HTML and CSS, but you don’t have to write much code yourself.
AtomicKitchen is rather meant to evaluate the complex problems of responsivity and other UX relevant states quite early in the conception side and design side and not only on the technical implementation side.
We therefore use AtomicKitchen as an iterative design evaluation tool that quickly and easily provides reliable evaluation criteria (e.g. selecting the appropriate font, proportions of elements in organisms, etc.).
Before we used to make these UX decisions in the team based on Adobe XD, and when development started to implement our designs, we often threw up our hands because, for example, the fonts in the browser looked completely different from what we had designed in XD. Also, we could never reliably say how design elements behave responsive, where and how many breakpoints are necessary and what effects this has on the user experience.
Downloadable Handouts (PDF):
Web-Styleguide made with AtomiKtichen: https://kantonbern.snowflake.ch/styleguides/1/Kanton-Bern/index.php?u=guest&p=kantonbern
More information about AtomicKitchen: https://atomic-kitchen.com