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
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:
- Welche Informationen erhalten Leser aus den Artikeln?
- Kommuniziert der Artikel seinen Kerninhalt so schnell wie möglich?
- Unterstützen oder stören die eingebauten Conversion-Elemente den Lesefluss?
- Lässt sich der Text durch gutes Formatierungsdesign effizient lesen?
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:
- Wie navigieren die Nutzer durch die Webseite?
- Welche Seitenbereiche ziehen die Besucher an?
- Wo gibt es Lücken, die die Nutzer eher meiden?
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.
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.
vorher
nachher
vorher
nachher
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.
vorher
nachher
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.
vorher
nachher
vorher
nachher
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.
vorher
nachher
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.
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
- eine kategorische Aufteilung der Ergebnisse.
- eine feste Anzahl von Ergebnissen ohne Scrollleiste
- korrekt formatierte Hervorhebungen der Suchergebnisse
- einen Hintergrund-Overlay zur Verbesserung des Kontrasts
- Highlights zum Anvisieren von Elementen
- das Ausblenden von Elementen in der mobilen Ansicht
Ich freue mich darauf, die Deutsche Schadenshilfe weiter auf diesem Weg zu begleiten.
vorher
nachher