Atomares Designsystem für den Kanton Bern

Dank eines modularen Designsystems ist das digitale Ökosystem des Kantons konsistent und nachhaltig.

Auf einen Blick

Unser Auftraggeber: der Kanton Bern

Die kantonale Verwaltung des Kantons Bern informiert über das staatliche Handeln der sieben Direktionen und der Staatskanzlei. Das Angebot beinhaltet dabei neben Informationen rund um das Geschehen im Kanton auch ausgewählte Onlinedienste, wie das Bestellwesen neuer Pass- und Identitätskarten oder die Terminvergabe zur Fahrzeugprüfung.

Das Projekt und seine Ziele

Wie eine Erhebung des Kantonalen Amts für Informatik und Information ergeben hat, waren die Informationen des Kantons Bern vor Projektbeginn auf 50 verschiedenen Websites mit insgesamt 85‘000 Einzelseiten zu finden. Umfangreiche Inhalte, die jährlich von 40 Mio. Besucher:innen und überwiegend von mobilen Endgeräten abgerufen wurden. Im Rahmen des Projekts «Web-Relaunch» sollten die Informationen auf den neuesten Stand gebracht und die verschiedenen Websites den Nutzer:innenbedürfnissen entsprechend umgestaltet werden.



Die Herausforderung

  • Heterogene Zielgruppe
  • Design-Standards zu entwickeln, welche eine grösstmögliche Einheit sicherstellen, gleichzeitig aber eine angemessene Vielfalt zulassen.
  • Einhaltung der Konformitätsstufe AA für Barrierefreiheit
  • eine skalierbare Navigation zu konzipieren, die gleichermassen für kleine als auch für sehr umfangreiche Websites funktioniert

 

Wenn ein Kunde mit Innovationsbereitschaft und ein Team mit ebenso kreativen wie smarten Lösungsansätzen aufeinandertreffen, entsteht eine einzigartige Lösung. In einer Reihe von Workshops und in enger Zusammenarbeit wurde ein Designsystem mit hoher Flexibilität erarbeitet, welches dem Kanton und seinen zuliefernden Partner als «Single-Source-of-Truth» dient.

Vielseitig, individuell und dennoch intuitiv

Für den Kanton Bern wurde ein «code-basiertes Designsystem» entwickelt, in dem die Key-Templates, eine skalierbare Benutzernavigation sowie alle Content-Elemente zu finden sind, welche die Grundlage der rund 50 verschiedenen Websites des Kantons bilden.

All diese Elemente werden in einem passwortgeschützten Styleguide nicht nur pixelgenau und responsive dargestellt, sondern ihr zugrundeliegende HTML-, CSS- und JS-Code kann von dort aus per Copy & Paste entnommen werden. Auf diese Weise ist es den vielen Stakeholdern des Kantons, aber auch zuliefernden Partner-Agenturen möglich, fehlerfreie und einheitliche Anwendungen zu erstellen.

Mithilfe konsistenter Designvorlagen, der intuitiven und skalierbaren Benutzernavigation und einer hohen Barrierefreiheit (Konformitätsstufe AA) stehen dem Kanton Bern nun alle Assets bereit, um die web-basierten Touchpoints zukunftsfähig umzugestalten. Ein Grossteil der Website wurde mittlerweile mithilfe des Designsystems umgesetzt, hier eine Reihe von Referenzen: