Analyse der visuellen Identität
Unser Prozess beginnt aus der Perspektive unserer Kunden.
Die Webseite gleicht einer Broschüre von Versicherungen. Sie schafft durch emotionale Bilder und der Wahl einer tiefblauen Farbe Vertrauen. Doch innerhalb von Sekunden beginnt dieser Eindruck zu verblassen. Es wird dir klar, 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 Seite und kehren nie zurück. Die mobile Ansicht? Leider nicht gut. Elemente sind nicht optimiert. Das Design fehlt es an Konzept: Farbtöne, Abstände und Schriftgrößen wirken nicht stimmig. Das Ergebnis? Ein erster Eindruck, der enttäuscht.
Der Grund: Wir bewerten Qualität auch nach Design. Zwischen zwei gleich funktionierenden Produkten wählen wir das optisch ansprechendere. Dieser Effekt kehrt sich auch um: Was sagt das Design über die Deutsche Schadenshilfe aus? Wie professionell sind sie, wenn ihre Webseite unübersichtlich ist?
Das müssen wir korrigieren.
Analyse der Blogartikel
Blogartikel sind das Herzstück der Website. Sie sind die Quelle der Leads. Und das Ziel: Sie so zu optimieren, dass sie ihre Aufgabe als Lead-Magnet erfüllen.
Ich habe eine Analyse entwickelt, die folgende Faktoren untersucht:
- Kommuniziert der Artikel seinen Hauptinhalt schnell?
- Welche Informationen bekommen Leser aus den Artikeln?
- Unterstützen oder stören die Conversion-Elemente den Lesefluss?
- Lässt sich der Text durch gutes Formatierungsdesign effizient lesen?
Was dabei rauskam, ist eine Liste mit 60 Faktoren, die die Conversion-Rate negativ beeinflussen.
Ich kategorisiere, beschreibe und priorisiere sie.
Quantitative Analyse
Am Ende der Analyse überprüfe ich die Daten, die wir durch Google Analytics und Hotjar gesammelt haben.
Die beantworten Fragen wie:
- Wie bewegen sich die Nutzer durch die Website?
- Welche Bereiche ziehen sie an?
- Wo gibt es Lücken, die sie meiden?
Mit diesen wertvollen Insights nehmen wir gezielte Verbesserungen vor.
Das ist der letzte Schritt in unserer Analyse.
Lösung Schritt 1: Design System
Ich räume mit der chaotischen visuellen Identität auf und designe ein minimalistisches System.
Es enthält Guidelines zu Farben, Schriftarten und Abstandsregeln. Alles passt zusammen.
Auf dieser Basis erschaffe ich Komponenten – visuelle Bausteine, die wir jederzeit nutzen können.
So entstehen das Design der Homepage und der Blogartikel klar und einheitlich.
Lösung Schritt 2: Blog Hero
Ein Hero Banner soll in kürzester Zeit die wichtigsten Infos präsentieren. Doch bisher haben Nutzer nur zwei Bilder und Links gesehen, ohne klare Relevanz für ihre Situation.
Das neue Design zeigt den Titel des Artikels direkt an, darunter gibt es 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 Infos kommunizieren klar den Wert des Artikels und stärken das Vertrauen in seine Qualität.
vorher
nachher
vorher
nachher
Lösung Schritt 3: Leseerlebnis
Die Analyse zeigt deutlich: Die Lesbarkeit des Textes muss verbessert werden.
Wir optimieren mit einer besser lesbaren Schriftart. Auch Schriftgrößen, Skalierungen sowie Abstände und Zeilenlängen und -höhen werden verbessert.
vorher
nachher
Lösung Schritt 4: Call to Action
Die CTAs der Seite wirkten nicht überzeugend.
Jetzt bekommen sie ihren emotionalen Boost mit kurzen Statements und vertrauenswürdigen Bildern.
vorher
nachher
vorher
nachher
Lösung Schritt 5: Kontaktformular
Kontaktformulare werden oft unterschätzt und bieten reichlich Raum für Fehler. Doch sie sind der direkte Draht zwischen Kontaktformulare werden oft unterschätzt, obwohl sie die Brücke zwischen potenziellen Kunden und dem Unternehmen darstellen.
Das alte Design verlangte viele Infos, ohne Autofill-Möglichkeit – ein Zeit- und Nervenfresser.
Einige Felder, wie die geschätzte Schadenshöhe, sind für Laien zu kompliziert. Dazu wirkte das Formular unstrukturiert: Manche Elemente beanspruchen viel Platz, andere sind kaum erkennbar. Die Icons wirken verpixelt und das Hintergrundbild löst Ungewissheit aus und ist mobil nicht sichtbar.
Auch fehlen Infos: Wer ist mein Ansprechpartner? Was passiert nach dem Absenden des Formulars?
All diese Probleme lösen wir mit einem neuen Formular.
vorher
nachher
Lösung Schritt 6: Zusätzliche Seiten
Blog Archiv
Das Blogarchiv ist jetzt keine simple Liste mehr, sondern ein Teil des Funnels. Beliebte Artikel werden hervorgehoben, gängige Suchbegriffe vorgeschlagen. Die Suche funktioniert in Echtzeit, sodass Nutzer gezielt Inhalte filtern können.
Homepage
Die Homepage beschreibt das Unternehmen: Wer wir sind, was wir tun, was uns auszeichnet – alles beantwortet.
Kundenbewertungen und Trust-Symbole werden gezielt eingesetzt. Die Homepage verweist zudem auf die Blog-Archive und beliebte Artikel.
Landing Pages
Landing Pages waren früher lange Textwüsten. Jetzt sind sie kompakt. Der Beratungsprozess ist besser visualisiert.
Die Person im Titelbild und die Nutzerbewertungen schaffen Vertrauen. Wichtige Inhalte sind über eine permanente Navigation schnell auffindbar.
Ausblick und nächste Schritte
Das neue Design wird durch A/B-Tests kontinuierlich verbessert.
Weitere Optimierungen, wie der Einsatz von Tools wie VideoAsk, sind ebenfalls denkbar.
Kleinere Design-Hürden bleiben: WordPress erlaubt keine benutzerfreundliche Suche.
Wir suchen nach einem Drittanbieter-Plugin, das diese Erfahrung verbessert.
Denkbar ist
- Highlights zum Anvisieren von Elementen
- eine kategorische Aufteilung der Ergebnisse
- eine feste Anzahl von Ergebnissen ohne Scrollleiste
- korrekt formatierte Hervorhebungen der Suchergebnisse
- einen Hintergrund-Overlay zur Verbesserung des Kontrasts
Ich freue mich darauf, die Deutsche Schadenshilfe weiter auf diesem Weg zu begleiten.
vorher
nachher