Ausgangslage: Hoher Traffic, aber frustrierende Abbrüche

Unser Kunde ist ein etablierter B2B-Logistikdienstleister mit rund 250 Mitarbeitenden, der sich im DACH-Raum auf komplexe Supply-Chain-Lösungen spezialisiert hat. Trotz einer starken Markenbekanntheit und einer konsequenten Content-Strategie, die monatlich Tausende qualifizierte Besucher auf die Website lockte, stagnierte die Performance der wichtigsten Umsatzseite – der Pricing-Page – auf einem unbefriedigenden Niveau. Die Conversion-Rate lag unter 1,2 %, was für ein Unternehmen dieser Größe und mit diesem Traffic-Potenzial ein deutliches Signal für ineffiziente Ressourcennutzung war.

Die technische Analyse mittels GA4 und Hotjar offenbarte ein alarmierendes Muster: 68 % der Nutzer verließen die Seite bereits innerhalb der ersten 30 Sekunden. Dies deutete nicht auf technische Ladezeitenprobleme hin, da die PageSpeed-Scores im grünen Bereich lagen. Stattdessen identifizierte die Heatmap-Analyse einen massiven „Exit-Burst“ im oberen Viewport. Nutzer scrollten kaum, interagierten nicht mit den vorhandenen Elementen und klickten direkt auf den Browser-Back-Button oder schlossen den Tab. Die qualitative Auswertung der Session-Recordings zeigte, dass Entscheider aus der Logistikbranche nach sofortiger Orientierung suchten. Sie wollten wissen: Passt das Budget? Wie hoch sind die Grundkosten? Was versteckt sich hinter dem Label „individuelle Anfrage“? Die aktuelle Seite bot dazu nur vage Formulierungen und eine komplexe, undurchsichtige Konditionentabelle, die den ersten Überblick massiv erschwerte.

Das Kernproblem war die fehlende kognitive Klarheit im kritischen Moment der Entscheidungsfindung. Im B2B-Umfeld, wo Logistikleistungen oft als Commodities wahrgenommen werden, suchen Einkäufer nach schnellen Vergleichsmöglichkeiten. Wenn der Anbieter diese Transparenz im ersten Blick verweigert, wird er schnell als intransparent oder zu teuer eingestuft. Die bestehende Hero-Section mit generischen Claims wie „Ihr Logistikpartner für den DACH-Raum“ trug wenig zur Differenzierung bei und gab den Nutzern keinen Anhaltspunkt für die Kostenstruktur.

Herausforderungen im Projektverlauf

Die Umsetzung einer solchen tiefgreifenden Überarbeitung war mit mehreren spezifischen Herausforderungen verbunden, die über die reine Ästhetik hinausgingen:

  • Widerstand im Vertrieb gegen Preis-Transparenz: Die Vertriebsabteilung befürchtete, dass die Anzeige einer Preis-Spanne („ab 0,85 €“) den Verhandlungsspielraum einschränkt und zu Preiskämpfen führt. Es musste ein Kompromiss gefunden werden, der Transparenz bietet, ohne die individuelle Kalkulation zu gefährden.
  • Technische Komplexität des Rechners: Die Integration eines dynamischen Kostenrechners in die bestehende WordPress-Architektur erforderte eine enge Zusammenarbeit mit der Backend-Entwicklung. Die Logik musste so präzise sein, dass sie plausible Schätzungen liefert, ohne falsche Versprechen zu machen, die später im Vertrieb zu Reibungsverlusten führen könnten.
  • Balance zwischen Einfachheit und Detailliertheit: Die alte Tabelle enthielt viele technische Details (Schnittstellen, SLAs, Zusatzleistungen), die für den ersten Klick irrelevant, aber für die spätere Due Diligence wichtig waren. Diese Inhalte mussten so umstrukturiert werden, dass sie für Interessierte verfügbar bleiben, ohne die kognitive Last für Neukunden zu erhöhen.

Der Tech-Stack

