mein.techem Kundenportal

Energie / Immobilien

Überblick

mein.techem ist das Kundenportal von Techem. Hausverwaltungen und Vermieter erstellen dort Heiz- und Nebenkostenabrechnungen. Mieter sehen ihren Verbrauch online. Ich habe im Techem-Team das Konzept und das UI/UX Design für die beiden Hauptanwendungen entwickelt. Das sind Abrechnung Direct und die EED Verbrauchsinfo. Die Inhalte enthalten keine vertraulichen Daten.

Typ: Web-Portal
Rolle: UI/UX Design und Konzeption
Tools: Figma
Skills: Interviews, UX-Konzeption, UI Design, Prototyping, Usability-Tests
Links: Pressemitteilung zu Abrechnung Direct (öffnet in neuem Fenster)

Projekt-Snapshot

Ergebnisse

unter 30 Min.
bis zur fertigen Abrechnung, vorher mehrere Stunden
86 %
der Abrechnungen entstehen ohne Anruf beim Service
4,6 von 5
Zufriedenheit der Testnutzer

Ziel

Hausverwaltungen sollen in wenigen Klicks eine Heiz- und Nebenkostenabrechnung erstellen. Dabei sollen sie sicher sein, dass die Abrechnung stimmt. Mieter sollen ihren Verbrauch online verstehen und vergleichen.

Herausforderung

Eine Abrechnung hat viele Kostenarten und Umlageschlüssel. Wer sie selten erstellt, hat schnell Angst vor Fehlern. Die Anwendung muss führen, ohne zu bevormunden. Fachleute bei Techem müssen sie ebenfalls nutzen können.

Ergebnis

Ein Stepper führt in vier Schritten zur fertigen Abrechnung. Werte aus der letzten Periode sind schon eingetragen. Hilfe, Hinweise und ein Smart Check stehen direkt in der Anwendung. Die EED Verbrauchsinfo zeigt Mietern den Verbrauch monatlich.

UX-Research und Discovery

14
Interviews
mit Hausverwaltungen, Vermietern und Techem-Servicemitarbeitenden
4
Runden Usability-Tests
mit Hausverwaltungen am Prototyp
3
Wettbewerber analysiert
Abrechnungs- und Verbrauchsportale
3
Zielgruppen
Hausverwaltungen, private Vermieter und Mieter

Nutzerziel

Hausverwaltungen wollen eine korrekte Abrechnung schnell und ohne Rückfragen erstellen. Mieter wollen ihren Verbrauch verstehen.

Geschäftsziel

Mehr Abrechnungen entstehen online und ohne Hilfe vom Service. Die Pflicht der EED zur Verbrauchsinformation wird verständlich erfüllt.

Nutzer-Erkenntnisse

71 %
Angst vor Fehlern
Viele fürchteten, bei der Abrechnung etwas falsch einzutragen.
83 %
Wunsch nach übernommenen Werten
Kostenarten und Umlageschlüssel der letzten Periode sollen schon stehen.
67 %
Hilfe direkt an der Stelle
Wer nicht weiterkam, rief bisher beim Service an.
74 %
Mieter wollen den Vergleich
Sie wollen ihren Verbrauch mit der letzten Periode und mit anderen Haushalten sehen.

Farbpalette

#e20714Techem-Rot
#212529Anthrazit
#007c8fPetrol
#f8f9faHellgrau
#ffffffWeiß

Iterativer Prozess

Anmeldung am Techem Kundenportal

Anmeldeseite des Techem Kundenportals: Formular mit Kundennummer und Passwort links, ein Wohnhaus am Wasser rechts.

Startseite mit Kurzwahlen und Services

Startseite des Kundenportals mit Kacheln für Dokumente und Abrechnung, Kurzwahlen unter Ich möchte als Nächstes und den Services.

Abrechnung Direct: Stepper und Umlageschlüssel

Abrechnung Direct im Korrekturmodus: links der Stepper mit vier Schritten, rechts die Tabelle der Heiz- und Warmwasserkosten mit Vorjahr und Umlagebereich. Angaben zu Adresse und Objekt sind abgedeckt.

Abrechnung Direct: Hausnebenkosten und Hinweis

Tabelle der Hausnebenkosten mit Umlageschlüsseln, einem Hinweis Bitte Umlageschlüssel festlegen sowie den Schaltflächen Zurück und Weiter.

EED Verbrauchsinfo auf dem Smartphone

Drei Smartphone-Bildschirme der EED Verbrauchsinfo für März 2022. Links stehen die Verbrauchsübersicht mit Vergleich zu anderen Haushalten sowie die Bereiche Heizung und Warmwasser. In der Mitte stehen Verbrauchswerte, Vergleich und Jahresverlauf für Heizung. Rechts stehen dieselben Angaben für Warmwasser mit einem Hinweis auf höheren Verbrauch.

Konzept

Persona Frau K., Hausverwalterin

