Optimieren einer Checkout Experience

Sobald der User sich für ein Produkt entschieden hat und auf den CTA “Kaufen” (“Checkout” oder ähnliches) klickt beginnt der Check-out Prozess. Es sind die letzten Klicks, die ein User auf der Webseite macht und es sind die letzten die über Kauf oder Abbruch entscheiden.
Und es ist der Teil im Kaufprozess, der am meisten vom User erwartet. Hier müssen Formulare ausgefüllt werden. Adressen, Kontaktdaten, Zahlungsangaben sind alles sensible Angaben, die man als User nur bewusste teilen will.
Der Checkout-Prozess ist damit also die letzte Möglichkeit für den User eine gute Experience und Vertrauen ins Unternehmen zu schaffen.


SHORTY

💡 SCOPE : Bestehenden Checkout Prozess eines Onlineshops optimieren

💫 PROJEKTRAHMEN : Re-Design und Weiterentwicklung des Onlineshops

📝 MEINE AUFGABE : UX-Recherche, UX-Design, UI-Design und Prototyping mit Figma

🕞 PROJEKTUMFANG : Zwei Wochen


1.Umfang

Für einen Kunden aus der IT-Sicherheitsbranche hatte ich die Aufgabe den Onlineshop, mit Informationsarchitektur, Navigation, 404-Seiten, Suche und Checkout-Prozess userzentriert zu optimieren. In dieser Case-Study befasse ich mich ausschließlich mit dem Checkout-Prozess onsite, vom Produkt in den Warenkorb legen, bis zum letzen Kaufen-Button.
Ziel der Optimierung sind weniger Abbrüche im Kaufprozess und eine erhöhte Anzahl an Anmeldungen.

2. Recherche

In dieser Phase geht es darum Userbedürfnisse und Business Needs kennenzulernen und das Problem zu verstehen.

Steakholder Interviews

Im Rahmen des Projekts habe ich Steakholder Interviews durchgeführt, um den Kunden, seine Bedürfnisse und Businessziele kennen zu lernen. Zudem habe ich die Interviews genutzt, um aus Steakholdersicht einen Eindruck von den Usern zu bekommen. Die Interviews habe ich nach Themenbereichen geclustert.

Clustering der Interviews mit Post-its.


💡 INSIGHT: Der Kunde arbeitet im Bereich IT-Sicherheit und verkauft im Onlineshop Firewalls und Lizenzen. Da diese zwischen 1-und 5 Jahre laufen, wird der Onlineshop von Usern selten mehrfach in kurzer Zeit aufgesucht. Die meisten kommen einmal, vielleicht zweimal und danach über Jahre nicht mehr in den Shop.

Es gibt zwei Usergruppen, die sich alle im B2B Bereich befinden: Die eine Gruppe sind Angestellte, die für ihr Unternehmen eine Firewall kaufen und die zweite Gruppe sind Reseller, die das Produkt gegebenfalls mit Dienstleistung weiterverkaufen.

Die erste Gruppe „Business“ beschäftigen sich nicht gerne mit dem Thema Firewalls. Da es gesetzliche Vorgaben gibt, müssen sie sich mit dem Thema beschäftigen. Sie wollen den Kauf schnell abhaken und sich nicht sonderlich tiefgehend damit beschäftigen. Viele Kunden kontaktieren bei Fragen das Unternehmen direkt per Telefon. Die meisten Fragen beziehen sich auf Lizenzen und deren Verlängerungen.

Heuristische Inspektion

Danach habe ich mir den aktuellen Checkoutprozess mit allen dazugehörigen Seiten angesehen, um vorhandene Usability Probleme zu identifizieren.

Anmeldemaske IST Zustand

