Case Study: UX/UI für den neuen Antragsrechner der Freeyou Gegenstandsversicherung

UX/UI für den neuen Antragsrechner der Freeyou Gegenstandsversicherung

Neue Frontend-Architektur, frischer Rebrush, erstes neues Produkt – und alles parallel. Ich habe bei Freeyou den Antragsrechner der Gegenstandsversicherung von Grund auf konzipiert: als technisches und gestalterisches Fundament für alle kommenden digitalen Produkte.

UX/UI Design | Process Design | Research | Prototyping

Projektübersicht

Im Zuge der Produkterweiterung von Freeyou übernahm ich die Verantwortung für die Konzeption und Gestaltung des neuen Antragsrechners der Freeyou Gegenstandsversicherung. Ziel war es, einen modernen, intuitiven und skalierbaren digitalen Antragsprozess zu schaffen, der sich nahtlos in das bestehende Kundenportal und die Website integriert. Das Projekt wurde gemeinsam mit einem crossfunktionalen Team aus Produktmanagement, Entwicklung, Marketing und der Designagentur Hyperfocus umgesetzt.

Ausgangssituation & Herausforderung

Freeyou plante, neben der bestehenden Fahrrad- und Kfz-Versicherung, ein weiteres Produkt – die Gegenstandsversicherung („Gadget“) – einzuführen. Das bisherige System war jedoch stark auf ein einzelnes Produkt ausgerichtet und nicht skalierbar.
Gleichzeitig stand eine umfassende technische Umstrukturierung an, wodurch neue Frontend- und Backend-Architekturen geschaffen wurden.

Die größte Herausforderung bestand darin, eine universell erweiterbare Antragsstrecke zu entwickeln, die sowohl visuell als auch technisch zukunftsfähig war. Zudem sollte die UX klar, motivierend und im Einklang mit der gerade frisch überarbeiteten Markenidentität stehen.

Zielsetzung

  • Nahtlose Integration des neuen Rechners ins Kundenportal und die Freeyou-Website
  • Optimierte User Experience: Schnell, klar, motivierend
  • Skalierbare Architektur: Grundlage für zukünftige Antragsstrecken und Produkte
  • Konsistentes Markenbild: Umsetzung des neuen CI/CD in allen UI-Elementen
  • Steigerung der Conversion-Rate durch klare Struktur und reduzierte Komplexität

Research & Insights

Zu Beginn führte ich eine umfassende Markt- und Wettbewerbsanalyse durch. Mit Hilfe von Mobbin.com, KI-Tools und vergleichenden Benchmark-Analysen untersuchte ich bestehende digitale Antragsstrecken in der Versicherungsbranche.

Ergänzend wurden interne Interviews mit Produktverantwortlichen und Kundenservice-Teams durchgeführt, um ein fundiertes Verständnis über Schwachstellen und Verbesserungspotenziale zu gewinnen. Die Ergebnisse flossen in die Erstellung von User Journeys, Personas und strukturierten UX-Flows ein.


Key Insights

  • Nutzer:innen wünschen sich klare Schritte und visuelles Feedback
  • Zu viele Pflichtfelder erhöhen die Abbruchrate signifikant
  • Der visuelle Stil beeinflusst das Vertrauen und die Abschlussbereitschaft direkt
Research

UX-Strategie & Designprozess

Auf Basis der Research-Ergebnisse entwickelte ich den kompletten UX- und UI-Prozess in Figma — von den ersten Wireframes bis zu den High-Fidelity Prototypen.

Zentrale Elemente des Designprozesses

  • Entwicklung einer Wizard-Logik für den Antragsprozess
  • Gestaltung einer visuellen Progress-Bar in Kreisform
  • Einsatz von dynamischen Tarif-Slidern zur Tarifauswahl
  • Erstellung einerZusammenfassungsseite mit interaktiven Bearbeitungsoptionen
  • Nahtlose Übergänge und visuelle Micro-Interactions zur Erhöhung der Motivation


Parallel wurde der neue Corporate Rebrush von Freeyou durch Hyperfocus implementiert.
Ich konnte die neuen CI/CD-Elemente (Farben, Icons, Typografie, Emoji-Integration) direkt in die UX-Struktur übertragen und in wiederverwendbare Figma-Komponenten überführen.

Designlösungen

Der neue Antragsrechner zeichnet sich durch eine Reihe klarer UX- und UI-Lösungen aus, die sowohl die Bedienbarkeit als auch das emotionale Nutzererlebnis verbessern. Dabei standen Verständlichkeit, Motivation und Konsistenz im Vordergrund.

Strukturierte User Flows

Der gesamte Antragsprozess wurde als klar geführter Wizard aufgebaut. Nutzer:innen sehen jederzeit, wo sie sich befinden und welche Schritte noch folgen. Optionalfelder und Pflichtangaben sind visuell differenziert, um kognitive Belastung zu reduzieren.

Gadget Wizard
Tarifslider

Dynamischer Tarif-Slider

Ein zentrales interaktives Element ist der Tarif-Slider, der es Nutzer:innen ermöglicht, schnell zwischen verschiedenen Preis- und Leistungsmodellen zu wechseln. Die Live-Anzeige der jeweiligen Tarifdetails schafft Transparenz und Vertrauen, ohne dass zusätzliche Klicks nötig sind.

