SOFTWARE
Die digitale Evolution der Heizkostenabrechnung
Status: Ongoing B2B - Project: eine digitale Dienstleistung für Vermieter und Hausverwalter zur verbrauchsgerechten Verteilung von Wärme- und Warmwasserkosten | Rolle: Senior Product Designer
Stack: Figma, Storybook, Claude Code, Cursor, MCP Server, Git, HTML/TypeScript/Angular / Tailwind, Figma Make AI, Framer
Der Hook (Das Ergebnis vorab)
Mein Fokus: End-to-End Verantwortung für Konzeption und UI-Design der Kernmodule: Liegenschaftsübersicht, Mietedatenpflege, Mieterwechsel sowie Immobiliendetails. Zusätzlich: Lead für die Design Component Library, User Testing (Ich konzipiere die Test-Szenarien und begleite die Durchführung, um meine Design-Hypothesen iterativ zu validieren) und den technischen Handoff. Der Impact auf einen Blick:
-45%
Fehlerquote bei der Dateneingabe
>70%
Automatisierungsgrad der Prozesse
ca. 15min
Bearbeitungszeit pro Liegenschaft
Hier sehen Sie einigen Screenshots von meiner Arbeit aus Preprod- Entwicklungsystem. Im Folgenden zeige ich, wie ich zu diesem Ergebnis gekommen bin.
Das Problem (Empathize & Define)
Die Heizkostenabrechnung ist ein bürokratisches Monster mit extrem hoher Informationsdichte. Das Kernproblem: Eine veraltete Systemlandschaft und fragmentierte Datenflüsse führten zu massiven Ineffizienzen und einer hohen Fehlerquote bei den Verwaltern und privaten Vermieter. Wir mussten ein System schaffen, das diese Komplexität bändigt und durch radikale Vereinfachung sowie proaktive Fehlervermeidung neues Vertrauen bei den Kunden schafft.
Discovery: Strategisches Fundament
Gutes Design basiert auf harten Fakten. In der Konzeptphase habe ich den Grundstein für die gesamte UX-Strategie gelegt:
-
Benchmarking: Ich habe ein umfassendes Benchmarking durchgeführt, um zu verstehen, wie Wettbewerber und angrenzende SaaS-Lösungen komplexe Datenströme bändigen, um ista SE einen entscheidenden Marktvorteil zu verschaffen.
-
Deep User Research: Auf Basis zahlreicher User Interviews habe ich präzise Personas entwickelt. Dies half uns, Empathie im gesamten Team zu verankern.
-
Customer Journey Mapping (CJM): Ich habe die globale Journey visualisiert, um alle Pain Points über den gesamten Lifecycle zu identifizieren. Für meine Fokus-Module habe ich detaillierte Journey Maps erstellt, um Mikro-Interaktionen auf Basis der Nutzerbedürfnisse zu optimieren.
.png)
-
User Testing: Ich war maßgeblich an der Erstellung der Test-Szenarien beteiligt, um unsere Hypothesen frühzeitig zu validieren. (Im Screen sehen Sie eine Zusammenfassung von einigen Benutzertests)
Anforderungen in Logik übersetzen
Nachdem die Pain Points identifiziert waren, stand ich vor der architektonischen Herausforderung, zwei völlig gegensätzliche Nutzergruppen auf einer Plattform zu vereinen: den digital-affinen Profi-Verwalter und den privaten Vermieter, der die Abrechnung bisher ausschließlich auf Papier erledigt hat. Mein Ziel war eine „Zero-Learning-Curve“-Experience.
-
Die Vision: Duale Modi für maximale Relevanz. Mein ursprüngliches IA-Konzept basierte auf zwei spezialisierten Oberflächen:
-
Validierung & Die „MVP-Realität“: Die Nutzertests der ersten IA-Fassung waren ein triumphaler Erfolg: Eine Task-Completion-Rate von 95 % in beiden Gruppen. Doch hier kam die strategische Entscheidungsebene ins Spiel: Aufgrund begrenzter Entwicklerkapazitäten konnten wir zum Launch nicht zwei separate Modi bauen.
-
Der hybride Pivot: Ich habe die Architektur iteriert und eine hybride IA entwickelt. Anstatt zwei Welten zu bauen, haben wir die Essenz beider Gruppen in ein flexibles System gegossen, das zwar nicht zu 100 %, aber zu soliden 75 % die Bedürfnisse beider Seiten im MVP abdeckt. Diese Version priorisiert die „Must-have“-Funktionen des Experten-Modus, behält aber die visuelle Leichtigkeit und Führung des Simple-Modus bei.
Der Simple(Einfacher)-Modus: Ein hochgradig geführtes System für Gelegenheitsnutzer. Mit einem speziellen Onboarding und einem „Wizard-Ansatz“, der den Nutzer an die Hand nimmt, um Mieterdaten mit nur einem Klick zu verarbeiten.
Der Profi-Modus: Ein funktionsreiches Interface für Hausverwaltungen. Hier lag der Fokus auf komplexen Buchhaltungs-Features (z. B. Vorauszahlungsberechnungen) und – besonders wichtig – einer Offline-Speicherfunktion. Da Verwalter oft zwischen Objekten unterwegs sind, mussten sie ihren Fortschritt auch ohne stabile Internetverbindung sichern können.
Low-Fi Screen-Konzept auf dem Basis von neuer IA
Mein Game Changer: Design-to-Code Efficiency (USP)
Mein Alleinstellungsmerkmal ist die technische Tiefe im Design-Prozess:
-
Design System Ownership: Aufbau und Pflege der Component Library in Figma.
-
Coding the Bridge: Ich nutze Cursor, um isolierte UI-Komponenten direkt in Angular + Tailwind zu entwickeln. Dies garantiert einen verlustfreien Handoff.
-
Automatisierte Dokumentation: Mit Claude Code automatisiere ich die Pflege der Dokumentation in Storybook, wodurch Design und Code stets synchron bleiben.
Evaluierung & Rückblick
iDE 2.0 setzt neue Maßstäbe bei ista. Die Ergebnisse aus den Pilottests bestätigen: Die Nutzerführung ist so intuitiv, dass die Fehlerquote massiv gesunken ist.
Reflexion: Die Kombination aus tiefem Discovery (CJM/Benchmarking) und technischem Handoff (Angular/Cursor) hat die Produktgeschwindigkeit um ca. 30% erhöht. Heute würde ich diesen hybriden Ansatz zwischen Design und Code noch früher im Projekt festschreiben.