Stadtwerke Bamberg

Design System für die Stadtwerke Bamberg

Entwicklung eines komponentenbasierten Design Systems für den einheitlichen Digital-Auftritt der Stadtwerke Bamberg.

Herausforderung

Ein effizientes System entwickeln, um die digitalen Plattformen der Stadtwerke Bamberg zentral mit Designkomponenten zu bedienen – für eine einheitliche Darstellung in allen Online-Kanälen.

Card Sorting Workshop

Als Grundlage für das Design System werden die bestehenden Online-Medien gesichtet und wortwörtlich „auseinandergenommen“, um zu sehen, wo es Überschneidungen gibt und wie bestehende Komponenten und Designs konsolidiert werden können.

Komponenten-Inventar

Die Ergebnisse des Card Sorting Workshops werden in einem Komponenten-Inventar festgehalten und ein hierarchischer Komponentenaufbau nach dem Atomic Design-Prinzip entwickelt. 

Eine weiterentwickelte Designsprache kann nun in einer agilen Arbeitsweise, Schritt für Schritt und Komponente für Komponente, konzipiert, gestaltet und technisch umgesetzt werden.

Komponentenbibliothek

Zur zentralen Veröffentlichung von Design-Änderungen in allen Plattformen dient eine Online-Komponentenbibliothek – die gleichermaßen als Dokumentation für Entwickler und Designer geschaffen ist. 

Neben der Übersicht über alle Komponenten liefert das Design System auch das passende Styling und das HTML-Markup. So können auch Anbieter von Drittsystemen einfach die Designelemente der Stadtwerke Bamberg nutzen. 

Nach der jahrelangen erfolgreichen Zusammenarbeit mit medienreaktor wussten wir ganz genau, dass da am Ende was Sensationelles rauskommt. Man kennt sich, man schätzt sich, man vertraut sich. Darauf kommt es an.

Markus Reinfels, Stadtwerke Bamberg

Ergebnis

Änderungen am Design System können an einer zentralen Stelle durchgeführt werden. Da das Design System permanent weiterentwickelt wird und mit den Anforderungen neuer Plattformen wächst, ist die Entwicklungsgeschwindigkeit sehr hoch und der Anpassungsaufwand minimal.

Ein agiler Prozess mit Versionierung für das Design System erleichtert zukünftige Projekte.

Damit kann die Marke „Stadtwerke Bamberg“ ihr Design systematisieren und langfristig Kosten und Aufwand für einen konsistenten Auftritt in der Umsetzung aller Medien gering halten.

Leistungen

  • Card Sorting Workshop
  • Konzeption des Design Systems
  • UI- und UX-Design
  • Komponentenbibliothek
  • Weiterentwicklung und Support