portfolio deutsche schadenshilfe dsh hero

Vielfacher Lead-Anstieg durch UX-Optimierung der Ratgeber-Website.

Die Deutsche Schadenshilfe unterstützt mit einem Netzwerk aus Fachleuchten bei der Regulierung von Schäden. Kunden finden das Unternehmen durch ein großes Angebot an Ratgeber-Artikeln.

Die Website wurde kürzlich von einer Agentur überarbeitet. Trotz der Änderung blieb die gewünschte Erhöhung der Conversions aus. Ich erstellte ein professionelles Redesign, ausgelegt an den tatsächlichen Bedürfnissen der Nutzer.

+300%

qualifizierte Leads

+150%

effektive Verweildauer

+50%

Interaktionen

Zeitraum
2021 - 2022
Industrie
Insurance
Wert
20.000€+
Aufgaben
  • Strategie
  • User Research
  • Usability Analyse
  • User Interface
Tools
  • Adobe XD
  • Trello
  • Elementor

Analyse der visuellen Identität

Unser Prozess beginnt aus Kundensicht.

Die Website gleicht einer Broschüre von Versicherungen. Sie schafft durch emotionale Bilder und der Wahl einer tiefblauen Farbe Vertrauen. Innerhalb von Sekunden beginnt dieser Eindruck zu verblassen. Du merkst schnell, dass hier etwas nicht ganz stimmt.

Die Struktur der Webseite wirkt, als wäre sie gegen deinen Instinkt des Surfens gestaltet. Informationen sind komplex und schwer verständlich. Die Navigation ist fehlerhaft und verwirrend.

Das Design ist durch fehlende Struktur unbenutzbar

Das Design ist durch fehlende Struktur unbenutzbar

Das Design ist durch fehlende Struktur unbenutzbar
Es existieren keine klaren Abstandsregeln

Es existieren keine klaren Abstandsregeln

Es existieren keine klaren Abstandsregeln

Nutzer verlieren sich, verlassen die Website und kommen nie zurück.

Die mobile Darstellung pendelt ähnlich zwischen 'unzureichend' und 'unlesbar'. Komponenten sind nicht angepasst.

Gleichzeitig fehlt ein Designkonzept. Farbtöne, Abstände und Schriftgrößen wirken unzusammenhängend.

Das Resultat: Der erste Eindruck der Webseite enttäuscht, statt zu begeistern.

Warum ist das wichtig? Wir beurteilen Qualität auch nach dem Design.

Bei zwei gleich funktionierenden Produkten wirkt das schönere Produkt auf uns nutzbarer.

Der Effekt ist auch gegenteilig anwendbar: Was sagt das Design über die Deutsche Schadenshilfe aus?

Wie professionell und organisiert arbeiten sie, wenn schon ihr Webauftritt konfus wirkt?

Dieser Eindruck ist ein Problem, das wir lösen müssen.

Analyse der Blogartikel

Blogartikel sind das Herzstück der Website.

Sie sind die wichtigste Anlaufstelle für Leads.

Daher müssen wir sie einer gründlichen Analyse unterziehen.

Das Ziel: Blogartikel so zu optimieren, dass sie ihre Aufgabe als Leadmagnet bestmöglich erfüllen. Der Fokus meiner Analyse liegt auf folgenden Fragen:

Das Ergebnis der Analyse ist eine Liste von 60 Faktoren, die eine negative Auswirkung auf die Konversionsrate haben. Ich kategorisiere sie, beschreibe sie ausführlich und priorisiere.

Quantitative Analyse

Zum Schluss der Analyse werte ich die Daten aus, die wir durch Google Analytics und Hotjar sammeln konnten.

Sie liefern Antworten auf Fragen wie:

Mit diesen wertvollen Einblicken nehmen wir gezielte Verbesserungen vor.

Dieser datenorientierte Ansatz der letzte Schritt in unserer Analyse.

Lösung Schritt 1: Design System

Ich wirke der chaotischen visuellen Identität entgegen und entwerfe ein minimalistisches Design System. Es enthält Richtlinien zu Farben, Schriftarten, Regeln für Abstände.

Alles ist perfekt aufeinander abgestimmt. Darauf basierend erschaffe ich Komponenten. Visuelle Bausteine, die wir jederzeit nutzen können.

Das Design der Homepage und der Blogartikel wirkt so klar und einheitlich.

#005a9f
#0071c7
#0087ee
#d6ac02
#f1c102
#fedc56
#121520
#343c5c
#4b5683
Utopia

Utopia

Utopia
Avenir LT Pro

Avenir LT Pro

Avenir LT Pro

Lösung Schritt 2: Blog Hero

Das Ziel eines Hero Banners: In kürzester Zeit die wichtigsten Informationen präsentieren.

Doch Nutzer sahen bisher nur zwei Bilder und Links zu anderen Artikeln. Sie mussten Zeit investieren, um die Relevanz für ihre Situation zu erahnen.