Step 1: Inkorrekte Angabe in der Progress-Bar. Hier steht Warenkorbübersicht, User befinden sich aber schon bei der Anmeldung. Auf den Warenkorb können sie erst wieder am Ende der Journey zugreifen. Es gibt keinen Link „Passwort vergessen“, der Usern hilft sich selbst zu helfen. Stattdessen findet sich im Inputfeld ein kleines Fragezeichen. User erfahren nur, was es bedeutet, wenn sie mit der Maus darüber hovern. Damit ist diese wichtige Funktion nicht eindeutig beschrieben und schwer zu finden für User. Diese Lösung funktioniert nicht mobil und ist nicht barrierefrei.

Step 2: Kontaktdaten, Persönliche Daten und Adressdaten ausfüllen. Das Formular ist erst auf Zoomgröße 50% ganz zu sehen.

Step 2: Das Formular ist viel zu lang. Besser wäre eine Aufteilung auf mehreren Seiten bei dem nur das abgefragt wird, was wirklich notwendig ist. Auch hier ist der Kontrast zu niedrig. Außerdem sorgen die Kästen hinter den Inputs für eine erschwerte Lesbarkeit. Die Label der Inputs befinden sich innerhalb der Eingabe. Label sollten aber besser oberhalb platziert werden.

Step 3: Versand und Zahlungsart

Step 3: User bekommen suggeriert am Versand etwas einstellen zu können. Zudem sehen User keine Kosten für den Versand.

Step 4: Überprüfen

Step 4: Die Mehrspaltige Übersichtsseite ist sehr unübersichtlich. Einspaltige Formulare können vom Gehirn einfacher verarbeitet werden.  Bei mehreren Spalten wandern die Augen im Zickzack, deswegen ist es besser die Augenbewegung von links nach rechts zu minimieren.

User Kennenlernen

Leider war es in dem Rahmen nicht möglich, richtige User-Interviews oder Beobachtungen durchzuführen. Zugang hatte ich lediglich zu analytischen Daten und Verhaltensabbildungen durch Hotjar. Aus diesem Grund habe ich Guerilla Interviews arrangiert, bei dem mir die Befragten den Ablauf beschreiben sollten, wenn sie etwas kaufen. Befragt habe ich Freunde und Verwandte zwischen 30 und 65 Jahre. Ich wollte zu einem Wissen, wie User zu Gastbestellungen stehen und zum anderen, ob es typische Verhaltensweisen oder Probleme gibt.

Die meisten Befragten bestellen am liebsten als Gast, insbesondere bei Erstbestellungen. Viele User bevorzugen gewöhnlich den Fast Check-out mit Direktbezahlung über PayPal, da sie hier bereits ihre Daten hinterlegt haben und sich so die Formulareingaben sparen. In unserem Fall handelt es sich aber ausschließlich um B2B Kunden. Denen ist es beim Kauf besonders wichtig eine korrekte Rechnung zu erhalten.

Die Befragten User empfanden es in der Vergangenheit als Problem, nicht zu wissen, wo ihre Bestellung ist. Damit ist zum einen der Bearbeitungsstatus gemeint, aber auch nach dem Versenden der Ware ist es Usern wichtig zu wissen, wo diese ist und wann sie die Ware erwarten können.

Analytische Daten nutzen

Die Kunden kommen meist aus dem B2B Bereich.
Lediglich 5-10% der User greifen via Smartphone auf die Seite zu. Die meisten User gehen zwischen 9. und 17 Uhr und mit einem Desktop PC in den Shop. Das bestätigt die Informationen zu den Kunden aus den Steakholder Interviews.

Aus den Daten geht auch hervor, dass ca. 50% der User auf Rechnung kaufen. Danach folgt die Bezahlung per Kreditkarte mit 20%, Paypal nutzen 15% und nur knapp 5 % Vorkasse.


Die meisten Kunden kommen einmal und dann erst wieder in 1 ,3, oder 5 Jahren, weil sie eine Lizenzverlängerung erwerben müssen.
Ebenso lange denken User auch nicht an den Shop oder ihre Zugangsdaten. Nach so langer Zeit weiß ein User womöglich gar nicht mehr, ob sie_er bereits ein Kundenkonto hat. Gegebenenfalls gibt es einen Account für ein Unternehmen und der Mitarbeiter hat inzwischen gewechselt.

