Das Herz der «Customer Journey»

Petri Harju

31.10.2019

Bilder: Thomas Kunz

Co-Autor: Rico Schüpbach

Der Checkout ist einer der wichtigsten Bestandteile eines Online-Shops. Denn mit diesem steht und fällt der Einkauf. Heute werfen wir einen Blick hinter die Kulissen und zeigen, worauf es dabei ankommt.

Mit Sicherheit kennen unsere Kunden die Checkout-Seite bei Digitec Galaxus. Das Design ist nun schon seit einigen Jahren unverändert. Warum sollten wir daran auch rumschrauben? Es funktioniert einwandfrei und ist generell auch sehr einfach im Handling. Kunden, die den Shop zum ersten Mal besuchen, könnten vom doch eher vollgepackten Layout und dem vielen Text etwas abgeschreckt sein. Alle anderen dürften sich mittlerweile daran gewöhnt haben. Trotzdem ist die Zeit für ein Update gekommen. Da wir aber nicht nur an der Oberfläche ein paar kosmetische Veränderungen vornehmen wollten, haben wir auch gleich die technischen Features aktualisiert.

Das Team

Die Goldfingers sind in erster Linie für Subdomains zuständig, sprich alles was für den Kunden sichtbar ist. So zum Beispiel den Bestellprozess, die Auftragsübersicht und eben die Checkout-Seite. Ausserdem zerbrechen sie sich die Köpfe wie man weitere Services, die dem Kunden nützlich sein könnten, so implementiert, dass es nicht aufdringlich wirkt. Sie schrauben am virtuellen Einkaufswagen und sorgen ausserdem dafür, dass der Kunde ganz easy seine Shopping-Tour beenden kann. Das Team besteht aus Backend- und Frontend-Entwicklern, einem Team Leader, einem Productowner, einem UX Designer und einem Scrum-Master.

Die grösste Herausforderung? Ein totaler Breakdown wäre echt doof.

Was ist das Worst-Case-Szenario für die Checkout-Seite? Ein Breakdown. Denn wenn diese Seite kaputt ist, dann ist auch der Einkauf für den Kunden futsch. Für Digitec Galaxus wäre ein solcher Szenario verheerend, weil dadurch auch ein finanzieller Schaden drohen würde. Und genau aus diesem Grund wird jede geplante Änderung minutiös überwacht. Das Team Goldfinger überwacht mit Alarm-Tools den Prozess nonstop. Kommt doch mal etwas Ungeplantes vor, wird das Team umgehend via Chat und E-Mail benachrichtigt, damit reagiert werden kann.

Lang lebe die Skalierbarkeit!

Dass die Verfügbarkeit der Seite höchste Priorität hat, sollte an dieser Stelle der Lektüre klar sein. Eine andere Herausforderung, die wir zu bewältigen haben, ist die Skalierbarkeit. Egal, ob an einem ruhigen Dienstagabend oder um Mitternacht am Black Friday. Die Checkout-Seite muss jedem Andrang standhalten. Eine grosse Anzahl von gleichzeitigen Seitenaufrufen durch Kunden, von denen viele nach Schnäppchen mit begrenzter Verfügbarkeit suchen, stellt uns vor besondere technische Herausforderungen. In Vorbereitung auf den diesjährigen Black Friday führt das Team Tests auf Basis von Traffic-Prognosen durch. Dies ist notwendig, um Schwachstellen zu erkennen und ein Verständnis für die Schwellenwerte und die Leistungsfähigkeit des Systems zu entwickeln. Nach Vorliegen der Testergebnisse werden Verbesserungen für die identifizierten Probleme diskutiert, konzipiert und umgesetzt.

Die kristallklare Vision

Die Aktualisierung unseres Checkouts ist ein ehrgeiziges Projekt mit mehreren Zielen. Wir sind bestrebt, das Erlebnis für unsere Kunden unkomplizierter, angenehmer und weniger verwirrend zu gestalten. Gleichzeitig wollen wir die Belastung unserer Server reduzieren. Oh, und haben wir erwähnt, dass die Seite auch eine Geschwindigkeitssteigerung braucht? Pagespeed ist aus guten Gründen immer ein Kernanliegen. Mehr zu diesem Thema erfährst du hier:

Minimal-Trend greift um sich

