Energie neu gedacht: Moderner, barrierefreierWebauftritt für GGEW

Die GGEW ist der regionale Energieanbieter für die Bergstraße in Südhessen – mit einem Angebot, das weit über Strom und Gas hinausgeht: Wärme, Wasser, Photovoltaik, E-Mobility, Internet und sogar Freizeitangebote wie ein eigenes Schwimmbad. Diese Vielfalt sollte sich auch im digitalen Auftritt widerspiegeln – übersichtlich, modern und für möglichst alle Menschen zugänglich.

Gemeinsam mit GGEW haben wir den Webauftritt auf ein neues Fundament gestellt: mit klarer Informationsarchitektur, einem überarbeiteten UX- und UI-Design, einem barrierefreien Frontend und einer technisch zukunftssicheren Umsetzung auf Basis von Craft CMS 5.

Die Herausforderung

Die GGEW versorgt die Region Bergstraße mit Energie, Wasser und digitalen Dienstleistungen und verbindet klassische Versorgungsaufgaben mit zukunftsorientierten Angeboten: von Photovoltaik über Ladeinfrastruktur für E-Autos bis hin zu Freizeit- und Serviceangeboten.

Genau diese Spannbreite war auch der Ausgangspunkt für den Relaunch:

• Eine zentrale Anlaufstelle für Privat-, Geschäfts- und Industriekund:innen schaffen
• Energie- und Serviceangebote verständlich, strukturiert und schnell auffindbar machen
• Einen Webauftritt entwickeln, der barrierefrei nutzbar ist
• Ein flexibles System aufbauen, das künftige digitale Services problemlos aufnehmen kann

Die Herausforderung: Eine kommunale Website, die sowohl den Schwimmbadbesuch am Wochenende als auch komplexe Energiethemen wie Photovoltaik oder E-Mobility abbildet – ohne Nutzer:innen zu überfordern.

Unsere Leistungen

Zu Projektstart gab es bereits ein bestehendes Corporate Design und ein Layout-Grundgerüst. Statt alles neu zu erfinden, haben wir bewusst iterativ gearbeitet:

• Überarbeitung und Schärfung des bestehenden Designs für den digitalen Kontext
• Anpassung von Farben, Typografie und Komponenten im Hinblick auf Barrierefreiheit
• Neustrukturierung zentraler Seitentypen (z. B. Produktseiten, Servicebereiche, Übersichtsseiten)
• Enge Abstimmung mit GGEW, um bestehende Markenwerte zu bewahren und gleichzeitig die Usability zu verbessern

Unsere Leistungen im Projekt:

• UX- & UI-Design-Rework
• Beratung zu SEO & Barrierefreiheit
• Craft-CMS-Integration
• Frontend- und Backend-Entwicklung
• Content Support

Craft CMS 5 als technische Basis

Technisch basiert der neue Auftritt auf Craft CMS 5 – ergänzt durch TypeScript, Twig und Vite als moderne Build- und Frontend-Toolchain.

Wesentliche Gründe für Craft CMS in diesem Kontext:

• Strukturierte Inhalte: Komplexe Content-Strukturen (Produkte, Tarife, Services, Ratgeber, Standorte) lassen sich in Craft sauber als Sections, Matrix- oder Entry-Types modellieren.
• Saubere Templates mit Twig: Das Design kann in Twig-Templates präzise umgesetzt werden – mit klaren Strukturen, guter Wiederverwendbarkeit und hoher Kontrolle über das Markup.
• Performance & Developer Experience: Mit Vite als Build-Tool und TypeScript im Frontend bleibt der Code wartbar, performant und erweiterbar.
• Skalierbarkeit: Neue Angebote – z. B. zusätzliche Servicebereiche, Kampagnen-Landingpages oder Self-Service-Funktionen – können später ohne Systembruch hinzugefügt werden.

Das Ziel: Ein System, das nicht nur zum Launch funktioniert, sondern auch in drei, fünf oder zehn Jahren noch als stabile Basis für neue digitale Produkte dient.

Eine zentrale Anlaufstelle für alle Zielgruppen

Ein moderner Energieversorger spricht sehr unterschiedliche Zielgruppen an:

• Privatkund:innen, die einen passenden Tarif suchen
• Gewerbe- und Industriekund:innen mit spezifischen Anforderungen
• Kommunen und Partner:innen
• Bürger:innen, die sich über nachhaltige Energie, Projekte oder Services informieren
• Menschen, die „nur mal kurz“ Öffnungszeiten, Störungs-Hotlines oder Schwimmbadinfos brauchen

Damit alle diese Gruppen schnell das finden, was sie brauchen, wurde die Informationsarchitektur neu geordnet:

• Klare Trennung zwischen Privat- und Geschäftskunden-Bereichen
• Verständliche Produkt- und Servicekategorien
• Deutlich erkennbare Einstiege in zentrale Services (z. B. Zählerstand melden, Störung melden, Kontaktmöglichkeiten)
• Ein strukturiertes, konsistentes Seitenlayout, das sich auf verschiedenen Endgeräten gleich intuitiv anfühlt

