Vom Wireframe zum Konzept –
schnell und methodisch
Ein österreichischer Finanzdienstleister wollte seine Online-Baufinanzierungsstrecke um einen vollständigen Supportbereich erweitern. Aufgabe: in einem ersten Aufschlag von ca. 8 Stunden eine Hypothese, eine Konkurrenzanalyse und erste responsive Wireframes liefern.
Die Aufgabe
Die neue Online-Baufinanzierungsstrecke ermöglicht Endkundinnen in wenigen Minuten ein verbindliches Angebot – ohne Makler oder Bankmitarbeiter, vollständig online.
Die Finanzierungsstrecke sollte hinsichtlich der User Experience optimiert werden. Außerdem sollte der Kontaktbereich zu einem vollständigen Supportbereich ausgebaut werden: Fragen stellen, Beratungstermin vereinbaren, FAQ sowie Direktsupport via Video/Chat.
Ich habe eine Hypothese formuliert, eine Konkurrenzanalyse durchgeführt und dazu responsive Wireframes für Desktop und Mobile erstellt – als erster Vorschlag zum Aufbauen.
Aktuellen Stand analysieren
Da es bereits eine Strecke gab und diese ausgebaut werden sollte, habe ich mir den aktuellen Stand sowohl der Strecke als auch des Kontaktbereichs angesehen.
Für die Strecke zunächst mittels eines Cognitive Walkthrough einen Überblick verschafft, danach eine Heuristische Evaluation auf Basis der 10 Heuristiken nach Jakob Nielsen durchgeführt.
"Nutzende möchten individuelle Möglichkeiten, um schnell Fragen beantwortet zu bekommen."
Konkurrenzanalyse
Für den Supportbereich habe ich mir Lösungen der Konkurrenz angesehen und sowohl Stärken als auch potenzielle Probleme identifiziert.
Positiv: direkt aufrufbar, auf jeder Seite einbindbar, alle Kontaktmöglichkeiten an einem Ort.
Potenzielle Hingucker: überladene Supportseiten, Formulare ohne klare Abläufe, Nutzende müssen selbst wissen welchen Kanal sie brauchen.
Die häufigste Fehlerquelle: zu viele Optionen ohne Kontextbezug. Ziel war ein reduziertes, kontextbezogenes Menü – an jeder Stelle im Prozess verfügbar.
Wireframes – Floating Kontaktbutton
Alle Kontaktmöglichkeiten sollten an einer Stelle gebündelt sein – damit Nutzende nicht nach dem richtigen Weg suchen müssen.
Ein Kontakt-Overlay, das jederzeit im Prozess aufgerufen werden kann, vereint alle Möglichkeiten sortiert und leicht erfassbar. Die Ausleitung auf Details ist direkt im Menü möglich, ebenso auf weiterführende Seiten.
Reduzierung der sichtbaren Optionen gibt Nutzenden die Möglichkeit, die für sie passende Kontaktmöglichkeit auszuwählen. An jeder Stelle im Prozess soll es die Möglichkeit für Kontakt geben.
FAQ & Ausleitung auf weiterführende Seiten
Neben dem Overlay gibt es die Möglichkeit, auf eine FAQ- oder Kontaktseite auszuleiten. Der Vorteil: mehr Platz zum Erklären – z.B. den Vorgang bei Beratungen.
Die Seite birgt aber die bei der Research beobachtete Gefahr der Überladung. Sie sollte daher gut strukturiert und durchsuchbar sein. Der Floating-Kontakt-Button bleibt auch auf dieser Seite sichtbar.
Overlay und Vollseite ergänzen sich: Das Overlay für schnellen Kontakt im Prozess, die FAQ-Seite für komplexere Fragen mit mehr Kontext.
Mobile Darstellung
Ein großer Vorteil des reduzierten Overlay-Menüs ist die Mobile Darstellung. Diese kann ohne große Anpassungen direkt übernommen werden – das Overlay-Prinzip funktioniert auf kleinen Viewports genauso wie auf großen.
Mobile-first-Kompatibilität als Argument für das kompakte Overlay. Kein separates Mobile-Konzept nötig – das spart Entwicklungsaufwand und hält das Erlebnis konsistent.
Next Steps
Die vorgeschlagene Lösung sollte im nächsten Schritt mit potenziellen Nutzenden vertestet werden. Die bereits erstellten Wireframes können direkt als Testgrundlage genutzt werden.
Dabei sollte auch die Frage nach dem Nutzendenverhalten bei einer Terminvereinbarung gestellt werden – und welche Informationen für die FAQ-Seite tatsächlich benötigt werden.
"Nutzende möchten individuelle Möglichkeiten, um schnell Fragen beantwortet zu bekommen."
Was dieses Projekt zeigt
Cognitive Walkthrough, Heuristiken, Konkurrenzanalyse – auch in ~8h wird nicht auf Struktur verzichtet.
Erst die Hypothese formulieren, dann gestalten. Jede Designentscheidung hat ein "Warum" dahinter.
Der nächste Schritt ist bereits mitgedacht: Die Wireframes sind direkt testbar – kein High Fidelity nötig für erste Erkenntnisse.
Vollständige Wireframes anfragen
Alle Wireframes (Desktop + Mobile) und weitere Details aus diesem Projekt teile ich gerne persönlich.
Details anfragen →