Im neuen Design ist der Titel des Artikels direkt sichtbar. Darunter befindet sich eine Zusammenfassung, eine thematische Einordnung und weitere Meta-Informationen. Unter dem Banner lädt ein Inhaltsverzeichnis dazu ein, direkt zum interessantesten Abschnitt zu springen.

Diese Informationen kommunizieren den Mehrwert des Artikels und stärken das Vertrauen in die Qualität.

afterbefore

ALT

NEU

Nutzer erkennen im neuen Design den Mehrwert des Artikels
afterbefore

ALT

NEU

Das Inhaltsverzeichnis ist schnell scanbar

Lösung Schritt 3: Leseerlebnis

Die Analyse hat klar gezeigt: Die Lesbarkeit des Textes muss verbessert werden.

Wir optimieren die Artikel durch eine leichter lesbare Schriftart. Dazu verbessern wir Schriftgrößen und -skalierungen sowie Textabstände, Zeilenlängen und -höhen.

afterbefore

ALT

NEU

Die Lesbarkeit der Texte wurde auf zahlreichen Ebenen optimiert

Lösung Schritt 4: Call to Action

Die CTAs der Website waren nicht überzeugend.

Ich gebe den Elementen ihr lang benötigtes emotionales Upgrade.

Sie kombinieren jetzt kurze Statements mit vertrauenserweckenden Bildern.

afterbefore

ALT

NEU

Call to Action mit einer erhöhten emotionalen Stufe
afterbefore

ALT

NEU

Auf Wunsch wurden einige CTAs in das moderne Design übernommen

Lösung Schritt 5: Kontaktformular

Kontaktformulare werden gern unterschätzt. Sie bieten jedoch eine hohe Angriffsfläche für handwerkliche Fehler.

Das ist fatal: Sie stellen die Brücke zwischen potenziellen Kunden und dem Unternehmen dar.

Im alten Design mussten Nutzer viele Informationen eingeben. Es existiert keine Autofill-Funktion. Das kostet Zeit und Nerven.

Einige Felder wie die geschätzte Schadenshöhe sind zu komplex, dass Laien sie ausfüllen können. Dazu wirkt das Formular unstrukturiert. Einige Elemente brauchen zu viel Platz, andere sind kaum erkennbar. Die verwendeten Icons wirken verpixelt und minderwertig. Das gewählte Hintergrundbild löst eher Ungewissheit aus und ist mobil nicht sichtbar.

Zudem fehlen Informationen: Wer ist mein Ansprechpartner? Was passiert nach Absenden des Formulars?

Alle Probleme lösen wir mit dem neuen Formular.

afterbefore

ALT

NEU

Das neue, vereinfachte Kontaktformular schafft Vertrauen

Lösung Schritt 6: Zusätzliche Seiten

Blog Archiv

Das Blog Archiv ist jetzt keine reine Auflistung mehr, sondern Teil des Funnels. Beliebte Artikel werden hervorgehoben. Gängigste Suchbegriffe vorgeschlagen. Die Suche läuft in Echtzeit ab, sodass Nutzer gezielt Inhalte filtern können.

Homepage

Die Homepage dient als Kurzbeschreibung des Unternehmens. Wer sind wir? Was machen wir? Was zeichnet uns aus? Diese Fragen werden beantwortet.

Kundenbewertungen und Trust Symbole werden gezielt eingesetzt. Die Homepage verweist zudem auf die Blog-Archive und beliebte Artikel.

Landing Pages

Landing Pages waren bisher mit langen Textpassagen gefüllt. Jetzt sind Texte scannbar. Der Prozess der Beratung ist besser visualisiert.

Die Person im Titelbild und die Nutzerbewertungen schaffen Vertrauen. Wichtige Inhalte sind über eine permanente Navigation schnell zugänglich.

Prozessbeschreibung

Prozessbeschreibung

Prozessbeschreibung
Reviews

Reviews

Reviews
Kosten und Kostenübernahme

Kosten und Kostenübernahme

Kosten und Kostenübernahme
Vorteile der DSH

Vorteile der DSH

Vorteile der DSH
Thematisches Blog Archiv

Thematisches Blog Archiv

Thematisches Blog Archiv
Thematische Landingpage

Thematische Landingpage

Thematische Landingpage
Blogartikel

Blogartikel

Blogartikel

Ausblick und nächste Schritte

Das neue Design soll mithilfe von A/B-Tests stetig verbessert werden.

Weitere Optimierungen wie der Einsatz von Tools wie VideoAsk sind ebenfalls denkbar.

Kleinere Design Hürden bleiben. WordPress erlaubt nativ keine benutzerfreundliche Suche.

Wir suchen nach einem 3rd-Party Plugin, dass diese Erfahrung verbessert.

Denkbar ist

Ich freue mich darauf, die Deutsche Schadenshilfe weiter auf diesem Weg zu begleiten.

afterbefore

ALT

NEU

Die neue Suche berücksichtigt Intentionen des Nutzers