SWK
Portal

Vision 2030: eine Plattform für alle Geräte und alle Gesellschaften der SWK, umgesetzt zuerst im Geschäftskundenportal.

Kunde: Stadtwerke Krefeld
Rolle: Product Designer (Freelance)
Jahr: 2025-2026
Disziplinen: Konzeption, UX, UI, Design System
Märkte: Energie, Mobilität, Entsorgung
Aufgabe: Mit der Vision 2030 eine gemeinsame Design-Grundlage für die digitalen Services der SWK und ihrer Marken entwickeln und sie im Geschäftskundenportal als erstem Projekt umsetzen.

Viele Services, viele Gesellschaften

Die Stadtwerke Krefeld bieten Energie, Mobilität und Entsorgung an, dazu kommen Marken wie NGN, eezy.nrw und lekker. Die Frage war, wie sich all diese Funktionen, Geräte und Gesellschaften unter einem gemeinsamen Dach abbilden lassen.

Im Geschäftskundenportal kommt eine weitere Ebene hinzu. Firmenkunden verwalten nicht einen Vertrag, sondern Holdings mit Unterfirmen, viele Lieferstellen, Sonderverträge und Tarifprodukte, Abschläge und Zählerstände für ganze Liegenschaftsbestände.

Die Aufgabe

Zuerst eine grundlegende Herangehensweise und Design-Transformation für die digitale SWK-Welt entwickeln: die Vision 2030. Danach diese Grundlage im Geschäftskundenportal als erstem Umsetzungsprojekt beweisen.

Eine Vision, eine Plattform

Der Leitsatz der Vision 2030: Alle Funktionen. Alle Geräte. Alle Gesellschaften. Statt eigener Oberflächen pro Sparte und Marke entsteht ein gemeinsames Framework, das vom Wearable über Smartphone und Tablet bis zum Desktop trägt.

Weniger BibliothekenDesign- und Code-Bibliotheken werden reduziert und zusammengezogen.
Living Style GuideDesign und Programmierung rücken über einen Living Style Guide enger zusammen.
Gleiches Erlebnis überallKundinnen und Kunden haben auf allen Geräten und für alle Funktionen das gleiche Nutzungserlebnis.
Einheitliches DesignDas Design wird auf allen Ebenen und Geräten einheitlich.
Partner bauen mitPartner können auf dasselbe Framework aufbauen, das stärkt die Außenwirkung.
Effizienter arbeitenStärkere Zentralisierung macht die Arbeit in allen Gewerken effizienter.

Navigationskonzept mit eingeklappter Leiste, ausgeklapptem Fly-Out und Profilwechsel — Navigation als Rückgrat: Fly-Out und permanente Variante für Desktop, Tablet und Smartphone, Sparten als favorisierbare Services, Profilwechsel zwischen Adressen und Verträgen.

Vision 2030: Konzept eines KI-Assistenten mit Schnellaktionen — Konzept, noch nicht umgesetzt: ein KI-Assistent mit Schnellaktionen wie Zählerstand übermitteln oder Sperrmülltermin reservieren.

Ein System, drei Sparten

Dasselbe Raster, dieselbe Navigation, dieselben Kacheln. Je Sparte wechseln nur die Inhalte: Verbrauch und Prognose bei Energie, Karte, Tickets und Abfahrtsmonitor bei Mobilität, Abfuhrkalender, Wertstoffhof und Sperrmüll bei Entsorgung. Varianten für lekker, NGN und das Business-Portal zeigen, dass das Framework auch Marken trägt. Alle Ansichten in diesem Kapitel sind Konzeptentwürfe der Vision 2030.

Vision 2030, Look & Feel Energie: aktueller Strompreis, Tagesverbrauch und Strompreis im Tagesverlauf — Konzept Energie: Verbrauch und Prognose.

Konzept Mobilität mit Karte, eezy-Ticket, Abfahrtsmonitor und Meldungen — Konzept: Mobilität und Entsorgung im selben System.

