Zentrale Projektbausteine

Ein zentrales Fundament der neuen Plattform ist die Multi-Site-Struktur, die alle Portale – von Karriere über Nachhaltigkeit bis Freizeit – aus einem einzigen CMS steuert. Jedes Portal behält seine eigene inhaltliche Struktur und Navigation, während das einheitliche Corporate Design für Wiedererkennung sorgt. Diese Konsolidierung reduziert den Pflegeaufwand deutlich, sorgt für konsistente Inhalte und ermöglicht es, Content effizient mehrfach zu nutzen.

Ein weiterer Schwerpunkt liegt auf der situativen Kundenkommunikation. Das neu entwickelte Kommunikationsframework macht es möglich, Hinweise und Meldungen zielgerichtet, kontextabhängig und in Echtzeit zu veröffentlichen. Je nach Dringlichkeit und Thema variiert die Darstellung – von dezenten Hinweisen bis zu prominenten Meldungen – immer so, dass die Information klar erkennbar und für die Nutzer:innen unmittelbar relevant ist. So wird gewährleistet, dass Bürger:innen genau zur richtigen Zeit die richtige Botschaft erhalten.

Mit der Service-Integration wurden zentrale Anliegen wie Zählerstandmeldungen, Störungsmeldungen oder Veranstaltungsinformationen direkt in den Webauftritt eingebettet. Alle Funktionen sind mobil optimiert und ohne Medienbruch nutzbar, sodass Interaktionen schnell und unkompliziert erfolgen können.

Das inklusive Design sorgt dafür, dass die Plattform für möglichst viele Menschen zugänglich ist. Klare Strukturen, kontrastreiche Gestaltung und eine einfache Navigation bilden die Grundlage. Ergänzend wurde Eye-Able integriert, um individuelle Anpassungen und erweiterte Bedienmöglichkeiten zu bieten – ohne die gestalterische Konsistenz des Stadtwerke-CI zu beeinträchtigen.

Vorgehen

Zu Beginn des Projekts stand eine detaillierte Analyse der bestehenden Portale, Services und Kommunikationskanäle. Ziel war es, die Ausgangslage vollständig zu verstehen und eine zentrale Architektur zu entwerfen, die sowohl die Multi-Site-Struktur als auch die Integration aller relevanten Services und eine flexible, situative Kundenkommunikation ermöglicht.

Auf dieser Grundlage entwickelten wir ein UX- und UI-Konzept, das auf eine klare, barrierearme Nutzerführung im Stadtwerke-CI setzt. Ein zentrales Element war die Gestaltung flexibler Kommunikationsflächen, die je nach Anwendungsszenario – von dezenten Hinweisen bis zu auffälligen Störungsmeldungen – variabel eingesetzt werden können, ohne das Nutzererlebnis zu unterbrechen.

In der technischen Umsetzung entstand eine skalierbare TYPO3-Multi-Site-Struktur, ergänzt um das neue Kommunikationsframework und die nahtlose Einbindung der wichtigsten Services. Schnittstellen wurden so konzipiert, dass Informationen und Funktionen systemübergreifend konsistent genutzt werden können.

Zum Abschluss schulten wir das Redaktionsteam, um Inhalte, Services und situative Meldungen effizient und eigenständig pflegen zu können. Der Go-Live erfolgte in einem gestuften Rollout, um einen reibungslosen Übergang von den bisherigen Systemen auf die neue Plattform sicherzustellen.

Projekt-Highlights

Im Verlauf des Projekts wurden zentrale Weichen gestellt, um die Plattform nicht nur als Informationskanal, sondern als vielseitiges Kommunikations- und Service-Ökosystem zu etablieren.

Kommunikationsframework als Redaktionszentrale

Das neue Framework erlaubt es, situative Botschaften in Sekunden auf allen relevanten Portalen zu platzieren – vom dezenten Hinweis auf geänderte Öffnungszeiten bis zu großflächigen Warnhinweisen bei Stromausfällen. Redaktionsteams können Meldungen nach Dringlichkeit, Zielgruppe und Kontext steuern. Dabei sorgt die technische Architektur dafür, dass Inhalte konsistent bleiben und sich künftige Kanäle oder Portale nahtlos anbinden lassen.

Einheitliche Nutzererfahrung über alle Themenwelten

Ob Energie, Freizeit, Karriere oder Nachhaltigkeit – jedes Portal folgt der gleichen, klaren Nutzerlogik. Wiederverwendbare Module und Inhalte sichern Aktualität, sparen Pflegeaufwand und geben den Nutzer:innen ein vertrautes Bediengefühl.

Serviceintegration ohne Umwege

Zentrale Funktionen wie Zählerstandmeldungen, Störungsmeldungen oder Veranstaltungsinformationen sind direkt in den Portalen eingebettet und mobil optimiert. Medienbrüche entfallen – Anfragen und Meldungen landen direkt in den angebundenen Fachsystemen.

Inklusives Design als Standard

