test

Deutsche Schadenshilfe

Die Deutsche Schadenshilfe ist das führende Unternehmen für faire und unabhängige Sachschadenabwicklung. Sie bildet sich aus einem Netzwerk aus erfahrenen Anwälten, Sachverständigen und Sanierungsunternehmen und unterstützt bei der erfolgreichen Abwicklung von Wasser-, Brand- oder Sachschäden. Den Großteil der Kunden akquiriert die Deutsche Schadenshilfe durch organisches Content-Marketing. Circa 200 Artikel bieten den Nutzern umfangreiche Hilfestellungen zur Sachschadenabwicklung.

Erst neulich wurde das Design der Website von einer Agentur mit langen Verzögerungen und zahlreichen Revisionen überarbeitet. Trotz der Überarbeitung blieb die gewünschte Erhöhung der Conversion Rate aus. Die Mission war klar: Ein professionelles Redesign, ausgelegt an den tatsächlichen Bedürfnissen der Nutzer, mit dem Ziel der optimalen Nutzererfahrung und Lead-Generierung.

Metadaten

Industrie
Insurance
Größe
10-20 Mitarbeiter
Projektwert
20.000€+
Verantwortung
    Strategie
    User Research
    User Experience
    User Interface
Tools
    Adobe XD
Zeitraum
2021 - 2022
Website besuchen

1

Analyse: Schritt 1 - Visuelle Identität

Das Design ist durch fehlende Struktur unbenutzbar

Das Design ist durch fehlende Struktur unbenutzbar

Der erste Eindruck

Der erste Teil meines mehrstufigen Vorgehensmodells umfasst eine detaillierte Analyse der Benutzeroberfläche. Dabei führe ich alle Optionen der Customer Journey aus, die die Webseite zu Verfügung stellt.
Es war schnell erkennbar, weswegen die Webseite nicht wie gewünscht konvertiert. Sie möchte durch den dunklen Blauton in Kombination mit Bildern, wie man sie von Versicherungen kennt, Vertrauen schaffen. Dieser erste Eindruck schwindet jedoch sofort durch eine nicht den Wünschen des Nutzers aufgebaute Struktur, überkomplexe visuelle Darstellungen, fehlerhafte Funktionalität und ein unattraktives Design.
Es existieren keine klaren Abstandsregeln

Es existieren keine klaren Abstandsregeln

Die Auswirkungen

Eine schlechte Navigation und unstrukturierte Inhalte gehören zu den Hauptursachen, warum Nutzer eine Webseite vorzeitig verlassen. Gepaart mit unzureichender und teils unlesbarer mobiler Darstellung und keinen einheitlichen Richtlinien bzgl. Farbton, Farbnutzung, Abständen und Schriftgrößen, schafft die Webseite keinen guten ersten Eindruck. Die Seite wirkt unstrukturiert aufgebaut, uneinheitlich gestaltet und für mobile Geräte mangelhaft.
Nutzer werten ein erstes Urteil der Qualität eines Produkts oder Unternehmens anhand des Designs. Produkte werden sogar als nutzbarer eingestuft, selbst wenn sie dieselbe Funktionalität, jedoch ein hochwertigeres Design vorweisen. Was vermittelt mir daher der unstrukturierte Aufbau der Webseite als Leser? Wie strukturiert und qualitativ hochwertig nehme ich die Deutsche Schadenshilfe wahr, wenn der Webauftritt einen anderen Ersteindruck verschafft? Dieses Problem gilt es zu lösen.

2

Analyse: Schritt 2 - Experience

Im zweiten Schritt habe ich eine UX-Analyse der Blogartikel durchgeführt. Blogartikel sind der wichtigste Lead-Aspekt der Webseite und erhalten somit den höchsten Fokus bei der Analyse. Dabei werden unter anderem folgende Fragen beantwortet:
  • Welche Informationen erhält der Nutzer über die Artikel?
  • Wird der Inhalt des Artikels schnellstmöglich kommuniziert?
  • Sind Conversion Elemente unterstützend oder störend umgesetzt?
  • Lassen sich Texte durch die richtige Formatierung effizient lesen?

Die Fehleranalyse enthielt über 60 verbesserungsfähige Punkte, die ausführlich kategorisiert, beschrieben und auf ihre Auswirkungen auf die Konversionsrate geschätzt wurden.

3

Analyse: Schritt 3 - Daten

Auswertung von Hotjar Recordings

Auswertung von Hotjar Recordings

Google Analytics & Hotjar

Im letzten Schritt der Analyse werden datenbezogene Tools wie Google Analytics oder Hotjar verwendet, um einen genaueren Einblick in das Nutzerverhalten zu erlangen. Hierbei werden folgende Fragen beantwortet:

  • Wie verhalten sich die Nutzer auf der Webseite?
  • Welche Abschnitte wecken das Interesse der Besucher?
  • Welche Abschnitte funktionieren nicht?
  • Was frustriert die Besucher?

