Wie wir für die VGH mit einem React.JS-Frontend und UX-Redesign die Abbruchraten in Versicherungs-Abschlussstrecken senkten

UI/UX-Design

Der Online-Abschluss komplexer Versicherungen scheiterte bei der VGH oft an langen, unübersichtlichen Formularen und entsprechend hohen mobilen Abbruchraten. Durch unsere Entwicklung einer dynamischen Web-Applikation auf Basis von React.JS und Bootstrap haben wir eine neue, interaktive Abschlussstrecke konzipiert, die Nutzer durch Live-Feedback führt und die Conversion Rate nachhaltig optimiert.

Projektübersicht

Kunde: VGH (Größter Versicherer Niedersachsens)
Branche: Finanzen & Versicherungen
Plattform: React.JS & Bootstrap (Dynamische Web-Applikation)
Herausforderung: Hohe Abbruchraten bei langen Formularen, fehlende mobile Usability
Lösung: Unser UX-Redesign der Verkaufsstrecke, Live-Feedback-Funktionen, UI-Komponenten-Bibliothek
Ergebnis: Intuitiver Vertragsabschluss, deutlich verbessertes Nutzererlebnis (Fast-Track-Gefühl), skalierbare Design-Basis

Ausgangssituation und Problem

Die VGH ist der größte regionale Versicherer Niedersachsens. Mit rund 4.600 Mitarbeitenden bietet das Unternehmen ein breites Spektrum an Schaden- und Personenversicherungen an. E-Commerce bedeutet im Finanzsektor für uns in erster Linie den reibungslosen Verkauf von Verträgen über digitale Interfaces.

Für den Abschluss einer Versicherung ist es klassischerweise notwendig, lange Formulare mit vielen spezifischen Fragen auszufüllen.

Typische Probleme in dieser Ausgangslage, mit denen die VGH auf uns zukam:

Besonders bei Online-Kunden führten unübersichtliche Formulare zu extrem hohen Abbruchraten (Bounce Rate).
Die bestehenden Abschlussstrecken waren auf mobilen Endgeräten (Smartphones) sehr schwer zu bedienen.
Nutzer fühlten sich bei der Dateneingabe allein gelassen, was Frustration und Unsicherheit auslöste.

Zielsetzung des Projekts

Unser Hauptziel war die konsequente Optimierung der VGH-Abschlussstrecke für alle Endgeräte (Mobile First). Konkret haben wir gemeinsam folgende Ziele definiert:

Eine deutliche Verbesserung der Conversion Rate durch einen geschickteren Aufbau der Verkaufsstrecke.
Benutzer sollen einfach, verständlich und Schritt für Schritt durch die komplexen Fragen geführt werden.
Schaffung einer skalierbaren Design-Basis, die der Kunde künftig auch für weitere Versicherungsprodukte nutzen kann.

Lösung und Architektur

Dieses Projekt zeigt uns einmal mehr: E-Commerce ist weit mehr als der klassische Warenkorb-Onlineshop. Um die Abbrüche drastisch zu reduzieren, entwickelten wir bei digital.manufaktur eine maßgeschneiderte, dynamische Web-Applikation.

Als technologische Basis setzten wir auf React.JS und Bootstrap. Diese Kombination ermöglicht es uns, hochgradig interaktive Frontends zu bauen, die ohne das ständige Neuladen von Webseiten auskommen (Single Page Application Ansatz). Der Nutzer erhält nun direkt während der Eingabe im Formular ein positives Feedback und interaktive Hilfestellungen (Inline-Validierung).

Umsetzung

Daten- und Marktanalyse: Zu Beginn werteten wir die bestehenden Abschlussstrecken sowie die genauen Absprungraten intensiv aus. Eine Marktanalyse verglich die Lösungen von Marktbegleitern und anderen Branchen (Benchmarking).
UX-Redesign: Auf Basis des bereits im Einsatz befindlichen KFZ-Rechners führten wir ein komplettes Redesign durch. Unsere modernen UI-Elemente sorgen nun für eine stringente Führung. Die Formulare wirken dadurch nicht mehr wie lästige Bürokratie, sondern vermitteln das positive Gefühl, „schnell erledigt“ zu sein.
Technologische Integration: Die von uns erstellten Screens und Prototypen programmierten wir als dynamische React-Anwendung und integrierten sie nahtlos in die bestehende IT-Umgebung der VGH.
Design-System: Wir stellten der VGH diverse zusätzliche Design-Komponenten zur Verfügung, die das Unternehmen künftig als Baukasten für weitere Produkte nutzen kann.