Um die Hypothesen zu testen und die Ergebnisse zu messen, nutzten wir einen bewährten Stack:

  • Optimizely: Diente als A/B-Testing-Plattform zur Implementierung der Varianten und zur statistischen Auswertung der Testphasen.
  • GA4 (Google Analytics 4): Basis für die Messung der KPIs (Bounce-Rate, Engagement Time, Conversions) und die Segmente-Analyse nach Geräte- und Quellen-Typ.
  • Hotjar: Verwendet für qualitative Validierung durch Session-Recordings und Heatmaps, um das Nutzerverhalten vor und nach der Änderung zu vergleichen.
  • Figma: Für die Design-Prototypierung der neuen Hero-Section und der vereinfachten Preistabellen, um Stakeholder-Feedback frühzeitig einzuholen.
  • WordPress & Custom PHP/JS: Die technische Umsetzung des dynamischen Rechners und der aufklappbaren Detail-Elemente erfolgte direkt im CMS des Kunden.

Umsetzung: Von der Vagheit zur klaren Wertversprechen

Wir starteten mit einer intensiven User-Research-Phase. Interviews mit fünf potenziellen Entscheidern aus der Logistikbranche bestätigten unsere Annahmen: Transparenz ist der stärkste Conversion-Trigger. Daraus entwickelten wir ein CRO-Konzept, das auf drei Säulen basierte: sofortiger Preisanker, kognitive Entlastung und interaktive Kalkulation.

Projektverlauf in 5 Phasen: User-Research & Heatmap-Analyse (Hotjar/GA4), Konzept: Preis-Transparenz & Hero-Redesign, Umsetzung: 3 Pakete & dynamischer Rechner …

Schritt 1: Neugestaltung der Hero-Section. Wir ersetzten den generischen Claim durch eine klare, numerische Preis-Range-Anzeige: „Ab 0,85 € pro Sendung“. Diese Zahl wurde groß und prominent im oberen Viewport platziert. Direkt darunter integrierten wir einen dynamischen Kostenrechner. Dieser Rechner ermöglichte es Nutzern, drei einfache Parameter (Sendungsvolumen, Zielland, Service-Level) einzugeben und sofort eine ungefähre Kostenkalkulation zu sehen. Dies gab den Nutzern ein sofortiges Gefühl für die Kostenstruktur und signalisierte Offenheit.

Schritt 2: Vereinfachung der Preistabelle. Die bisherige, überladene Tabelle mit über 20 Zeilen wurde in drei klare Pakete umgestaltet: Basic, Pro und Enterprise. Jedes Paket zeigte die wichtigsten Inklusivleistungen und den jeweiligen Zielkunden. Alle technischen Details, Schnittschnittsbeschreibungen und feingranularen Konditionen wurden in ein aufklappbares „Mehr erfahren“-Element verschoben. Dies senkte die kognitive Last drastisch, da der Nutzer nur das sah, was für die erste grobe Einordnung relevant war.

Schritt 3: A/B-Testing der Call-to-Actions. Wir testeten zwei Varianten der Haupt-CTA. Variante A war der klassische Ansatz: „Kostenloses Angebot anfordern“. Variante B nutzte den Trigger des sofortigen Nutzens: „Jetzt Kosten berechnen“. Die Hypothese war, dass Variante B eine höhere Klickrate erzeugen würde, da sie den Rechner direkt aktiviert und dem Nutzer ein konkretes Ergebnis verspricht, statt nur einen Prozess (Anfrage) zu starten.

Alle Änderungen wurden über die Optimizely-Plattform implementiert. Wir nutzten ein sequenzielles Testverfahren, um die Interaktionen zwischen den Änderungen zu minimieren. Zunächst testeten wir die Hero-Section mit Rechner, dann die neue Tabellenstruktur und schließlich die CTA-Texte. Dies erlaubte es uns, die individuelle Wirkung jeder Komponente zu isolieren.

Wie wir die Zahlen messen

Die Messung erfolgte über einen Zeitraum von sechs Wochen nach dem Go-Live der finalen Variante. Als primäre KPI diente die Bounce-Rate der Pricing-Page, definiert als der Anteil der Sitzungen, die ohne weitere Interaktion endeten. Zusätzlich trackten wir die Engagement Time (Verweildauer) und die Conversion-Rate, definiert als die Anzahl der abgeschlossenen Formularausfüllungen mit validen E-Mail- und Telefonnummer, geteilt durch die Gesamtbesuche der Seite.