💡 INSIGHT: Es gibt 2 Gruppen. User, die für ihr Unternehmen (als Angestellte) eine Firewall kaufen und Reseller, die meist in einem großen IT-Haus arbeiten und dort auch Firewalls anbieten.Die meisten Befragten bestellen am liebsten als Gast. Insbesondere, wenn Sie das Unternehmen noch nicht kennen oder voraussichtlich nicht die Absicht haben, hier regelmäßig einzukaufen. Da mein Projekt-Kunde Firewalls und Lizenzen verkauft, ist absehbar, dass User hier nicht regelmäßig, sondern mindestens im Abstand von 1-5 Jahren kaufen. So lange laufen die Lizenzen. Usern geht es weniger darum möglichst schnell an ihr Ziel zu kommen, wichtiger ist ihnen, dass die Daten richtig sind und die Rechnung, die sie als Unternehmen benötigen korrekt vorliegt.

3. Define the Problem

Personas

Diese gesammelten Erkenntnisse über die User und ihr Verhalten habe ich in 5 Personas zusammengetragen, welche die beiden Gruppen Unternehmen/Organisation und Reseller in verschiedenen Szenarios visualisiert.

Personabeispiel Usergruppe 1, die für ihr eigenens Unternehmen kauft
Persona Reseller Frank Tönnes
Personabeispiel Usergruppe 2, Reseller

User Journey Map

Um die Anforderungen zu definieren, habe ich verschiedene User Journey Maps erstellt. Aus Sicht von Gast-Usern, Kunden, als Ist-Zustand und in einer Ideal-Version.

💡 INSIGHT: Im Moment ist es so, dass User, die sich als Gast anmelden, auf den jeweiligen Button klicken um dann eine lange Formularseite auszufüllen. Wenn das System die E-Mail Adresse erkennt, bekommt der User nach absenden der Seite, die Rückmeldung, dass es bereits ein Konto gibt und bricht damit den gesamten Prozess ab. Der User muss eigenständig neu beginnen. Sie_er weiß jetzt, dass es ein Konto gibt, aber deswegen noch lange nicht die Anmeldedaten. User müssen sich jetzt kompliziert und langwierig zum „Passwort vergessen“ durchsuchen.
Ein weiterer Pain Point, der als Gast und Bestandskunde auffiel, ist am Ende des Check-Outs auf der Überprüfen-Seite. Möchte ein User dort noch eine Änderung vornehmen, gibt es den Stift, auf den sie_er klickt. Dann allerdings kommen User auf die jeweilige Seite zurück: Auf die Adress-Seite, Zahlungsart-Seite oder zurück in den Warenkorb und müssen von dort den gesamten Prozess erneut durchlaufen.
Beides sind Pain Points, die User durchaus zum Abbruch bewegen und sollten unbedingt bearbeitet werden.

User Journey Map IST Zustand

User Flow Charts

Ich habe für jedes Szenario einen User Flow Chart erstellt. Zum einen ging es mir hier um die Anforderungen, aber auch um die Skizzierung einer Lösung. Die Bilder zeigen den User Flow als Gast im IST Zustand und als Ideal Flow. Im optimierten Chart ist der Flow simplifiziert.

Optimierter User Flow als Gast
IST User Flow

4. Develop: Design Entwicklung

Wireframing

Die Wireframes für den Checkout als Bestandskunden zeigen, wie der Prozess optimiert werden kann. Zurzeit müssen angemeldete User die gleichen Formulare durchlaufen, wie User, die als Gast bestellen. Sie müssen also jedes Mal ihre Adresse zumindest bestätigen. Das lässt sich optimieren, so dass angemeldetet User nur noch 4 statt 5 Prozessschritte durchlaufen. Sie erreichen nach der Anmeldung sofort die Seite mit der Zahlungsart. Ihre Adresse, die sie im Kundenkonto hinterlegt haben, können User auf der letzten Seite überprüfen. Etwaige Änderungen erfolgen nun direkt auf der Seite. Damit müssen User nicht mehrmals denselben Prozess durchlaufen.

