Moderne TYPO3-Website für Stadtwerke durch kontinuierliche Weiterentwicklung

Die Stadtwerke Bamberg vereinen viele verschiedene Arbeitsbereiche unter einem Dach. Diese Bereiche werden auf jeweils eigenen Seiten dargestellt und sind ebenfalls Teil des Relaunchs. Als einer von vielen Bereichen stehen die Energie- und Internetversorgung als Steckenpferde der Stadtwerke im Fokus. Sie stehen sinnbildlich dafür, wie wichtig eine gute User Experience auf der Website sind. Außerdem sprechen die Stadtwerke mit ihren Angeboten ein breites Spektrum an Nutzer:innen an. Durch variables und responsives Design soll für diese Gruppen jeweils die richtige Emotionalität geschaffen werden, die sich vor allem durch starke Bildsprache auszeichnen soll. Um die Dauer des Relaunchs möglichst kurz zu halten, ist ein moderner Arbeitsansatz nötig.

Die Stadtwerke Bamberg hatten bereits eine funktionierende Website, die allerdings um ein Intranet und ein Designsystem erweitert werden sollten. Im Zuge dieser Neuerungen bietet sich der Relaunch mit TYPO3 als Content Management System (CMS) an.

In Workshops wurden die Anforderungen erarbeitet und anschließend eine agile Zusammenarbeit beschlossen. Im Mittelpunkt standen dabei das zuvor entwickelte Designsystem und die Anforderung an die Nutzerführung auf der Website.

Für die Stadtwerke Bamberg stehen potenzielle und bestehende Kunden im Fokus. Daher ist es besonders wichtig, dass die User Experience auf der Website perfekt auf deren Bedürfnisse abgestimmt ist. Das Aussehen der Website wurde aus einem Moodboard und dem Farbleitsystem der Stadtwerke abgeleitet.

Durch das klare Design finden sich Nutzer:innen schnell auf der Seite zurecht. Zwar gibt es verschiedene Navigationspfade, der Nutzer wird auf der Seite aber schnell in die richtigen Bereiche gelotst und bekommt die wichtigen Informationen, ohne zum Seitenende scrollen zu müssen. Die Stadtwerke Bamberg schaffen es so, Kunden schneller zu informieren und konkreter zu leiten, sodass auch Vertragsabschlüsse früher zustande kommen. Insgesamt hat sich die User Experience deutlich verbessert.

Die Stadtwerke Bamberg sind ein zuverlässlicher Versorger für Strom, Gas, Wärme und Internet in der Domstadt. Und genau in diesen Bereichen wollen die Stadtwerke auch Neukunden informieren und den Vertragsabschluss erleichtern.

Besonders wichtig ist deshalb der Einstieg in den Bestellprozess und eine nutzerfreundliche Gestaltung, die Abbruchraten bei der Bestellung minimiert. Die Nutzerfreundlichkeit muss daher vor allem bei den Konfiguratoren gegeben sein. Hier können Kunden ihre Daten eingeben, um passende Angebote zu erhalten. Im Falle eines Internetanschlusses geht es so beispielsweise um die Ermittlung der Verfügbarkeit eines Glasfaseranschlusses. Um das zu vereinfachen, verfügt der Konfigurator über eine Autovervollständigung der Nutzeradresse. Außerdem helfen interaktive Karten auf der Website, die Verfügbarkeit bildlich darzustellen. Bei Strom- und Gastarifen helfen wiederum Schieberegler, den eigenen Verbrauch einzutragen.

Im Anschluss an das Ausfüllen der jeweiligen Daten wird dem potenziellen Kunden auf Basis der Eingabe durch einen Tarifrechner der spätere Preis angezeigt. Außerdem kann er auf einen Blick die Tarifdaten einsehen.