Um statistische Signifikanz zu gewährleisten, stellten wir sicher, dass das Traffic-Volumen konstant blieb und keine externen Kampagnen die Zahlen verfälschten. Die Daten wurden täglich in GA4 ausgewertet und wöchentlich in Hotjar qualitativ validiert, um sicherzustellen, dass die quantitativen Verbesserungen auch im Nutzerverhalten sichtbar wurden (z. B. mehr Interaktionen mit dem Rechner, längeres Scrollen).

Ergebnis: Signifikante Steigerung der Lead-Qualität

Nach Abschluss der Testphase zeigten die Daten eine signifikante Verbesserung der Nutzerinteraktion und der Geschäftsziele. Die Maßnahmen führten zu einer messbaren Steigerung der Lead-Qualität und -Menge.

Die Bounce-Rate auf der Pricing-Seite sank von 68 % auf 45 %, was einer relativen Reduktion von 34 % entspricht. Gleichzeitig stieg die Verweildauer auf der Seite um 22 % (von durchschnittlich 1:45 Minuten auf 2:10 Minuten), da Nutzer aktiver mit dem integrierten Rechner interagierten und die aufklappbaren Details nutzten.

Die Conversion-Rate für qualifizierte Leads (Anfrage mit E-Mail und Telefonnummer) stieg von 1,2 % auf 1,9 %. Dies bedeutete eine Steigerung der Lead-Generierung um 58 % bei gleichbleibendem Traffic-Volumen. Die Vertriebsabteilung meldete zudem eine höhere Qualität der Leads, da diese oft bereits mit einer konkreten Kostenkalkulation aus dem Rechner anriefen, was den Erstkontakt beschleunigte.

MetrikVorherNachherVeränderung
Bounce-Rate68 %45 %-34 %
Conversion-Rate1,2 %1,9 %+58 %
Verweildauer1:45 min2:10 min+22 %

Performance-Vergleich vor/nach CRO-Maßnahmen: Vorher-Nachher-Vergleich der Kennzahlen in %

Was wir heute anders machen würden

Rückblickend gibt es zwei Punkte, die wir in einem ähnlichen Projekt früher oder anders angehen würden:

  1. Frühere Einbindung des Vertriebs: Wir hätten den Vertrieb von Tag 1 an in die Design-Workshops eingebunden. Die Diskussionen um die Preis-Transparenz hätten früher geklärt werden müssen, um Verzögerungen in der Freigabeprozess zu vermeiden. Ein Workshop mit Vertriebsleitern und CRO-Experten hätte die Ängste vor Preiskämpfen schneller zerstreut.
  2. Mobile-First-Design für den Rechner: Der dynamische Rechner war auf Desktop-Devices hervorragend, aber auf mobilen Geräten war die Eingabe der Parameter umständlich. Heute würden wir den Rechner strikt Mobile-First designen, da immer mehr B2B-Einkäufer zunächst mobile Recherchen durchführen. Eine vereinfachte Mobile-Variante mit nur einem Parameter (z. B. nur Zielland) hätte die Conversion auf dem Smartphone wahrscheinlich weiter gesteigert.

Learnings für B2B-Logistik und CRO

Transparenz schlägt Vagheit im B2B-Bereich. Gerade bei commoditisierbaren Dienstleistungen wie Logistik suchen Entscheider nach schnellen Vergleichsmöglichkeiten. Ein klarer Preisanker im ersten Viewport reduziert die Unsicherheit drastisch und positioniert den Anbieter als selbstbewusst und kundenorientiert.

Komplexität muss nicht verschwinden, aber sie darf nicht im Weg stehen. Durch das Verschieben von Details in aufklappbare Bereiche konnten wir die Barriere für den ersten Klick senken, ohne die Informationsdichte für interessierte Nutzer zu verlieren. Dies ist ein klassisches Beispiel für progressive Disclosure, das in der B2B-Webentwicklung oft unterschätzt wird.

Ein dynamischer Rechner wirkt als Vertrauensbeweis. Er signalisiert, dass der Anbieter offen für eine transparente Kalkulation ist, was die Bereitschaft zur Kontaktaufnahme deutlich erhöht. Der Rechner ist mehr als ein Tool; er ist ein psychologisches Instrument, das die Machtbalance im ersten Kontakt zugunsten des Nutzers verschiebt, indem es ihm Kontrolle über die Kalkulation gibt.

Passend dazu