One-Page Checkout vs. Multistep

Erhöhe die Conversion Rate durch Vereinfachung des Checkouts.

Der kritische Punkt in jedem Shop ist immer der Punkt wo es an das Portemonnaie des Kunden geht – der Bezahlvorgang.

Ziel ist es die Reibungsenergie zu minimieren. Es muss für den Kunden einfach bzw. mühelos wirken. Wir alle wissen warum wir gerne beim König des e-commerce kaufen 🙂

Leider vergraulen viele Online-Shops ihre fast neuen Kunden durch unnötige Formularfelder oder abschreckendes Design. Weniger ist hier immer mehr.

Für unseren Kunden Piercingline haben wir in den letzten Wochen einen neuen One-Page Checkout entwickelt. Die Herausforderung war hier, dass das genutzte Shopsystem von E-Vendo stark gekapselt ist. Trotzdem haben wir es geschafft auf einer Seite den One-Page Checkout zu gestalten.

One-Page Checkout

Abb: One-Page Checkout bei Piercingline

Der User soll auf den ersten Blick sehen, dass es einfach ist. Durch die leichte Ausblendung von Schritt 2 + 3 erkennt der User was auf ihn noch wartet. Gerade bei Neukunden ist diese Darstellung hilfreich, da sie bei einem Multi-Step Checkout nicht wissen was auf sie noch zu kommt.

Durch Animation wird die Eingabe der Formulardaten spielerischer. Zusätzlich unterstützt eine Live-Validierung der eingetragenen Daten den User. Durch einen grünen Haken bekommt der User gleich positives Feedback (Belohnung durch Bienchen-Effekt).

Abb: Live-Validierung von Formularfeldern

A/B Test

Unsere Erfahrung kann vieles besser machen. Jedoch sollte alles neue getestet werden. Deshalb haben wir den One-Page Checkout als einfachen A/B Test konzipiert. Durch einfache Änderung eines URL Parameters wird der alte Checkout eingeblendet. Damit können wir sehr gut messen wie viel besser der neue Checkout funktioniert. Wir nutzen dafür das kostenlose Tool Google Optimize.
Zusätzlich setzen wir in der Anfangsphase Mousetracking ein um den User besser zu verstehen.

Abb: Bisheriger Checkout mit vielen ablenkenden Elementen und Optionen