USABILITY-TEST · UX-KONZEPT · 2026

WärmeCheck

Redesign eines Heizungswartungs-Buchungssystems

Ein generisches SaaS-Buchungstool ersetzt durch eine branchenspezifische, nutzerorientierte Buchungsstrecke – konzipiert, getestet und umgesetzt in 9 Phasen.

Live Demo sehen GitHub

ROLLE

UX Research, Interaction Design, Frontend

ZEITRAUM

2026

TOOLS

Figma, HTML, Tailwind CSS, Obsidian

METHODEN

Heuristik, Usability-Test, Iteration

01 - Überblick

Was für ein Projekt ist es überhaupt

Projektübersicht

Von generisch zu branchenspezifisch – ein Buchungssystem neu gedacht

Im Rahmen einer Konzeptstudie habe ich das Buchungssystem eines Hamburger Heizungsfachbetriebs (GasControl) analysiert und unter dem Projektnamen WärmeCheck neu konzipiert. Das genutzte generische SaaS-Buchungstool befolgte keine UX- und UI-Richtlinien, was zu Verwirrung, Fehlern und potenziellen Abbrüchen führte. Im Rahmen der Analyse habe ich 3 funktionale Bugs und mithilfe der Nielsen-Heuristiken 10 UX-Probleme identifiziert. Auf Basis einer Persona und einem klaren Nutzerfluss habe ich ein branchenspezifisches Redesign entwickelt, das in einem Usability-Test mit 4 Probanden getestet.

02 - Vorgehen

Ablauf des Projekts

01 Kontext Definition Unternehmen analysiert, Nutzergruppe definiert.

02 Anforderungsermittlung Interviews durchgeführt, Persona erstellt, User Storys & Aufgabenmodelle erstellt.

03 Systemanalyse Mit 10 Nielsen-Heuristiken Buchungstool analysiert, Bug-Findings dokumentiert.

04 Anforderungsspezifikation Erfordernisse aus Nutzer & Konzept sowie Systemanalyse in Nutzeranforderungen abgeleitet.

05 Prototyping Wireframes, dann Low-, Mid- und High-Fidelity-Mockups erstellt.

06 Formativer Usability-Test Formativ wurde ein Usability-Test mit 4 Probanden zum Testen des Systems durchgeführt.

07 Software-Integration Figma-Prototyp als Tailwind-CSS-Datei angelegt und live gegangen.

08 Summativer Usability-Test Weiterer Usability-Test mit bestehendem System durchgeführt. n = 6. Effektivität, Effizienz, SUS.

09 Dokumentation & Integration Markdown-Dokumentation in Obsidian angelegt, Website live gebracht, Projekt-Reflexion. Ende.

03 - System

Vergleich altes System mit Neuem

Original System Neues System

1 / 5

FIX 01

PLZ/Ort-Inkonsistenz behoben

Placeholder und Überschrift angeglichen. Das Feld akzeptiert jetzt explizit beides – PLZ oder Ortsname.

FIX 02

kW-Hinweis prominenter

Hinweis „Die kW-Zahl steht auf dem Typenschild" um eine Analogie ergänzt. „Weiß ich nicht"-Option visuell hervorgehoben.

FIX 03

Hersteller-Auswahl umsortiert

Die „Ich bin unsicher"-Option als erste Option in der Liste platziert – ältere Probanden hatten sie am Ende übersehen.

FIX 04

Datum-Hinweis ergänzt

Zeitslots sind erst sichtbar, nachdem ein Datum gewählt wurde – mit klarem Hinweis „Bitte wählen Sie zuerst ein Datum".

04 - Ergebnisse

Zahlen aus der Summative Usability Studie

SUMMATIVE USABILITY STUDIE

Gemessene Werte

Beide Systeme wurden mit denselben Aufgaben getestet, das alte Buchungstool und WärmeCheck. Verglichen entlang der drei Dimensionen von Gebrauchstauglichkeit.

Effektivität

Aufgaben erfolgreich abgeschlossen.

Altes System82%

neues System100%

Effizienz

Zeit bis zur abgeschlossenen Buchung.

Altes System3:12

neues System1:46

Nutzererlebnis

Ergibt sich aus dem SUS Score.

Altes System62

neues System82

Summative Studie, 6 Teilnehmende, identische Aufgabenstellung an beiden Systemen. Dimensionen nach ISO 9241-11. Bei dieser Stichprobengröße sind die Werte als Richtung zu lesen, nicht als statistischer Nachweis. Studiendesign und Rohdaten im PDF.

05 - Details

Zusammenfassung und Projektdetails zum nachschauen

ERGEBNIS

Eine vollständige, funktionsfähige Buchungsstrecke – responsive, mit echten Fehlerzuständen und konsistenten Design-Tokens.

Das Ergebnis basiert auf einer realen Persona, systematischer Analyse und einem Usability-Test mit 6 Probanden und 100% Erfolgsrate. Durchschnittliche Durchlaufzeit: 1:46 Min.

Live Demo ansehen Projekt Details ansehen GitHub Repository