Visuelle Progress-Bar

Die runde Progress-Bar visualisiert den Fortschritt innerhalb der Antragsstrecke auf intuitive Weise. Anstatt eines klassischen Balkens wurde ein Kreis eingesetzt – als Symbol für Vollständigkeit, Zugehörigkeit und die Markenidentität von Freeyou.

Progress-Bar
Gadget Conversion

Zusammenfassungsseite

Am Ende jeder Antragsstrecke steht eine übersichtliche Zusammenfassung aller gewählten Angaben. Hier können Nutzer:innen ihre Daten prüfen und bei Bedarf direkt anpassen, ohne die gesamte Strecke erneut durchlaufen zu müssen. Dieses Muster senkte die Abbruchquote signifikant und verbesserte das Vertrauen in den Prozess.

Adaptive Visualisierung & Feedback

Visuelle Micro-Interactions und sanfte Animationen geben Feedback über erfolgreiche Eingaben oder abgeschlossene Schritte. So bleibt der Flow aktiv, ohne die Aufmerksamkeit zu stören – ein wichtiger Aspekt für eine positive, moderne User Experience.

Components in Figma

Konsistente Design Patterns

Durch den Einsatz eines modularen UI-Systems in Figma wurden alle Komponenten dokumentiert und wiederverwendbar aufgebaut. Diese Vorgehensweise ermöglicht eine zügige Skalierung zukünftiger Rechner und sichert die visuelle Konsistenz über alle Produkte hinweg.

Gadget Overview

Visuelle Sprache & UI-Design

Mit dem neuen Antragsrechner wurde die digitale Markenidentität von Freeyou erstmals konsistent über alle Produkte hinweg erlebbar. Zentraler Bestandteil der visuellen Sprache ist der Kreis als Symbol für Fortschritt und Kontinuität, der sich als rotes Leitmotiv durch die gesamte Strecke zieht – etwa in der runden Progress-Bar und als zentraler visuell-emotionaler Anker für Schutz und Sicherheit.

Design Highlights

  • Integration des Rebrush-Designs in alle UI-Komponenten
  • Einsatz von Emojis zur Auflockerung der Kommunikation
  • Farbliche Akzente für positive Aktionen (z. B. Fortschritt, Bestätigung, Tarifwahl)
  • Modularer Aufbau für schnelle Reproduktion zukünftiger Rechner

Zusammenarbeit & Umsetzung

Das Projekt wurde agil in einem crossfunktionalen Team umgesetzt. In enger Zusammenarbeit mit Entwicklern, Product Ownern, Scrum Master und der Agentur Hyperfocus als externem Designpartner konnten Designentscheidungen schnell getestet und iterativ angepasst werden.

Prozess Highlights

  • Dual Track Agile: Design & Entwicklung liefen parallel
  • Nutzung einer Storybook-Instanz für schnelle visuelle Abnahmen
  • Regelmäßige Testing-Loops zur Verifikation der UX-Hypothesen
  • Direkte Kommunikation über Jira & Figma-Kommentare
Gadget all Screens

Ergebnisse

Der neue Antragsrechner der Freeyou Gegenstandsversicherung wurde erfolgreich gelauncht und diente als Prototyp und Blaupause für alle kommenden Produkte. Er ermöglicht eine einfache, transparente und markenkonsistente Nutzererfahrung – sowohl für Neukunden als auch für Bestandskunden.

Outcomes

  • +20 % Conversion-Steigerung in den ersten 30 Tagen
  • Signifikante Reduktion der Support-Anfragen im Antragsprozess
  • Optimale Integration ins Kundenportal
  • Positive Resonanz intern (Marketing, Dev) und extern (Kund:innen-Feedback)
  • Etablierung eines skalierbaren Designsystems in Figma

Learnings

Das Projekt zeigte eindrücklich, wie stark UX-Design, Prozessmanagement und Technologie ineinandergreifen müssen, um nachhaltige Kundenerlebnisse zu schaffen.

  • Enge Abstimmung mit Entwicklungsteams ist entscheidend für Time-to-Market und Effizienz
  • Visuelle Sprache stärkt Markenbindung messbar
  • Dynamische UI-Elemente wie Tarif-Slider oder Progress-Bars erhöhen Motivation
  • Agiles Arbeiten fördert schnelle Validierung und hohe Produktqualität
Screen 01
Screen 02
Screen 03
Screen 04
Screen 05
Screen 06
Screen 07
Screen 08
Screen 09
Screen 10
Screen 11
Screen 12
Screen 13
Screen 14
Screen 15
Screen 16
Screen 17
Screen 18
Screen 19
Screen 20
Screen 21
Screen 22
Screen 23
Screen 24

Takeaway

Der neue Antragsrechner der Freeyou Gegenstandsversicherung steht exemplarisch für modernes, agiles UX-Design im InsurTech-Kontext.
Er zeigt, wie durch Research, klare UX-Struktur und markenbewusste UI-Gestaltung eine skalierbare Lösung entsteht, die sowohl Nutzer:innen begeistert als auch die internen Prozesse effizienter gestaltet.

Alle Projekte Nächstes Projekt