Wireframes Bestandskunde – Step 1: Anmelden
Wireframes Bestandskunde Step 2: Direkt zu Versand und Zahlung
Wireframes Bestandskunde Step 3: Überprüfen

Auf der „Überprüfen und kaufen“ Seite ist es nun möglich Eingaben zu ändern. User können jetzt zum Beispiel die Anzahl der Produkte im Warenkorb justieren, ohne den ganzen Prozess erneut durchlaufen zu müssen. Ausserdem wird hier nun auch die E-Mail Adresse angezeigt. Insbesondere für Gastbestellungen dient dies nochmal zur Fehlervermeidung, um zu prüfen, ob sich zum Beispiel ein Tippfehler eingeschlichen hat.

Design und Prototyping

Für die Designentwicklung habe ich mich an das CI des Kunden gehalten. Eine Empfehlung, die ich für die gesamte Webseite gegeben habe, ist die Schriftgrößen Barrierefrei anzupassen. Die Standartgröße des Onlineshops beträgt im Moment 14pt und sollte auf 16pt. erhöht werden. In allen folgenden Wireframes und Mockups verwende ich daher 16pt und Typescale Minor Third.

Die Kästen und das Grau im Hintergrund waren Gestaltungselemente ohne Zweck. Um die Lesbarkeit zu erhöhen sind die Boxen entfernt worden. Eine Gruppierung erfolgt nun über das Gesetz der Nähe.

Re-Design Checkout Formular mit Fehlermeldung

Je länger ein Formular ist, desto wahrscheinlicher erfolgen Abbrüche. Die Email Adresse wird bereits in der Anmeldemaske eingegeben. Durch die neue Aufteilung wird das Formular kürzer und User erfahren schneller, wenn es bereits ein Kundenkonto mit ihrer E-mail gibt. Die automatische Postleitzahlerkennung vereinfacht die Eingabe für User und die Plausibilitätsprüfung, zum Beipsiel der Abgleich von Postleitzahl und Ortseingabe verringert das Fehlerrisiko. Fehlermeldungen erscheinen rot und mit aussagekräftigem Text über der jeweiligen Stelle im Formular. So wissen User genau, was sie tun müssen, um den Fehler zu beheben.

Re-Design Checkout Gast/Anmeldung

Das Szenario „ein User will als Gast bestellen, hat aber schon ein Kundenkonto“ wird nun durch die schnelle Abfrage nach der E-Mail Adresse im ersten Screen vereinfacht. In dem Fall hat der User nur seine E-Mail Adresse eingegeben und erhält per Pop-Up die Rückmeldung mit einem Link zur Anmeldemaske und einem Passwort vergessen Link.

Warnung über ein bereits bestehendes Kundenkonto mit Handlungsunterstützung

Auf der Übersichtsseite sehen User nun auch ihre E-Mail Adresse, die sie eingegeben oder hinterlegt haben. Das erhöht die Fehlervermeidung insbesondere bei Gastbestellungen. User können hier noch einmal prüfen, ob ihre Angaben korrekt sind oder sich zum Beispiel ein Tippfehler eingeschlichen hat.

Entwicklung des Prototyps als Klickdummy

Checkout-Prozess Klickdummy Video

5. Ausblick und Learning

Viele Wege führen nach Rom und auch, wenn es nur einen Checkout-Prozess in einem Onlineshop gibt, gibt es viele verschiedene Möglichkeiten, diesen zu designen. In diesem Projekt ist mir klar geworden, dass es nicht einen richtigen Weg gibt. Wichtig ist, sich für einen zu entscheiden, der den Usern ermöglicht einfach und schnell ihr Ziel zu erreichen und gleichzeitig die Bedürfnisse der Steakholder bedenkt.