Das Interface folgt WCAG-orientierten Prinzipien, ist kontrastreich, klar strukturiert und einfach navigierbar. Eye-Able ergänzt dies um personalisierbare Bedien- und Anpassungsoptionen – so wird der Zugang zu Informationen für möglichst viele Menschen sichergestellt, ohne das Corporate Design zu kompromittieren.

Direkter Zugang zu relevanten Informationen – neu gedacht

Die Plattform verbindet Inhalte, Services und situative Meldungen so, dass Nutzer:innen schneller zu den für sie relevanten Informationen gelangen. Ereignisabhängige Hinweise – etwa zu Netzarbeiten, Fahrplanänderungen oder Veranstaltungsabsagen – erscheinen im direkten Kontext und verlinken zu weiterführenden Informationen oder Formularen. Erste Auswertungen zeigen: Die gezielte Ausspielung relevanter Inhalte steigert sowohl Interaktionsraten als auch Serviceverständnis spürbar.

User Experience & Interface-Design

Der Gestaltungsprozess begann mit einer Analyse der bestehenden Nutzerpfade: Welche Services werden wie genutzt? Wo brechen Suchen oder Anfragen ab? Wie lassen sich situative Meldungen klar und barrierearm einbinden?
Daraus entstand ein UX-/UI-Konzept, das auf klare Strukturen, prägnante Navigation und visuell eindeutige Hinweise setzt – unabhängig vom Endgerät. Responsive Layouts, klare Handlungsaufforderungen und kontextsensitive Inhalte sorgen dafür, dass Informationen im richtigen Moment am richtigen Ort erscheinen.

Design System als Plattformfundament

Alle UI-Komponenten, Farbwelten, Typografien und Abstandsregeln wurden in einem Design System gebündelt.
Es sorgt für ein konsistentes Erscheinungsbild, erleichtert die Pflege und beschleunigt die Umsetzung neuer Portale oder Funktionen. Barrierearme Gestaltung und modulare Komponenten stellen sicher, dass die Plattform langfristig erweiterbar bleibt – und alle Erweiterungen dieselbe visuelle und funktionale Qualität besitzen.

Kommunikations-Framework & Plattformarchitektur

Zentrales Element der neuen Lösung ist ein flexibles Kommunikationsframework, das situative Meldungen und Hinweise in Echtzeit bereitstellt. Damit können bei Wartungen, Störungen oder besonderen Ereignissen relevante Botschaften innerhalb weniger Sekunden veröffentlicht werden – wahlweise dezent als Top-Bar oder auffällig als Overlay.

Die technische Basis bildet eine modular aufgebaute Plattformarchitektur, in der Kommunikationsflächen, Service-Module und externe Schnittstellen klar getrennt, aber nahtlos miteinander verknüpft sind. Dank des API-first-Ansatzes lassen sich neue Funktionen oder Integrationen jederzeit ohne Bruch in die bestehende Infrastruktur einfügen.

UX-Research & Interaktionslogik

Zu Beginn stand eine detaillierte Analyse der Nutzerpfade und Informationsbedürfnisse: Welche Inhalte werden wann und wie abgerufen, welche Services müssen priorisiert werden und wie können Meldungen visuell so gestaltet werden, dass sie sofort ins Auge fallen, ohne zu stören?

Aus den Erkenntnissen entstand eine Interaktionslogik, die Bürger:innen kontextabhängig genau die Inhalte und Services präsentiert, die in ihrer Situation relevant sind. Eindeutige visuelle Signale, logische Gruppierungen und kurze Wege sorgen für Orientierung und Handlungsbereitschaft – im Regelbetrieb ebenso wie in Ausnahmesituationen.

Digitale Formulare & Interface-Design

Alle Serviceformulare – von der Zählerstandsmeldung bis zur Veranstaltungsanmeldung – wurden in ein einheitliches, webbasiertes Interface überführt. Die neue Eingabelogik ist responsiv, klar strukturiert und reagiert in Echtzeit auf Eingaben.

Thematische Cluster, optionale Felder und unterstützende Hinweise sorgen für Übersicht und verhindern unnötige Komplexität. Gestaltung und Bedienung folgen den Prinzipien barrierearmer Interfaces und sind in das zentrale Design System eingebettet, um langfristig ein konsistentes Erscheinungsbild zu sichern.

Frontend & Integration

Parallel zum Designprozess wurde das Frontend technisch neu aufgebaut. Die Multi-Site-Struktur erlaubt es, Inhalte und Funktionen zentral zu pflegen und flexibel über alle Portale auszuspielen.

Die Kommunikationsflächen – vom Hinweisbanner bis zum Overlay – sind so integriert, dass sie systemweit konsistent funktionieren und in Echtzeit aktualisiert werden können.

Schnittstellen zu internen Fachsystemen binden zentrale Services direkt an – so werden Zählerstandmeldungen, Störungsmeldungen oder Veranstaltungsinformationen ohne Medienbruch erfasst und verarbeitet. Das Ergebnis: eine zentrale Plattform, die Informationen, Kommunikation und Service in einer einheitlichen, skalierbaren Lösung vereint.

Nächstes Projekt