Anhand der ersten drei Schritte lassen sich zielgerichtet Veränderungen vornehmen, die die Conversion Rate und weitere KPIs nachhaltig verbessern.

4

Lösungen Schritt 1 - Design System

Ich habe die in der Analyse gewonnen Erkenntnisse zusammengeführt und ein neues Konzept für das Design der Artikel erstellt. Zuvor habe ich ein minimalistisches Designsystem mit Farbwerten, Schriftarten und Abstandsregeln kreiert.
#005a9f
#0071c7
#0087ee
#d6ac02
#f1c102
#fedc56
#121520
#343c5c
#4b5683
Utopia

Utopia

Avenir LT Pro

Avenir LT Pro

5

Lösungen Schritt 2 - Hero neudesignen

Vorheriger Status

Das Hero Banner dient dazu, die wichtigsten Informationen kurz und prägnant zu präsentieren, um den Nutzern einen ersten Überblick zu verschaffen. Hier sieht der Nutzer jedoch nur zwei Bilder und Verlinkungen zu weiteren Artikeln, was keinen Mehrwert liefert. Nutzer müssen zudem einen langen Einleitungstext lesen und erhalten keine Angabe der Lesezeit oder Zusammenfassung in wenigen Wörtern. Der Nutzer wird gezwungen, Zeit zu investieren, ohne zu wissen, ob der Artikel einen Mehrwert für das Ziel des Nutzers bietet.
afterbefore

ALT

NEU

Nutzer erkennen im neuen Design den Mehrwert des Artikels

Neuer Status

Nutzer sehen mit einem Blick den Titel und in kurzen Stichpunkten den Inhalt des Artikels beschrieben. Des Weiteren wird eine prägnante thematische Einordnung via Breadcrumbs, Autoreninfo sowie Lesedauer bereitgestellt. Das erhöht nicht nur die Effizienz für eine schnelle Einordnung des Mehrwerts, sondern ebenfalls das Vertrauen in die Qualität des Artikels. Unterhalb des Banners befindet sich ein Inhaltsverzeichnis, damit der Nutzer ggf. den für sich besten Abschnitt anvisieren kann.
afterbefore

ALT

NEU

Das Inhaltsverzeichnis ist schnell scannbar

6

Lösung Schritt 3 - Leseerfahrung verbessern

Lesbarkeit

Nach Analyse der Customer Journey, User Experience und nutzerbezogener Daten stand fest, dass der Fokus zum Großteil auf der Lesbarkeit des Textes liegen muss. Daher wurde zur Verbesserung eine einfach zu lesende Schriftart sowie bessere Schriftgrößen und -skalierungen eingeführt. Abstände im Text sind effizienter, Zeilenlängen und -höhen wurden optimiert.
afterbefore

ALT

NEU

Die Lesbarkeit der Texte wurde auf zahlreichen Ebenen optimiert

Call to Action

CTAs wurden emotionaler gestaltet: Kurze, prägnante Stichpunkte in Kombination mit vertrauenswürdigen Bildern (Kunden und Berater) wecken Emotionen und schaffen Vertrauen.
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

7

Lösung Schritt 4 - Kontaktformular

Komplexität erkennen

Beim Kontaktformular handelt es sich tatsächlich um eines der anspruchsvollsten Komponenten, da das Formular die Schnittstelle zwischen Kunden und dem Unternehmen darstellt. Daher muss besonders viel Aufmerksamkeit auf die Optimierung gelegt werden.

Zeitaufwand

Der Nutzer muss zu viele Informationen wie Ansprache oder Vorwahl ausfüllen. Zudem nutzen viele Felder nicht die Autofill-Funktion, was den Zeitaufwand erheblich erhöht. Auch müssen Nutzer die Schadenshöhe einschätzen oder Angaben zum gewünschten Dienstleister machen. Diese Felder sollten optional werden oder Antwortmöglichkeiten wie „unklar“ zulassen.

Usability

Felder hängen nicht kategorisch zusammen und nehmen teils viel Platz ein, was einen unbalancierten Eindruck weckt. Einige Texte lassen sich kaum sehen und Checkboxen kaum anklicken.

Grafiken

Icons sind verpixelt und vermitteln den Eindruck von minderer Qualität. Das gewählte Hintergrundbild weckt falsche Emotionen und ist bei mobiler Ansicht nicht sinnvoll sichtbar.

Prozess

Keine klaren Informationen und Anweisungen: Telefonnummer und Öffnungszeiten stehen frei im Raum ohne Angaben zum Ansprechpartner. Des Weiteren werden keine Informationen vermittelt, wie es nach dem Ausfüllen des Formulars weitergeht: Wer ist der Empfänger? Wie ist der Prozess?