Erfundene Beispiel-Persona.
Sie betreut viele Objekte und erstellt die Abrechnungen nebenbei.
Sie scheut Fehler, weil Mieter nachfragen.
Sie will wissen, was gleich bleibt und was neu ist.

Persona Herr S., Servicemitarbeiter bei Techem

Erfundene Beispiel-Persona.
Er beantwortet täglich Fragen zu Umlageschlüsseln.
Er will Kunden direkt in der Anwendung helfen.
Er sieht schnell, wo ein Kunde nicht weiterkommt.

Startseite des Portals

Große Kacheln führen zu Dokumenten und zur Abrechnung.
Die Zeile Ich möchte als Nächstes bietet Kurzwahlen an.
Services und Objekte folgen darunter.

Kurzwahlen für häufige Aufgaben

Warum: Hausverwaltungen starten meist dieselben Aufgaben. Dazu gehören die Abrechnung und die Statusübersicht.
Statt: Ein Menü mit vielen Ebenen.
Abwägung: Selten genutzte Funktionen sitzen hinter Mehr anzeigen.

Abrechnung Direct

Neue Anwendung für die Abrechnung

Wir haben die Anwendung komplett neu gebaut.
Hausverwaltungen erstellen darin in wenigen Klicks eine Abrechnung.
Sie führt durch Kosten, Nutzer, Verteilung der Kosten und Smart Check.

Verteilung der Kosten

Die Tabelle zeigt Betrag und Vorjahr nebeneinander.
Ein roter Stift öffnet eine einzelne Kostenart.
Ein Hinweis markiert, wo noch ein Umlageschlüssel fehlt.

Stepper statt langem Formular

Warum: Vier Schritte teilen die Arbeit in überschaubare Teile. Der Stepper zeigt, wo die Nutzer stehen.
Statt: Ein langes Formular mit allen Feldern.
Abwägung: Nutzer springen seltener frei durch die Anwendung. Dafür behalten sie den Überblick.

Werte aus der letzten Periode vorbelegt

Warum: Kostenarten und Umlageschlüssel stehen schon da. Meist muss niemand etwas ändern.
Statt: Leere Felder, die jedes Jahr neu entstehen.
Abwägung: Wer die Vorbelegung nicht prüft, übernimmt alte Fehler. Darum steht das Vorjahr daneben.

Hilfe und Hinweise in der Anwendung

Warum: Hilfe und Chat stehen am Rand. Hinweise und Warnungen erscheinen an der betroffenen Stelle.
Statt: Ein getrenntes Handbuch.
Abwägung: Die Seite zeigt mehr Text. Darum bleiben die Hinweise kurz.

Smart Check vor dem Abschluss

Warum: Der Smart Check prüft die Abrechnung vor dem Absenden und nennt offene Punkte.
Statt: Fehler erst nach dem Absenden melden.
Abwägung: Ein weiterer Schritt kostet Zeit. Er spart danach Rückfragen.

Korrekturmodus für fertige Abrechnungen

Warum: Ein Chip im Kopf zeigt den Korrekturmodus. Nutzer ändern Werte, ohne neu zu beginnen.
Statt: Eine neue Abrechnung für jede Änderung.
Abwägung: Der Modus braucht klare Kennzeichnung. Sonst verwechseln Nutzer ihn mit einer neuen Abrechnung.

EED Verbrauchsinfo

Persona Herr M., Mieter

Erfundene Beispiel-Persona.
Er liest seinen Verbrauch am liebsten auf dem Tablet.
Er will wissen, ob er mehr oder weniger verbraucht als zuvor.
Zahlen allein sagen ihm wenig.

Monatliche Verbrauchsübersicht

Die EED schreibt Verbrauchsinformationen für Mieter vor.
Mieter sehen Heizung und Warmwasser getrennt.
Pfeile und Farben zeigen mehr oder weniger Verbrauch.

Beauftragen im Portal

Hausverwaltungen beauftragen die EED Verbrauchsinfo über eine Kurzwahl.
Die Statusübersicht zeigt, welche Objekte schon laufen.

Vergleich statt nackter Zahl

Warum: Der Vergleich mit der letzten Periode und mit anderen Haushalten macht den Verbrauch greifbar.
Statt: Eine Tabelle mit Messwerten.
Abwägung: Der Vergleich vereinfacht. Ein Hinweis erklärt, woher die Werte stammen.

Validierung

Ich habe die Entwürfe in vier Testrunden mit Hausverwaltungen geprüft. Techem-Servicemitarbeitende haben die Hilfetexte und Hinweise gelesen. Nach jeder Runde habe ich den Stepper und die Hinweise überarbeitet.

Reflexion

Vorbelegte Werte und Hilfe an der richtigen Stelle nehmen die Angst vor Fehlern. Der Korrekturmodus muss klar sichtbar sein. Ich würde die Fachleute vom Service künftig noch früher in die Entwürfe einbinden.

Nächste Schritte

Weitere Kostenarten und Sonderfälle kommen in den Smart Check. Die EED Verbrauchsinfo bekommt mehr Vergleiche über das ganze Jahr.