Was sowohl den Energie- als auch den Internetbereich vereint sind die anschließenden Formulare, die über Schnittstellen von Drittanbietern angezeigt werden. Wichtig war, dass sich das Stadtwerke Bamberg-Design auch hier widerspiegelt. So wurden die Formulare in den Stadtwerke Bamberg-Farben gestaltet und der Bezug weiterhin verdeutlicht. Insgesamt entstand ein Bestellstrecke mit Vorbildcharakter.

Rund um das Anbieten der Energie- und Internetangebote gilt es, gesetzliche Rahmenbedingungen zu beachten. Die Bündelung verschiedener Leistungen darf nur unter bestimmten Regelungen erfolgen. Daher galt es, die Angebote der Stadtwerke Bamberg zwar für den Kunden sinnvoll darzustellen, dabei aber kein Paket anzubieten, das laut Gesetz untersagt ist.

Um diese Aspekte auf der Website der Stadtwerke zu beachten, wurden eigene Themen-Hubs entwickelt. So bündeln sich auf den jeweiligen Seiten der verschiedenen Sparten alle wichtigen Informationen, die der Kunde sucht.

Zeitgleich sollte auch die User Experience der Bestandskunden aufgewertet werden. Sowohl für Energie- als auch „baMbit“-Internetkunden entstand deshalb ein modernes Kundencenter. Dort können Nutzer:innen ihre Verträge einsehen. Ein wichtiger Schritt im Rahmen der Digitalisierung war außerdem die Möglichkeit, Zählerstände online melden zu können. So errechnet sich für Verbraucher:innen unter anderem ein neuer monatlicher Abschlag, der sich allerdings auch manuell ändern lässt. Generell ist es möglich, diverse Systeme für Kundenportale (z.B. GIPS) einzubinden. Außerdem lassen sich verschiedene Abrechnungslösungen wie ITC, Schleupen oder ticos integrieren.

Abseits des Serviceportals ist es zudem möglich, Störungen online zu melden. Das funktioniert beispielsweise im Falle eines Stromausfalls oder in den Bamberger Straßen, falls eine Straßenlampe defekt sein sollte. In diesem Fall, kann man einen QR-Code an der Laterne scannen und das Problem weitergeben.

Des Weiteren profitieren auch die Bamberger:innen, die kein Energie- oder Internetkunde der Stadtwerke sind, von dem ausgeprägten Servicegedanken. So ist auf der Website beispielsweise ein Busfahrplan integriert. Außerdem konnten während der Corona-Pandemie Tickets für die Bamberger Bäder online gekauft oder Gutscheine bestellt werden.

Insgesamt es gelungen, für die Stadtwerke Bamberg ein modernes Design zu entwickeln, das beim Launch bereits State of the Art war, im Laufe der vergangenen Jahre seine Aktualität gewahrt hat und kontinuierlich weiterentwickelt wurde.

Eine wichtige Rolle in diesem modernen und freundlichen Design spielt die Bildsprache. Durch hochwertige Bilder wird auf der Website eine Emotionalität geschaffen. Außerdem sind die Heroes der jeweiligen Seiten responsiv und passen sich dem Endgerät an.

Seien es die Barrierefreiheit, das Design oder andere Anforderungen, die von den Stadtwerken kamen: im Arbeitsprozess hat sich vor allem die Agilität zwischen den Stadtwerken und den Entwickler:innen und Designer:innen als großer Vorteil erwiesen. Der Kunde konnte bereits während des Programmierens auf das System zugreifen und Inhalte pflegen.

Insgesamt entstand durch diesen Prozess eine sehr variable Website, die von Anfang an äußerst gründlich gepflegt wurde und in besonders kurzer Zeit gelauncht werden konnte. Was ansonsten durch mehrere Korrekturschleifen und Wartezeiten geprägt ist, wurde durch die Agilität zu einer Besonderheit des Relaunchs.

