Design System

Wir haben das Multi-Tenant-Design-System gebaut, auf dem heute drei Energiemarken laufen.
Kunde
badenova AG & Co. KG (Energieversorger, Süddeutschland)
Branche
Energie & Versorgung
Zeitraum
Seit 2022 (laufend)
Status
Aktiv weiterentwickelt, an Storyblok und an der Component Library
Leistungen
  • Design System
  • Component Library
  • Frontend Architecture
  • Multi-Tenant / Multi-Brand
  • Headless CMS
Jahre laufende Partnerschaft
3+
Komponenten in der Library
124
Töchter & Marken im System
3+
Team
  • Christoph Saile
  • Benjamin Konopka
  • Jonathan Häberle
  • Michael Zoidl
124
Komponenten in der Library, kontinuierlich gepflegt und visuell getestet
3
Eigenständige Marken auf einer Plattform: sparstrom, badenIT und Stadtwerke Weil am Rhein
Seit 2022
Laufende Partnerschaft, eines der längsten alm-Engagements

Ausgangslage

Jeder Relaunch bei Null

Die Auftritte der Töchter und Marken waren historisch gewachsen, jeder Marken-Relaunch fing technisch fast von vorn an. Das skaliert weder in der Wartung noch in der Markenkonsistenz.

Ein System für alle Marken

Eine zentrale Component Library und ein Design System, auf dem der Konzern-Auftritt und jede Tochter-Marke laufen, mit eigenen Themes, Typografien und Markenidentitäten.

Eine Plattform, viele Marken

Component Library 124 Komponenten · zentrale Design-Tokens
  • sparstrom eigenes Theme
  • badenIT eigenes Theme
  • Stadtwerke Weil am Rhein eigenes Theme

Jede Marke wird über Design-Tokens eingefärbt, ohne Komponenten zu duplizieren. Inhalte pflegen die Marken-Teams selbst in Storyblok.

Lösung

Plattform

Themable Design System

Zentrale Design-Tokens, die pro Marke neu eingefärbt werden, ohne Komponenten zu duplizieren.

Component Library

React und Next.js, dokumentiert in Storybook, heute 124 Komponenten stark.

Multi-Tenant-Architektur

Ein Frontend, auf dem heute u.a. sparstrom, badenIT und die Stadtwerke Weil am Rhein laufen.

Inhalte und Qualität

Storyblok als Headless CMS

Die Marken-Teams pflegen Inhalte selbst, entkoppelt von der technischen Plattform.

Automatisierte Testpipelines

Playwright und Chromatic sichern Funktion und Visual Regression bei jeder Änderung ab.

Ergebnis

Drei Marken, eine Plattform.

sparstrom, badenIT und die Stadtwerke Weil am Rhein laufen auf einer gemeinsamen technischen Basis mit 124 Komponenten. sparstrom startete auf einer eigenen Plattform und wurde später vollständig ins badenova-System überführt, ohne dass es im Live-Betrieb bemerkbar war. Die Plattform wird weiterentwickelt, in Storyblok und in der Component Library.

„Offene Kommunikation und nachvollziehbarer Aufwand sind für mich die Basis einer vertrauensvollen Zusammenarbeit. Bei alm ist das der Fall. Unsere ersten Ideen wurden nicht nur validiert, sondern durch das technische Know-how und die Branchenkenntnis des Teams weiter optimiert.“

Christoph Hummel
Christoph Hummel
Frontend Consultant, badenova

Stack

  • React
  • Next.js
  • TypeScript
  • Storybook
  • Storyblok
  • Emotion
  • Design-Tokens
  • Webpack
  • GitHub Actions
  • Chromatic
  • Playwright
Haben Sie ein Projekt im Kopf?
Erzählen Sie uns, was Sie bauen. Wir melden uns innerhalb eines Werktags mit einer ehrlichen Einschätzung statt einem Pitch.
Gespräch anfragen