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.

Antragsstrecke Schritt 6 – Zusammenfassung vor dem Absenden

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