Storyblok-Relaunch mit Automatisierung im Energievertrieb.

Die Kund:innen von MyElectric sind technikaffin und erledigen ihre Energieangelegenheiten selbst, und der Anspruch der Marke war entsprechend digital-first – möglichst ohne analoge Zwischenschritte. Hinter dem Formular sah es anders aus: Nach jedem Abschluss exportierte ein Team bei der Salzburg AG die Daten aus der Website, übertrug sie nach SAP, prüfte und gab frei – und das mit entsprechendem personellen und zeitlichen Aufwand. Bei über 20.000 Kund:innen lief dieser Aufwand dauerhaft mit, und zwar genau an der Stelle, an der die Marke digital sein wollte.

Dazu kam ein zweiter Anlass: MyElectric hatte ein neues Corporate Design erhalten, das ins Web übertragen werden sollte. Ein Redesign allein hätte die bestehende Plattform auf WordPress noch getragen – die direkte Anbindung der Konzernsysteme und die Automatisierung der Abschlüsse allerdings nicht mehr. Dafür brauchte es eine Headless-Architektur, die Inhalte, Logik und Systeme trennt, statt sie in einem monolithischen CMS zu verschränken.

In Österreich zahlt niemand denselben Strompreis. Netzkosten und Abgaben unterscheiden sich regional, und die Berechnung folgt Regeln, die außerhalb der Energiebranche kaum jemand kennt. Zu Projektbeginn haben wir dieses Wissen im engen Austausch mit den Produktmanagern der Salzburg AG in unserem Team aufgebaut – die Grundlage für alles, was danach kam.

Statt alles gleichzeitig anzupacken, haben wir mit MyElectric identifiziert, was den Vertrieb unmittelbar voranbringt, und drei Schwerpunkte gesetzt: den Bestellprozess für neue und bestehende Kund:innen, eine Preisdarstellung, die jeder versteht, und zwei Tarifsegmente für Privat- und Geschäftskund:innen.

Alles Weitere ist ins Produkt-Backlog gewandert und wird schrittweise umgesetzt – die Verwaltung mehrerer Verträge etwa, die Vermieter mit vielen Wohneinheiten brauchen. Das gilt auch für die Bausteine, aus denen die Seiten entstehen: Statt jede denkbare Variante zu gestalten und zu bauen, haben wir das Komponentenset auf die Seiten zugeschnitten, die zur Kaufentscheidung führen – Startseite, Tarifrechner, Bestellprozess. Nach vier Monaten Umsetzung ging die Plattform live.

Der Preis im Tarifrechner entsteht aus mehreren Quellen: Inhalte aus dem Headless-CMS Storyblok, Netzbetreiberdaten und Berechnungsgrundlagen von E-Control, Kundendaten aus SAP. Um diese Daten zusammenzuführen, haben wir den 21TORR-Orchestration Layer auf Basis von Symfony eingezogen, der zwischen den angeschlossenen Systemen und dem Frontend arbeitet. Dort laufen die Datenquellen zusammen, dort greift die Berechnungslogik, und von dort wird das fertige Ergebnis ausgeliefert.

Das bringt MyElectric zwei Vorteile im Betrieb. Erstens liegt die Fachlogik gebündelt statt über Frontend und Redaktionsfelder verteilt – ändert sich eine Regel, wird sie einmal an dieser Stelle angepasst. Und zweitens: Wird eines der angeschlossenen Systeme künftig ersetzt, passen wir die Anbindung lediglich im Orchestration Layer an, die Website bleibt unberührt.

Kund:innen bekommen hiervon nichts mit. Sie geben ein, was der Tarifrechner braucht – Postleitzahl und Jahresverbrauch – und sehen nur die für sie relevanten Ergebnisse: Arbeitspreis, Grundpreis und Rabatt, auf Wunsch auch den berechneten Gesamtpreis inklusive Netzkosten und Steuern.

Auf dieser Basis laufen zwei Bestellstrecken, die den Kund:innen unterschiedlich viele Angaben abverlangen: eine vollständige für Neuabschlüsse und eine deutlich kürzere für Vertragsverlängerungen. Beide prüfen jede Eingabe gegen fachliche Regeln, die wir mit dem Produktmanagement definiert haben, führen bei Fehlern gezielt zurück und sichern gegen unbeabsichtigten Abbruch. Den größten Unterschied macht der Schritt nach dem Absenden: Der Abschluss löst die internen Prüfungen bei der Salzburg AG selbst aus – Bonität, Lieferbarkeit, Vertragsbestätigung. Die manuelle Nachbearbeitung entfällt.

Das Rebranding lieferte eine definierte Farbpalette mit mehreren Primärfarben, zwei Schriften und ein illustratives Maskottchen. Was fehlte, waren die Regeln für ihren Einsatz: Welche Farbe kennzeichnet interaktive Elemente, welche Hinweise, welche Flächen. Und die Frage, wie Hierarchien, Zustände und Flächen im Interface voneinander getrennt werden können, blieb gänzlich unbeantwortet.

Den Markenfarben haben wir daher konkrete Rollen im Interface zugewiesen, zusätzliche Graustufen entwickelt und aus den zwei Schriften ein typografisches System aufgebaut. Den Schwerpunkt im Design legten wir auf die Formularelemente – über die der Vertragsabschluss vollständig läuft. Ihre Qualität entscheidet maßgeblich über den Abschluss und damit den Umsatz. Das Marken-Maskottchen haben wir mittels Microanimations an ausgewählten Stellen eingebunden, unter anderem am Tarifrechner.

Das Designsystem folgt der Logik des eingesetzten CMS Storyblok und trägt dieselben Modul-Bezeichnungen. Wer im CMS ein Modul auswählt, findet es im Design-System unter demselben Namen. Eine Übersetzungsebene weniger zwischen Design, Entwicklung und Redaktion. Auch die Bestätigungsmails pflegt MyElectric selbst: Die Vorlagen gestaltet das Marketing-Team in SendGrid, die Inhalte liefert der Orchestration Layer.

Barrierefreiheit haben wir zum Projektstart auditiert und die Schwachstellen des bestehenden Auftritts dokumentiert. Die Ergebnisse sind direkt in die Umsetzung eingeflossen – von Kontrastwerten über die Gestaltung von Hinweisen bis zur Darstellung komplexer Tarifübersichten auf kleinen Bildschirmen. Umgesetzt ist die Plattform nach WCAG 2.2 AA. Das Designsystem haben wir dafür als Design as Code in Storybook aufgebaut: Jede Komponente liegt dort zentral vor und wird automatisiert auf Barrierefreiheit geprüft – nicht die einzelne Seite, sondern jeder Baustein, aus dem sie entsteht.

Seit Juni 2026 ist die Plattform live. Vertragsabschluss und Verlängerung laufen ohne manuelle Zwischenschritte, die Bearbeitungszeit im Backoffice der Salzburg AG steht für andere Aufgaben zur Verfügung.

Kurz nach dem Start hat MyElectric Zonentarife eingeführt – ein Tarifmodell, das anders funktioniert als die klassischen Strom- und Gastarife und auf der alten Plattform nicht abbildbar gewesen wäre. Der Relaunch hat dieses neue Vertriebsprodukt ermöglicht.

Gemeinsam mit MyElectric arbeiten wir seither an weiteren Funktionen und am Ausbau der Plattform.