Antragsübersichtsseite – 4-Schritte-Flow
Konzeption und UI-Design einer übersichtlichen Abschlussseite für einen mehrstufigen Online-Antrag. Nutzer*innen sehen ihren Fortschritt im Stepper und können alle Angaben vor dem Absenden prüfen.
- wissen, wo im Prozess sie sich befinden,
- Fehler früh erkennen können,
- und vor dem Absenden Sicherheit über ihre Angaben haben.
- Produkt: Online-Antrag in einem Self-Service-Portal.
- Problem: Unsicherheit vor dem Absenden & unübersichtliche Zusammenfassung.
- Beitrag: Strukturierter 4-Schritte-Flow + klare Abschlussseite mit Korrekturpfaden.
Projektkontext & Rolle
Ausgangslage
Die Antragsübersichtsseite bildet den Abschluss eines mehrstufigen Online-Antrags. Nutzer*innen werden Schritt für Schritt durch die Eingabe geführt und sollen am Ende alle Angaben übersichtlich prüfen können, bevor sie den Antrag verbindlich absenden.
Meine Aufgaben
- Analyse der bestehenden Journey & Abbruchstellen
- Konzeption des 4-Schritte-Flows inkl. Abschlussseite
- UI-Design von Stepper, Formularblöcken und Zusammenfassung
- Erstellung eines klickbaren Figma-Prototyps für Reviews
Lösung & Seitenaufbau
Geführter 4-Schritte-Flow
Der Antragsprozess ist als Vier-Schritte-Flow mit Stepper umgesetzt:
- Schrittweise Dateneingabe statt „Formularwand“.
- Pro Schritt klare Felder, validierte Eingaben und Hilfetexte.
- Der Stepper zeigt jederzeit, wo sich Nutzer*innen befinden.
- Nach den vier Schritten folgt eine Übersichtsseite mit allen Angaben.
Übersicht & Korrektur-Möglichkeiten
Die Übersicht gruppiert alle Angaben nach Themenblöcken und macht das Prüfen leicht:
- Klare Abschnittstitel für die wichtigsten Themenbereiche.
- Zusammengefasste Kernangaben statt überladener Detaildarstellung.
- Sprunglinks zu den jeweiligen Schritten, um Felder gezielt zu korrigieren.
Ziel: Nutzer*innen sollen den Antrag mit einem sicheren Gefühl absenden, ohne Angst, etwas Wichtiges übersehen zu haben.
Prozess
1. Analyse der bestehenden Journey
Zum Start wurden der bestehende Antragsprozess und die Formularstrukturen analysiert:
- Wo brechen Personen ab?
- An welchen Stellen entstehen Rückfragen?
- Welche Felder sind kritisch oder besonders erklärungsbedürftig?
2. Flow & Informationsarchitektur
Auf dieser Grundlage wurden die Inhalte in vier nachvollziehbare Schritte gegliedert. Ziel: thematische Bündelung und Vermeidung von zu langen Formularseiten.
3. UI-Design & Microcopy
Klare Abschnittstitel, verständliche Hilfetexte und konsistente Fehlerdarstellung unterstützen Nutzer*innen während der Eingabe:
- Lesbare Typografie für lange Formulartexte.
- Fehler-States mit eindeutigen Hinweisen.
- Buttons und Links mit klaren Handlungsaufforderungen.
4. Review & iteratives Feintuning
Die Übersicht wurde mit internen Stakeholdern und Testnutzenden diskutiert. Auf Basis des Feedbacks wurden Gruppierungen, Bezeichnungen und Call-to-Action-Texte nachgeschärft.
Typografie & Farben
Typografie
Klare Lesbarkeit für lange Textzeilen in Formularen und Zusammenfassungen.
Wichtig war eine Hierarchie, die Nutzer*innen nicht überfordert:
- H1: „Antrag & Übersicht“ im Kontext des Produkts
- H2: Schritt- und Abschnittstitel im Flow
- Body: ruhige, gut lesbare Texte für Formularerklärungen
Farben
für Stepper, Haupt-CTAs und Fokus-Stati
für Sekundäraktionen & Hintergründe
für Formular- und Seitenhintergründe
Learnings
- Eine gute Antragsübersicht nimmt die Angst vor Fehlern: Wenn alle Angaben noch einmal nachvollziehbar gezeigt werden, senden Nutzer*innen mit mehr Vertrauen ab.
- Ein klarer Stepper reduziert mentale Belastung: Nutzer*innen wissen jederzeit, wo sie im Prozess stehen und was noch kommt.
- Frühe Abstimmung mit Fachabteilungen lohnt sich: So lassen sich Pflichtfelder, Formulierungen und Prüfregeln früh klären und spätere Schleifen vermeiden.