Die Navigation folgt dem Prinzip: „So wenig Reibung wie möglich, so viel Orientierung wie nötig.“

Barrierefreiheit als Standard – nicht als Add-on

Für einen regionalen Energieversorger ist digitale Teilhabe kein Nice-to-have, sondern Verantwortung. Darum wurde der Webauftritt von Beginn an barrierefrei gedacht und das bestehende Design entsprechend überarbeitet.

Zentrale Aspekte:

• Klare, semantische Struktur: Überschriftenhierarchien, Listen, Tabellen und Landmark-Roles wurden so angelegt, dass Screenreader-Nutzer:innen sich gut orientieren können.
• Kontraste & Lesbarkeit: Farben wurden angepasst, sodass Texte, Icons und Bedienelemente gut erkennbar sind – auch bei eingeschränktem Sehvermögen.
• Fokusführung & Tastaturbedienung: Alle relevanten Elemente lassen sich per Tastatur ansteuern und bedienen, Fokuszustände sind klar sichtbar.
• Barrierearme Formulare: Klare Labels, verständliche Fehlermeldungen und sinnvolle Feldreihenfolge erleichtern das Ausfüllen – auch mit assistiven Technologien.
• Bewusster Umgang mit Bewegung: Animationen wurden sparsam und zurückhaltend eingesetzt, um Nutzer:innen mit Reizempfindlichkeit oder kognitiven Einschränkungen nicht zu überfordern.

Barrierefreiheit ist hier kein eigenes Feature, sondern Teil der Basisarchitektur – von der Startseite bis zum Formular.

Die interaktive Bild-Komponente: Komplexe Inhalte, einfach und barrierefrei

Ein besonderes Highlight des Relaunches ist eine neu entwickelte interaktive Bild-Komponente, die zeigt, wie sich komplexere UI-Elemente interaktiv UND barrierefrei umsetzen lassen.

Interaktive Bilder sind oft kritisch: Tooltips verschwinden zu schnell, Kontraste sind schlecht, mit Tastatur lässt sich nichts bedienen. Genau diese Stolpersteine haben wir systematisch aus dem Weg geräumt.

Kontraststark und gut lesbar

Damit Inhalte auch bei eingeschränkter Sehfähigkeit gut wahrgenommen werden, arbeitet die Komponente mit:

• einem farblich abgestimmten Overlay über dem Bild
• klar erkennbaren Texten und Icons vor dem Hintergrund
• Kontrastwerten, die sich an gängigen Barrierefreiheitsstandards orientieren

So bleibt die Bildaussage erkennbar, aber alle Interaktionselemente sind deutlich hervorgehoben.

Ruhige, reduzierte Bewegungen

Interaktive Elemente neigen dazu, „effektvoll“ zu werden – also viel Animation, viel Bewegung. Hier war das Ziel das Gegenteil:

• Animationen und Übergänge sind bewusst reduziert
• Bewegungen sind weich und dezent statt aufdringlich
• Die Komponente eignet sich damit auch für Nutzer:innen mit Reizempfindlichkeit, Gleichgewichtsstörungen oder bestimmten kognitiven Einschränkungen

Interaktivität ja – sensorische Überlastung nein.

Intuitive Bedienung mit Hover & Klick

Die Interaktion folgt einem klaren, nachvollziehbaren Muster:

• Beim Hover oder Klick öffnet sich ein erklärendes Popup mit den relevanten Informationen.
• Nach dem ersten Klick gibt es eine kurze Verzögerung, bevor das Popup wieder geschlossen werden kann.

Das verhindert versehentliches Schließen (z. B. durch ungenaue Mausbewegungen) und sorgt für ein ruhigeres Nutzungserlebnis. Nutzer:innen haben genug Zeit, Inhalte zu lesen, ohne das Gefühl, gegen die Komponente „anzukämpfen“.

Vollständig per Tastatur bedienbar

Ein zentraler Punkt für Barrierefreiheit:

• Die Komponente lässt sich vollständig per Tastatur bedienen.
• Hotspots können fokussiert, Popups geöffnet, Inhalte gelesen und wieder geschlossen werden – ohne Maus.
  Damit ist das Modul auch für Menschen mit motorischen Einschränkungen oder Nutzer:innen assistiver Technologien zugänglich.

Interaktive Inhalte sind so nicht nur „nice to click“, sondern gleichwertig nutzbar.

Popup immer im sichtbaren Bereich

Gerade bei responsiven Layouts ist es leicht, Popups „aus dem Bildschirm fallen“ zu lassen. Hier sorgt die Logik im Hintergrund dafür, dass:

• das Popup immer im sichtbaren Viewport erscheint
• Inhalte nicht abgeschnitten werden – egal, auf welcher Bildschirmgröße
• auch bei kleineren Displays die Informationen vollständig und ohne Scroll-Akrobatik erreichbar sind

Diese Bild-Komponente ist damit nicht nur ein schönes UX-Element, sondern ein Beispiel dafür, wie sich komplexe Inhalte verständlich und barrierefrei aufbereiten lassen – ein wichtiger Baustein für die digitale Kommunikation eines Energieversorgers.