Diese Punkte wurden anhand folgender Fragen verändert:

  • Welche Benutzereingaben sind notwendig?
  • Welche Elemente müssen visuell betont werden?
  • Wie wird maximale Usability sichergestellt?
  • Wie lässt sich das gesamte Formular visuell ansprechend gestalten?
  • Wie wecken wir Vertrauen?
afterbefore

ALT

NEU

Das neue Kontaktformular ist deutlich vereinfacht und schafft Vertrauen

8

Lösung Schritt 5 - Weitere Seiten

Blog Archive

Die Blog-Archive wurden zu sehr im Stile einer Landingpage gestaltet. Dabei sollte das Hauptaugenmerk auf der Nutzerfreundlichkeit und insbesondere auf der einfachen Suchfunktion liegen. Nach der Änderung werden die wichtigsten Artikel via Leitfaden hervorgehoben. Die häufigsten Suchanfragen werden vorgeschlagen und die Suche wird in Echtzeit verlaufen. Nutzer können hierdurch zielgerichtet Inhalte filtern.

Homepage

Anhand der anfänglichen Analyse konnten Verbesserungen in puncto Nutzbarkeit, Kommunikation und Vertrauen umgesetzt werden.

Nutzbarkeit

Im Vordergrund steht die direkte Kommunikation mit dem Kunden. Die Homepage wird darüber hinaus zum Eingangspunkt für das gesamte Blogarchiv. Eine sticky Navigation erlaubt schnelles Finden relevanter Inhalte.

Kommunikation

Die Homepage benötigt mehr Informationen über das Unternehmen. Fragen wie „Wer sind wir?“, „Was machen wir?“ und „Was zeichnet uns aus?“ sollten eindeutig vermittelt werden.

Vertrauen

Um das Vertrauen der Kunden zu gewinnen, werden eine Vielzahl von Faktoren umgesetzt:

  • Wissensvermittlung, um Expertise zu symbolisieren
  • Vorstellung des Unternehmens
  • Reviews
  • Trust-Symbole
  • Links zu unabhängigen Bewertungsplattformen

Landing-Pages

Zuvor waren die Landing-Pages mit zu viel Text überlastet, der zudem noch unübersichtlich wirkte. Jetzt werden alle Vorteile auf einen Blick sichtbar und der Prozess der Schadensberatung besser visualisiert. Die Person im Hero Banner erweckt Vertrauen. Wichtige Inhalte sind per Sticky Navigation schnell erreichbar. Bewertungen von Nutzern runden den Vertrauensaufbau optimal ab.
afterbefore

ALT

NEU

Der Inhalt der Seite ist schnell erkennbar
afterbefore

ALT

NEU

Textliche Darstellungen wurden auf Leseeffizienz optimiert

9

Ausblick

Nächste Schritte

Das neue Design befindet sich derzeit in der Entwicklung (Stand: Dezember 2020). Im Anschluss an die Entwicklung muss ein fortwährender Gebrauch von Analyse-Tools gewährleistet sein. Auch sollen erste A/B-Tests durchgeführt werden, um beispielsweise verschiedene Conversion Elemente auf ihre Effektivität zu überprüfen. Währenddessen wird der Content kontinuierlich ausgebaut, um organisches Wachstum zu sichern. Weitere Design-Optimierungen oder Tools wie VideoAsk zur Kommunikation mit den Kunden können getestet werden.

Derzeitige Suche

Die derzeitige Suche ist sehr benutzerunfreundlich umgesetzt. Die Suchfunktion sollte als Kernbestandteil der Webseite optimiert werden. Hierzu gehört:
  • Eine kategorische Aufteilung der Ergebnisse
  • Eine fixe Anzahl an Ergebnissen ohne Scrollbar
  • Korrekt formatierte Markierungen der Suchergebnisse
  • Hintergrund-Overlay bei aktiver Suche zur Kontrastverbesserung
  • Highlights anvisierter Items
  • Ausblendung der CTAs in mobiler Ansicht, um visuelle Konkurrenz zu minimieren

Ich freue mich darauf, die Deutsche Schadenshilfe weiter bei diesen Schritten zu begleiten.

afterbefore

ALT

NEU

Die neue Suche berücksichtigt Intentionen des Nutzers
Prozessbeschreibung

Prozessbeschreibung

Reviews

Reviews

Kosten und Kostenübernahme

Kosten und Kostenübernahme

Vorteile der DSH

Vorteile der DSH

Thematisches Blog Archiv

Thematisches Blog Archiv

Thematische Landing-Page

Thematische Landing-Page

Blogartikel

Blogartikel

Hinweis: Aufgrund der hohen Nachfrage kann ich derzeit keine Start-ups unterhalb der Seed Stage supporten. Danke für dein Verständnis.