Der Relaunch der Stadtwerke Bamberg-Webseite wurde mit TYPO3 durchgeführt. Das Contentmanagement System (CMS) sorgt dafür, dass mehrere Aufgabenbereiche der Stadtwerke unter einen Hut gebracht werden konnten. Neben den Stadtwerken als Versorger wurden so unter anderem auch der Auftritt des Schwimmbads „Bambados“, der Seite des Bamberger ÖPNVs oder die Seite zur Energiezukunft Bambergs gerelauncht.

Als Untermarken der Stadtwerke hatten diese Bereiche allerdings auch unterschiedliche Anforderungen an die Websites. So sollte beispielsweise das Schwimmbad emotionaler präsentiert werden als der Nahverkehr. Insgesamt werden hier mit einem CMS mehrere Arten von Stakeholdern bedient und durch das klare Designsystem präzise angesprochen.

Anhand des Beispiels "Bambados" wurde im Laufe der Zeit allerdings auch klar, dass manche Bestandteile der Website besser auf einer eigenen Seite aufgehoben sind. Deshalb wurde in diesem Fall entschieden, das Schwimmbad unter der Domain bambados.de zu präsentieren.

Im Rahmen des Relaunches profitierten das "Bambados" und dessen Mitarbeiter:innen auch von einem neu entwickelten Bahnbelegungsplan, der gleichzeitig ein weiteres Beispiel für die Digitalisierung der Stadtwerke ist. Wo früher Pläne ausgedruckt und aufgehängt werden mussten, dient mittlerweile ein Online-Plan dazu, den Schwimmer:innen eine Übersicht über die verfügbaren Bahnen zu bieten.

Im Bahnbelegungsplan wird angezeigt, welche Bahn wann frei ist und wann beispielsweise ein regelmäßiger Kurs stattfindet. Aus diesen eingetragenen Zeiten berechnen sich anschließend automatisch die freien Kapazitäten, sodass Überschneidungen vermieden werden können. Jede:r Mitarbeiter:in hat einen eigenen Account und kann den Plan pflegen.

Der Bahnbelegungsplan des Schwimmbads ist ein Beispiel dafür, wie die Inhalte im Stadtwerke Bamberg-Kosmos durch responsives Design auf die Nutzer:innen abgestimmt sind. Im Laufe der Zeit war der Plan nämlich auch als Web-App verfügbar und kann somit ohne Probleme auf Smartphones eingesehen werden.

Ohnehin stand das responsive Design im Fokus des Relaunchs. Dem Nutzer wird die Navigation auf der Website vor allem durch kurze Einstiege in die verschiedenen Themen ermöglicht und Bilder auf der Website passen sich dem Endgerät an.

Obwohl TYPO3 nicht für seine Modularität bekannt ist, wurde es im CMS der Stadtwerke Bamberg geschafft, modulare Komponenten zu erstellen, die es ermöglichen, die Website durch einmalige Änderungen an mehreren Stellen zu verändern.

So es ist etwa möglich, den Code von Kartendarstellungen auf der Website in TYPO3 einmal zu ändern. Anschließend werden diese Änderungen für jede der Kartendarstellungen übernommen. Somit ist nur eine Änderung im Designsystem nötig und die Arbeit der Redakteur:innen wird erleichtert.

Die Stadtwerke Bamberg stellen seit Jahren unter Beweis, dass sie mit ihrer Website für jegliche Herausforderungen gerüstet sind. Während die Inhalte von der kontinuierlichen Pflege der Redakteur:innen profitieren, ist die technische TYPO3-Basis nach wie vor State-of-the-Art und beweist, wie wichtig klare Strukturen, emotionales Design und ein durchdachter Servicegedanke für Nutzer:innen sind.

Die Website der Stadtwerke Bamberg stellt damit ein hervorragendes Beispiel dafür dar, wie Stadtwerke-Websites generell funktionieren können und sollten und bildet eine Basis für zahlreiche weiter Energieversorger-Projekte, die in den vergangenen Jahren von medienreaktor gelauncht wurden.