Stadtwerke München – Mein Anschlussportal
Enterprise Webdesign UX/UI Barrierefreiheit
Ein Kundenportal für Hausanschlüsse, neu konzipiert – klar geführt, barrierefrei und verständlich.

Der Kunde
Die Stadtwerke München (SWM) versorgen die Landeshauptstadt mit Strom, Wasser, Fernwärme und Mobilität – für Hausanschlüsse ist ein eigenes Kundenportal die zentrale Anlaufstelle.
Die Aufgabe
Das bestehende Portal für Hausanschlussanträge war weder barrierefrei noch zeitgemäß strukturiert. Komplexe Anträge zu Strom-, Wasser- und Fernwärmeanschlüssen mussten in einen Prozess überführt werden, der Kund:innen jederzeit Orientierung gibt. Die Herausforderung bestand auch darin eine heterogene Nutzergruppe zu bedienen, es gibt Privatkunden, Gewerbekunden und interne SWM-Mitarbeiter die unsere Lösung gleichermaßen nutzen.
Der Ansatz
Eine vollständige Neukonzeption der Informationsarchitektur teilt den Antragsprozess in klare, geführte Schritte. Fehlermeldungen benennen konkret, was fehlt, statt nur zu blockieren. Ein Dashboard bündelt alle laufenden Anliegen an einem Ort. Barrierefreiheit war dabei kein nachträglicher Check, sondern von Anfang an Teil der Struktur.
Antragsstrecke – Schritt 1 Anschlussobjekt
Der erste Schritt erfasst, wo sich das Objekt befindet und um welchen Anschlusstyp es sich handelt – vom Neubau über die Garage bis zur Kleingartenanlage. Gerade hier zeigt sich, wie wichtig es war, auch die Ausnahmen mitzudenken: In manchen Fällen existiert noch gar kein Straßenname. Dafür ist dieses Feld optional und wird durch die Angabe von Gemarkung und Flurstück ersetzt – so bleibt der Einstieg auch für unbebaute Grundstücke möglich.
Der Standort entscheidet zugleich über den weiteren Verlauf: Anhand der Auswahl prüft das Portal, ob und welche Sparten – Gas, Wasser, Strom, Fernwärme – die Stadtwerke München am jeweiligen Ort überhaupt anbieten, und zeigt die Möglichkeiten direkt in einem Hinweis an. So wissen Nutzer:innen von Anfang an, woran sie sind.




Antragsstrecke – Schritt 2 Anliegen
Anliegen: Nutzerführung, interne Abläufe und rechtliche Anforderungen zusammendenken
Schon der zweite Schritt trifft eine wichtige Weichenstellung: Nutzer:innen wählen zwischen „Bestellung“ und „Angebot anfordern / Anmeldung“. Was für sie wie eine einfache Auswahl aussieht, hat einen tieferen Grund – die beiden Wege lösen nicht nur unterschiedliche Bearbeitungsprozesse bei den Sachbearbeiter:innen aus, sondern haben auch rechtlich unterschiedliche Folgen: Im einen Fall entsteht eine Rechnung, im anderen ein Angebot. Diese Unterscheidung sauber und für die Nutzer:innen unmerkbar früh im Prozess zu verankern, bedeutete, Nutzerführung, interne Abläufe und rechtliche Anforderungen gemeinsam zu denken. So entsteht ein Antrag, der nach außen klar ist und nach innen rechtlich wie organisatorisch korrekt weiterläuft.




Antragsstrecke – Schritt 3 Technische Daten
Komplexität bändigen, ohne zu überfordern
Dieser Schritt war der anspruchsvollste der gesamten Antragsstrecke. Je nach Anschluss ist sehr Unterschiedliches zu berücksichtigen – wo der Anschluss verlegt werden soll, ob es sich um eine sensible Einrichtung wie ein Krankenhaus handelt, und vieles mehr. Die eigentliche Aufgabe bestand darin, alle diese Fälle vollständig abzudecken und die Nutzer:innen zugleich klar und verständlich hindurchzuführen – ohne sie mit der dahinterliegenden Komplexität zu überfordern. Infoboxen mit kurzen Erklärungen bieten Unterstützung genau an den Stellen, an denen Fragen entstehen.




