Handout der Case Study
Entwicklung eines Designsystems für den Kanton Bern
Der Kanton Bern unterhält mehr als 50 Websites, die aus über 80’000 Einzelseiten bestehen und jährlich mehr als 40 Millionen Mal besucht werden.
2019 beauftragte mich der Kanton Bern mit der Entwicklung eines «Basislayouts inkl. Key-Templates» für den kompletten Relaunch dieser 50 Websites.
Die Herausforderung bestand im Wesentlichen darin, für die einzelnen Websites ein Design zu entwickeln, das jeder Seite individuellen Spielraum lässt und gleichzeitig sicherstellt, dass die Websites des Kantons als Einheit wahrgenommen werden. Dabei mussten alle Elemente den Standards der Zugänglichkeitsstufe AA entsprechen.
Anstatt eine Reihe von Templates zu entwickeln, wie es der Kunde ursprünglich wollte, konnte ich den Kanton Bern davon überzeugen, einen modularen Ansatz zu wählen, der ihm mehrere Vorteile bieten würde.
So entschieden wir uns, ein modulares, skalierbares Designsystem zu entwickeln, das auf den Prinzipien des Atomic Design basiert. Um dieses Designsystem zu erstellen, verwendeten wir ein Tool namens «AtomicKitchen», das ich in den letzten sechs Jahren entwickelt habe.
Mit diesem Tool kann ein Atomic Design System iterativ erstellt und online veröffentlicht werden.
Daraus lassen sich «Code Patterns» für die technische Umsetzung ableiten und zu Websites zusammensetzen. Dies reduziert den Kommunikationsaufwand zwischen Design und Produktion und vermeidet Missverständnisse, da das Design nicht in Code «übersetzt» werden muss. Auf diese Weise liegt das Design nativ als HTML/CSS-Code vor und verhält sich 100% pixelgenau und responsiv.
Aus Kosten- und Komplexitätsgründen haben wir uns für einen leichtgewichtigen Ansatz entschieden, d.h. nach der Entwicklung einer Reihe von Basiskomponenten wie Buttons, typografischen Grundelementen und einigen Teaser- und Bühnenelementen haben wir nur die Elemente entwickelt, die tatsächlich in einer der Anwendungen verwendet werden. Dieser iterative Ansatz erhöhte die Benutzerfreundlichkeit des Designsystems und reduzierte den Aufwand auf beiden Seiten, Design und Implementierung.
Bereits umgesetzte 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
Warum AtomicKitchen und nicht zum Beispiel Storybook?
AtomicKitchen verfolgt einen anderen Ansatz als Storybook. Storybook und andere Tools sind viel mehr auf Entwickler ausgerichtet. Die Bedienung von AtomicKitchen erfordert dagegen deutlich weniger Programmierkenntnisse als Storybook. Vieles wird per Drag & Drop erledigt, als Benutzer braucht man nur solide HTML- und CSS-Kenntnisse, muss aber nicht viel Code selbst schreiben.
AtomicKitchen zielt darauf ab, die komplexe Problematik der Responsivität und anderer UX-relevanter Zustände bereits in der Konzeptions- und Designphase zu bewerten und nicht erst bei der technischen Umsetzung.
Eine codebasierte Pattern-Bibliothek schliesst die Lücke zwischen Design und Code.
Die Agentur, in der ich arbeite, nutzt AtomicKitchen seitdem als iteratives Designbewertungswerkzeug, das schnell und einfach verlässliche Bewertungskriterien liefert (z.B. Auswahl der geeigneten Schriftart, Proportionen von Elementen in Organismen usw.).
Früher haben wir im UX Team diese UX-Entscheidungen auf Basis von Adobe XD getroffen, und wenn die Entwicklung dann anfing, unsere Entwürfe umzusetzen, haben wir oft die Hände über dem Kopf zusammengeschlagen, weil z.B. die Schriften im Browser ganz anders aussahen als in XD entworfen. Auch konnten wir nie verlässlich sagen, wie sich Designelemente responsiv verhalten, wo und wie viele Breakpoints notwendig sind und welche Auswirkungen das auf die User Experience hat. Seitdem wir AtomicKtichen einsetzen, gehören diese Dinge der Vergangheit an.
Hier ein Link zum Web-Styleguide des Kantons Bern: https://kantonbern.snowflake.ch/styleguides/1/Kanton-Bern/index.php?u=guest&p=kantonbern
Weitere Infos zu AtomicKitchen: https://atomic-kitchen.com