Was bedeutet das in der Praxis? Beginnen wir mit dem Layout. Der bestehende Checkout-Prozess ist eine lange Seite mit viel Text und vielen Buttons. Im Jahr 2019 entspricht so viel Inhalt nicht mehr ganz dem Zeitgeist. Der Trend geht hin zu cleanen und grossen Elementen mit viel Freiraum und so wenig Text wie möglich. Wir wollen unsere Kunden Schritt für Schritt durch den Checkout-Prozess zu führen. Ohne Firlefanz. Unsere Online-Shops sind in die Ära von Technologien wie React, Typescript und isomorphem Rendering eingetreten. Dies hat es uns unter anderem ermöglicht, bestimmte unkritische Teile des Codes auf das Frontend zu verschieben, was uns in zweierlei Hinsicht zugutekommt: die Reduzierung des Kommunikationsbedarfs zwischen dem Webbrowser des Kunden und unserem Backend sowie die Verbesserung der Benutzeroberfläche. Zukünftige Code-Änderungen werden wir einfacher implementieren können.

Veränderungen nur in homöopathischer Dosierung

Vertrauen ist das A und O im Online-Shopping. Im Zeitalter von Fake-News, Spam und Credential Stuffing wollen Kunden sensitive Daten wie Adresse, Telefonnummer und Kreditkartenangaben nur vertrauenswürdigen Seiten angeben. Wenn die Seite von einem Tag auf den anderen komplett anders aussieht, fühlen sich die User unwohl und denken, dass etwas faul ist. Um dies zu vermeiden, werden die Änderungen über einen längeren Zeitraum schrittweise umgesetzt.

User Experience im Fokus

Vieles hat sich im Web in den letzten Jahren verändert. Heute stehen mobile Geräte bei allem, was wir tun, im Mittelpunkt. Jede Änderung der Benutzeroberfläche wird auf mehreren Browsern und Bildschirmgrössen getestet. Das Erlebnis muss ausgezeichnet sein, vom 34-Zoll-Breitbildmonitor bis zum kleinsten Smartphone-Bildschirm. Um dies zu gewährleisten, arbeitet das Team eng mit unseren hauseigenen User Experience-Spezialisten zusammen.
Wir unternehmen grosse Anstrengungen, um dem Kunden ein gutes Erlebnis zu bieten. Hier ein Beispiel: Vielleicht hast du es auf der Bestellübersichtsseite (wo alle deine alten Bestellungen aufgelistet sind) bemerkt; wenn du mit der Maus über eine Bestellung fährst, werden GraphQL-Abfragen an das Backend unseres Shops gesendet, das Liefer- und Zahlungsdetails für diese Bestellung abruft. Die Antwort von unseren Servern kommt in der Regel in etwa 200 Millisekunden. Im lokalen Cache des Webbrowsers werden diese Daten gespeichert. Wenn du auf die Bestellung klickst, anstatt die Datenbank abzufragen, holen wir die Informationen aus dem lokalen Cache des Browsers und rendern die Auftragsdetailseite blitzschnell. Es sind die kleinen Dinge, die zählen.

Das Neue überzeugt nicht immer

Ein weiteres Beispiel für ein benutzerfreundliches Design ist die "getunnelte" Version der Kasse, die das Team Goldfinger diesen Sommer getestet hat. Bei diesem Design waren die linke und rechte Spalte der Checkout-Seite sowie mehrere Elemente oben auf dem Bildschirm nicht sichtbar. Das neue Design sollte für die Kunden attraktiver sein, so dass sie den Kaufprozess und die Bestellung ohne Ablenkung abschliessen konnten. Die Leistung des Designs wurde mit einem sogenannten A/B-Test gemessen, bei dem das neue Layout 50% der Kunden sowohl auf digitec als auch auf Galaxus angezeigt wurde. Allerdings lief es nicht so, wie es sich das Team erhofft hatte - im A/B-Test gewann das traditionelle Design mit knapper Mehrheit. Auch wenn das für uns eher überraschend war, sollten wir bedenken, dass laut einer von Google durchgeführten Studie die meisten A/B-Tests darauf hindeuten, alles beim Alten zu belassen.

Übrigens, wir testen derzeit A/B das neue Design der Kasse. Aber sei nicht überrascht, wenn du keinen Unterschied bemerkst. Es bedeutet nur, dass du in der Gruppe A bist.

Petri Harju

Software Engineer

Petri.Harju@digitecgalaxus.ch

Software Engineer. Scrum Master. Skeptiker.

Folgen

Diese Beiträge könnten dich auch interessieren