Weniger Friktion für bessere Conversion und mehr Spenden
Überblick
Bei diesem Pro-bono-Projekt habe ich Plan International unterstützt, eine NGO, die Spenden sammelt und Kinderpatenschaften anbietet, um Kindern in Not zu helfen.
Meine Aufgabe war es, Verbesserungsmöglichkeiten für den Checkout-Ablauf für Spenden und Patenschaften zu finden, mit einem Schwerpunkt auf der Conversion-Optimierung.
Basierend auf einer heuristischen Bewertung und einem Wettbewerbsvergleich habe ich den Checkout-Flow neu gestaltet, um ein reibungsloses Benutzererlebnis für bessere Conversion sowohl auf Mobilgeräten als auch auf Desktops zu bieten.
Ein einfaches und intuitives Checkout-Formular
Auf dem Desktop war eines der größten Probleme ein etwas überladenes Layout, das den verfügbaren Platz nicht optimal nutzte. Die daraus resultierende kognitive Belastung war wahrscheinlich ein Grund für den Abbruch des Checkout-Vorgangs.
Das neue Design mit klarer visueller Hierarchie. Unnötige Seitenelemente habe ich entfernt und ein einspaltiges Formularlayout mit weniger Feldern verwendet, um das Ausfüllen zu beschleunigen und zu vereinfachen.
Das Promi-Testimonial habe ich durch eine Spendenübersicht ersetzt, um Spender*innen zu ermutigen und die kognitive Belastung zu reduzieren.
Die Navigation zwischen den Prozessschritten ist jetzt intuitiver: Sie zeigt deutlich an, wo sich Benutzer*innen gerade befinden und wohin sie navigieren können.
Ein schlanker Prozess für schnelle Ergebnisse
Im Kontext der knappen Projektressourcen entschied ich mich für einen kurzen und schlanken Prozess, der es mir ermöglichte, mit den begrenzten Ressourcen maximale Ergebnisse zu erzielen:
- Heuristische Bewertung: Ich überprüfte den bestehenden Checkout-Ablauf anhand von Best Practices.
- Bericht und Strategie-Sitzung: Ich besprach die Ergebnisse mit meinem Kunden und schlug verschiedene Szenarien zur Verbesserung des Checkouts vor.
- Wettbewerbsvergleich: Ich führte eine Wettbewerbsanalyse vergleichbarer Checkout-Abläufe ähnlicher Organisationen durch. Dies half mir bei der Beantwortung von Fragen wie:
- Sollten wir einen mehrstufigen oder einen einstufigen Checkout verwenden?
- Wie gehen wir am besten mit Geschenkoptionen im Zusammenhang mit Spenden um?
- Interviews: Ich musste herausfinden, wie man am besten Vertrauen in einen Spenden-Checkout aufbaut. Also führte ich 5- bis 10-minütige Interviews mit aktuellen Spendern. Ich fragte sie nach ihren Zweifeln und welchen Informationen sie benötigten.
- Neugestaltung: Basierend auf den gesammelten Erkenntnissen gestaltete ich den Ablauf neu. Ich verwendete die Standardkomponenten des Frontend-Frameworks des Kunden, um den Entwicklungsaufwand gering zu halten.
Spender*innen im Checkout bestätigen
Der Kunde wünschte sich einen besonderen Fokus auf Vertrauensbildung im Checkout. Meine Hypothese war, dass es einen Unterschied zwischen Vertrauensbildung und -bestätigung gibt.
Vertrauen aufbauen oder bestätigen?
Menschen entscheiden sich vor dem Checkout-Prozess für oder gegen eine Organisation und dort muss Vertrauen aufgebaut werden.
Während des Checkouts brauchen Menschen eher die Bestätigung, dass sie das Richtige tun.
Mit Erkenntnissen aus den Nutzerinterviews habe ich ein Modell für die User Journey bei Spenden erstellt:
Landingpages müssen die Aufmerksamkeit der Spendenden fesseln, sie in der Überlegungsphase unterstützen und sie bis zur Entscheidung für eine Spende begleiten. Hier gilt es, Vertrauen aufzubauen, z. B. durch Erfahrungsberichte von Prominenten oder Transparenzhinweise.
Befinden sich die Spendenden im Checkout, ist die Entscheidung bereits gefallen. Wir möchten, dass die Spende abgeschlossen wird, der*die Spendende Wertschätzung erfährt und im Idealfall Loyalität entwickelt. Wir möchten die Entscheidung bestätigen durch Informationen zu:
- Wahl der Spende (Art und Betrag)
- Kündigungsmöglichkeiten und Steuerfragen
- häufigen Fragen und Antworten
Wie das neue Design Spender*innen in ihrer Entscheidung bestätigt
Die Neugestaltung zielt darauf ab, die Entscheidung der Spender*innen zu bestätigen durch
- emotionale Ansprache,
- das Beseitigen von Zweifeln,
- das Beantworten von Fragen, die im Checkout auftauchen.
Dazu habe ich das Promi-Testimonial entfernt und durch eine Spendenübersicht ersetzt, die die wichtigsten Fragen beantwortet:
- Wofür spende ich?
- Wie sieht es mit Zahlungen und Steuern aus?
Die Übersicht zeigt den Betrag und den Zweck der Spende – im Falle einer Kinderpatenschaft mit dem Foto des Kindes, um Emotionen zu wecken – sowie die Information, dass Zahlungen jederzeit gestoppt werden können und die Spende steuerlich absetzbar ist.
Ich habe unten auf dem Bildschirm einen FAQ-Bereich hinzugefügt, um mehr Platz für Informationen zu schaffen, die zuvor zwischen den Formularfeldern platziert wurden (z. B. welche Arten von Unternehmen spenden dürfen und welche nicht).
Auf diese Weise hat Plan International die Flexibilität, die FAQs anzupassen und zu ergänzen, ohne dass Layoutänderungen erforderlich waren. Gleichzeitig wirkt das Formular weniger überladen.
Die Navigation auf Mobilgeräten vereinfachen
Der ursprüngliche Checkout-Ablauf hatte einige Probleme mit der Navigation durch die verschiedenen Prozessschritte:
- es war unklar, wo man den Checkout beenden konnte
- beim Hin- und Herwechseln zwischen den Schritten wurden teils Schritte übersprungen
- die Fortschrittsleiste war auf Mobilgeräten nicht beschriftet, sodass Benutzer*innen nicht wussten, dass er interaktiv war.
Die Herausforderung bestand darin, eine gute Lösung für die Fortschrittsleiste auf Mobilgeräten zu finden.
Iterationen
Ich habe verschiedene Designs mit der vorhandenen Fortschrittsleiste ausprobiert. Auf dem Desktop war genügend Platz verfügbar, um die maximale Anzahl von Schritten anzuzeigen, ohne Platz wegzunehmen.
Auf Mobilgeräten war eine horizontale Fortschrittsanzeige zwar eine anständige Lösung, hatte aber zwei Nachteile:
- auf kleinen Bildschirmen mussten die Beschriftungen sehr kurz sein und wären noch immer zu klein, um für alle gut lesbar zu sein
- die Anzeige konnte maximal 5 Schritte enthalten, während empfohlen wird, in einigen Fällen einen sechsten Schritt für Geschenke einzubauen
Eine vertikale Anzeige hätte Platz für längere Beschriftungen und mehr Schritte geboten, aber zu viel Platz verbraucht
Meine Empfehlung
Ich habe am Ende eine zusammenklappbaren Anzeige entworfen, um alle Prozessschritte im Detail anzuzeigen.
- Im zusammengeklappten Zustand kann mit wenig Code die Anzahl der Schritte leicht aktualisiert werden, z. B. für Geschenke.
- Im ausgeklappten Zustand könnten Benutzer*innen leicht zwischen den Schritten navigieren. Die Schritte sind klar beschriftet, der Fortschritt ist markiert und die Anzeige verdeutlicht über unterstrichene Beschriftungen sowie durchgezogene Linien, wohin Benutzer*innen je nach Fortschritt navigieren können.
Videobeschreibung für die Navigation durch die Checkout-Schritte anzeigen
Das Video zeigt, wie ein*e Benutzer*in zwischen verschiedenen Checkout-Schritten navigieren kann. Zunächst ist die Navigationsanzeige eingeklappt, kann aber erweitert werden und es werden 3 Schritte sichtbar. Mit jedem abgeschlossenen Schritt aktualisiert die App die Anzeige, beispielsweise 2 von 6. Beim Durchlaufen des Checkouts und Auswählen einer Geschenkpatenschaft werden 3 neue Schritte hinzugefügt, sodass die erweiterte Navigationsanzeige nun insgesamt 6 Schritte anzeigt. Benutzer*innen können über diese Navigation zu vorherigen Schritten zurückkehren.
Weniger Ablenkung und mehr Conversions durch smarten Login & Kontoerstellung
Anmeldung und Gast-Checkout
Der bestehende Ablauf bot einen Gast-Checkout, einen PayPal-Checkout und eine Anmeldung in mehreren Schritten.
Das neue Design positioniert alle Auswahlmöglichkeiten in Schritt 1 nebeneinander und bietet eine klare visuelle Hierarchie auf der Anmeldeseite.
Kontoerstellung
„Es wurde beobachtet, dass die Unterbrechungen für eine zu frühe Kontoerstellung für Gastbenutzer*innen – vor oder mitten im Checkout-Prozess – einige Teilnehmer*innen zögern ließ und ihren Fortschritt beim Checkout stoppte.“
Baymard Institute (übersetzt)
Im bestehenden Ablauf kann der Benutzer in Schritt 2 des Prozesses ein Konto eröffnen. Die Vorteile werden wenig erklärt.
Das neue Design ermöglicht die Kontoerstellung im letzten Schritt, nachdem der*die Spendende den Bezahlvorgang abgeschlossen hat. Auf der Seite werden die Vorteile eines Kontos klar aufgelistet.
Das sagt mein Kunde
Möchtest du auch deine Conversionrate steigern?
Lass uns eine passende Strategie für deine Webseite in einem unverbindlichen 30-minütigen Kennenlerngespräch besprechen. Dort kannst du:
- über deine Ziele sprechen
- dazu eine kostenlose Strategieberatung erhalten und
- einen Preisrahmen und Zeitplan erhalten.
Informationen zur Verarbeitung deiner Daten findest du in meiner Datenschutzerklärung.