Antragsstrecke – Schritt 4 Kontakte
Doppelte Eingaben vermeiden
In einem Antrag mit mehreren Beteiligten – Anschlussnehmer, Eigentümerin, Rechnungsempfänger – sind viele Kontaktdaten identisch. Statt sie mehrfach eintippen zu lassen, bietet die Auswahl „Gleicher Kontakt wie …“ an, bereits erfasste Daten direkt zu übernehmen. Das spart nicht nur Zeit, sondern verhindert auch die Tippfehler, die bei wiederholter Eingabe unweigerlich entstehen.

Antragsstrecke – Schritt 4 Dokumente
Fehler vermeiden statt nur melden
Gerade der Upload von Nachweisen ist eine typische Abbruchstelle. Deshalb nennt der Schritt schon vor dem Hochladen klar, welche Dateitypen und Größen erlaubt sind – die meisten Fehler entstehen so gar nicht erst. Kommt es doch zu einem Problem, erklärt die Fehlermeldung konkret, was zu tun ist, anstatt nur abzuweisen. Und bereits hochgeladene Dateien bleiben an ihrem Namen und einem Typ-Symbol (etwa PDF oder Bild) jederzeit nachvollziehbar. So behalten Nutzer:innen auch bei mehreren Dokumenten den Überblick.


Antragsstrecke – Schritt 6 Zusammenfassung
Zusammenfassung: Kontrolle vor dem Absenden, Sicherheit danach
Den Abschluss der Antragsstrecke bilden zwei bewusst getrennte Momente. Vor dem Übermitteln zeigt eine vollständige Zusammenfassung noch einmal alle Eingaben – so behalten Nutzer:innen die Kontrolle und können Fehler korrigieren, bevor der Antrag rausgeht. Nach dem Absenden folgt eine klare Erfolgsmeldung samt Vorgangsnummer und E-Mail-Bestätigung, die Sicherheit gibt: Der Antrag ist angekommen.
Wichtig war uns, dass dieser Moment keine Sackgasse ist. Die Bestätigung bietet die nächsten sinnvollen Schritte an – die Zusammenfassung als PDF sichern, einen weiteren Antrag stellen oder zurück ins Dashboard. Und weil ein Anliegen selten allein kommt, schlägt das Portal darunter passende Anschluss-Themen vor: Wer etwa einen Wasseranschluss beantragt hat, wird auf verwandte Vorgänge wie Baustrom oder die Anmeldung eines Brunnens hingewiesen. So denkt der Prozess über den einzelnen Antrag hinaus – er begleitet die Nutzer:innen bei dem, was als Nächstes ansteht.



Mein Anschlussportal
Über ein Kunden-Dashboard lassen sich Nachrichten, offene Aufgaben, alle Anliegen und deren Status einsehen.




Das Ergebnis
Wo es zuvor keine zugängliche digitale Lösung gab, steht Hausanschluss-Kund:innen nun erstmals ein durchgängig barrierefreier, klar geführter Online-Prozess zur Verfügung. Als Team aus zwei Designerinnen haben wir den gesamten Antrag samt Kunden-Dashboard neu konzipiert – Letzteres macht alle Anliegen und ihren Bearbeitungsstand auf einen Blick sichtbar.
Zeitraum
2023–2024
Rolle
Im Team aus zwei Designer:innen, remote und vor Ort
Leistungen
Informationsarchitektur, Wireframes, Interne User Umfrage, UI- & UX-Design, Erweiterung des Designsystems, Barrierefreiheit
Tools · Sprache
Figma, Jira, Confluence · Deutsch
Methodik
agile Zusammenarbeit im Scrum-Team
Ein ähnliches Projekt im Kopf?
Ob Kundenportal, App oder Marke – wenn Ihr Vorhaben in diese Richtung geht, spreche ich gern mit Ihnen darüber.
Erstgespräch anfragen Zurück zum Portfolio Nächstes Projekt: Carsten Heller