Ergebnisse und KPIs

Der von uns entwickelte Prototyp geht nun in die Phase der umfassenden Usability-Tests, hat aber die strategischen Weichen für die digitale Vertragsabwicklung der VGH bereits jetzt erfolgreich neu gestellt.

Optimiertes Nutzererlebnis: Die interaktive Führung und das sofortige Feedback erleichtern das Ausfüllen für den Endkunden enorm.
Vermeidung von Frustration: Nutzerfehler werden durch unsere Live-Validierung im Formular sofort erkannt und korrigiert, bevor der Nutzer die Seite überhaupt absenden will.
Zukunftssicheres Framework: Unsere React-Infrastruktur und die UI-Bibliothek dienen als solides Fundament für die weitere Digitalisierungs-Strategie des Versicherers.

«Wir sind sehr zufrieden mit dem Prototypen, den die digital.manufaktur für uns entwickelt hat. Nun sind wir gespannt auf die Ergebnisse des Usability-Tests und werden diese definitiv in unsere weitere Digitalisierungs-Strategie einfließen lassen. Dabei setzen wir auch weiterhin auf den Support von dmf – nicht zuletzt, weil auch die Zusammenarbeit mit dem Team von dmf sehr angenehm und das gesamte Projekt praktisch ein Selbstläufer war.»

Lars Peter Schierkolk

Abteilung MWV Marketing Werbung & Verkauf bei der VGH

Learnings und Best Practices

E-Commerce-Logik für Dienstleister: Checkout-Optimierung gilt für uns nicht nur für physische Produkte. Der Vertragsabschluss einer Versicherung ist im Grunde ein hochkomplexer E-Commerce-Checkout, auf den wir dieselben strengen UX-Regeln anwenden.
Live-Feedback schlägt lange Formulare: Wenn Nutzer erst ganz am Ende eines langen Formulars erfahren, dass sie in Zeile 3 einen Fehler gemacht haben, brechen sie ab. Unsere Erfahrung zeigt: Moderne JavaScript-Frameworks (wie React) ermöglichen Echtzeit-Validierung, was die Conversion massiv treibt.
Mobile-First bei Formularen: Auf dem Smartphone ist die Tastatur oft im Weg und die Übersicht gering. Wir präsentieren Formulare hier in extrem kleinen, leicht verdaulichen Schritten ("Häppchen").

FAQ: UX-Design & Web-Applikationen im Finanzsektor

Warum brechen Nutzer Formulare in Abschlussstrecken so häufig ab?

Die häufigsten Gründe, die wir in unseren Analysen identifizieren, sind kognitive Überlastung (zu viele Felder auf einmal), mangelnde mobile Optimierung (zu kleine Touch-Flächen), unklare Pflichtfelder und das fehlende Echtzeit-Feedback bei fehlerhaften Eingaben.

Was sind die Vorteile von React.JS für solche Abschlussstrecken?

React.JS ist ein JavaScript-Framework, das es uns ermöglicht, Benutzeroberflächen in modularen Komponenten aufzubauen. Es lädt Inhalte dynamisch nach, ohne dass der Nutzer die Webseite aktualisieren muss. Das sorgt für absolut flüssige Übergänge zwischen den Formularschritten und ermöglicht Funktionen wie unsere Live-Fehlermeldungen direkt bei der Eingabe.

Wie optimieren wir eine Verkaufsstrecke (Funnel) konkret?

Zunächst identifizieren wir über Web-Analyse-Tools die genauen Absprungpunkte (Drop-offs). Danach "entschlacken" wir die Strecke durch gezieltes UX-Design: Wir gruppieren logische Felder, nutzen Fortschrittsbalken (Progress Bars) zur psychologischen Motivation und ersetzen komplexe Texteingaben durch einfache, großflächige Klick-Buttons oder Dropdowns.

Fazit

Unser Projekt für die VGH beweist, dass der erfolgreiche Online-Vertrieb von Versicherungen elementar von der User Experience abhängt. Durch unsere fundierte Analyse von Absprungraten, das Redesign des KFZ-Rechners und die technologische Neuentwicklung über React.JS und Bootstrap verfügt die VGH nun über eine hochmoderne, dynamische Abschlussstrecke. Dieses intelligente UX-Konzept nimmt dem Nutzer die Hürde vor komplexen Formularen, führt ihn sicher durch den Prozess und legt den technologischen Grundstein für eine deutlich höhere Conversion Rate in der Zukunft.