Konzept Entsorgung mit Wertstoffhof-Karte, Abfuhrkalender und Sperrmüll — Konzept: Mobilität und Entsorgung im selben System.

Konzept Energie auf dem Smartphone — Konzept für Smartphone. Personalisierte Angebote sind Teil der Vision und bisher nicht umgesetzt.

Konzept Mobilität auf dem Smartphone mit aktivem eezy-Ticket — Konzept für Smartphone. Personalisierte Angebote sind Teil der Vision und bisher nicht umgesetzt.

Das erste Projekt auf der neuen Grundlage

Im Geschäftskundenportal wurde die Vision 2030 konkret, gemeinsam mit dem Produktteam der SWK. Navigation, Vertragsübersicht, Postfach, Zählerstand, Abschlag, Meine Daten, Admin Panel, Startseite, Anmeldung sowie Wartungs- und 404-Seiten entstanden als durchgängiges System.

Jeder Screen ist für sechs Breakpoints von 320 bis 1536 Pixel ausgearbeitet und deckt neben dem Normalfall auch Lade-, Leer- und Fehlerzustände ab. Das Portal ist live und läuft derzeit in einer Testphase mit Geschäftskunden.

Zählerstandserfassung gruppiert nach Unterfirma mit HT und NT Eingabe — Zählerstände für viele Lieferstellen auf einen Blick, gruppiert nach Unterfirma, mit Historie und Zwischenablesung.

Plausibilitätsprüfung nach CSV-Import von Zählerständen — Für große Bestände: CSV-Import mit Plausibilitätsprüfung. Auffällige Werte werden bestätigt oder direkt korrigiert.

Admin Panel mit Holdings und Unterfirmen — Admin Panel: Holdings und Unterfirmen anlegen, User Accounts Rollen und Firmen zuordnen, sperren oder Passwörter zurücksetzen.

User Account bearbeiten mit Rollenzuweisung und Zuordnung zu Unterfirmen — Admin Panel: Holdings und Unterfirmen anlegen, User Accounts Rollen und Firmen zuordnen, sperren oder Passwörter zurücksetzen.

Geschärft im Detail

Zwischen Konzeptstand und Umsetzung wurde das Portal weiter geordnet: eine eigene Startseite als Einstieg, Filter statt Schalterreihen und eine Vertragsstruktur, die der Firmenstruktur folgt.

Umgesetzte Startseite mit Begrüßung, Liegenschaftskarte und nächsten Fälligkeiten — Startseite: Aus einer Sammlung von Listen im Konzept wird in der Umsetzung ein Einstieg, der zeigt, was als Nächstes fällig ist, mit Abschlägen und RLM getrennt und eigener Ansprechpartnerin.

Konzeptstand des Dashboards mit Vertragsfavoriten, Postfach und Liegenschaftskarte — Startseite: Aus einer Sammlung von Listen im Konzept wird in der Umsetzung ein Einstieg, der zeigt, was als Nächstes fällig ist, mit Abschlägen und RLM getrennt und eigener Ansprechpartnerin.

Umgesetzte Vertragsübersicht mit Vertragsbaum je Unterfirma und Abschlagskalender — Vertragsübersicht: Tarifprodukte und Sonderverträge hängen in der Umsetzung direkt an der jeweiligen Unterfirma, Suche und Spartenschalter wandern in einen Filter.

Konzeptstand der Vertragsübersicht mit Umschalter Sonderverträge und Tarifprodukte — Vertragsübersicht: Tarifprodukte und Sonderverträge hängen in der Umsetzung direkt an der jeweiligen Unterfirma, Suche und Spartenschalter wandern in einen Filter.

Product Designer (Freelance)

Als freiberuflicher Product Designer habe ich die Vision 2030 allein entwickelt: die Idee einer gemeinsamen Plattform für alle Geräte und Gesellschaften, die Navigation und das Look & Feel der Sparten. Anschließend habe ich sie gemeinsam mit dem Produktteam der SWK im Geschäftskundenportal umgesetzt, mit allen Breakpoints und Zuständen.

Nächstes Projekt

Formel
Skin