Checkout Optimierung - Case study ClickandBuy

Optimierung Checkout Prozess
Kunde: ClickandBuy

Der Auftraggeber

ClickandBuy ist eines der führenden Bezahlsysteme im Internet. ClickandBuy hat sich das Vertrauen von über 14 Millionen Kunden zur Abwicklung ihrer Online-Transaktionen verdient. Zu den bekanntesten Orten im Web an denen man mittels ClickandBuy sicher und einfach bezahlen kann gehören Apple iTunes, T-Online, Parship, RTL und Bild.de.

Als 100%ige Tochtergesellschaft der Deutschen Telekom, dem größten europäischen Telekommunikationsunternehmen, ist ClickandBuy für uns ein toller "Global Player" Kunde.

Die Mission

Der wichtigste Punkt unserer Mission war es den Checkout-Prozess zu optimieren und somit eine Verbesserung der Benutzerfreundlichkeit des Vorgangs, den der Kunde bei jedem Zahlungsvorgang durchläuft, zu erreichen. Bis dato war dieser Prozess etwas in die Jahre gekommen und es galt die Benutzerfreundlichkeit erheblich zu verbessern.

Das Ergebnis sollte sowohl einfach und für jeden sofort verständlich sein, als auch plattformübergreifend auf mobilen Geräten wie Smartphones und Tablets komfortabel nutzbar sein.

Als erste Folgemission durften wir zusätzlich die Registrierung der Endkunden im gleichen Stil überarbeiten und die Usability verbessern.

  • Einfaches, übersichtliches Bedienkonzept
  • Anpassung des Designs
  • Optimierung für Desktop, Tablet, Mobile (Responsive Design)
  • Entkoppelung vom Backend (WebApp angeknüpft an API)

Unser Konzept

Nach dem ersten gemeinsamen Workshop war unserem Team sofort klar, dass die zunächst angedachte reine Überarbeitung des aktuellen Designs mit einigen dynamischen JavaScript-Funktionen und etwas Ajax nicht ausreichen würde.

Unser Team machte ClickandBuy den Vorschlag das ganze Projekt als WebApp umzusetzen und damit einen neuen Missionspunkt hinzuzufügen, der eigentlich erst für einen viel späteren Zeitpunkt geplant war: Die Entkoppelung von Backend und Frontend.

Nach ersten Designentwürfen unserer Grafikabteilung konnte schnell ein einfaches Bedienkonzept entwickelt werden. Zur Vereinfachung des Checkouts für den Benutzer haben wir beispielsweise die Abfrage, ob ein Benutzer bereits bei ClickandBuy registriert ist oder ob er ein neues Kundenkonto erstellen will, durch eine Abfrage an die API ersetzt. Diese Frage wird damit direkt anhand der vom Benutzer eingegebenen Daten beantwortet, ohne dass der Benutzer eine bewusste Entscheidung treffen muss. Der gesamte Checkout wurde in diesem Stil als ein geführter Prozess für den Benutzer umgesetzt, alles nach dem Motto "Don't make me think". Der Benutzer spart damit Zeit und ClickandBuy steigert seine Nutzerzahlen, da der Prozess seltener abgebrochen wird.

Konzeption & redesign des Portals / Umsetzung auf TYPO3 Basis
Kunde: ClickandBuy

Durchführung

Nach Briefing und "Bewaffnung" des Teams konnten wir mit der anspruchsvollen Mission beginnen.

Bei der Umsetzung haben wir uns ganz auf agile Projektmanagement-Methoden verlassen um jederzeit auf neue Anforderungen seitens des Marketings, der API-Entwickler und allen anderen die gute Vorschläge für das Projekt hatten zu reagieren.

Für eine stets aktuelle Sicht auf den derzeitigen Stand des Projekts haben wir neben unserer Entwicklungssysteme immer einen Test-Server in guter "Continuous Deployment"-Manier eingerichtet. Hierfür waren uns unser Build-System auf Basis von Grunt und unsere mocked API in Node.js sehr hilfreich bzw. im Falle der gleichzeitig in der Entwicklung befindlichen API unabdingbar.

Für die eigentliche Entwicklung der WebApp haben wir uns für einen sehr erprobten Standard-Stack auf jQuery mit einigen Plugins auf der JavaScript-Seite und Twitter Bootstrap auf der CSS Seite entschieden. Diese beiden bekannten und vielfach erfolgreich eingesetzten Frameworks ermöglichten es uns das Projekt sowohl sorgfältig als auch zügig und kosteneffektiv umzusetzen.

Sie Planen ein Projekt?

Nichts geht über den persönlichen Kontakt. Gerne würden im direkten Gespräch Ihr Projekt genau kennenlernen. Greifen Sie zum Hörer, wir nehmen uns Zeit für Sie!

Cedric Moschallski
Cedric Moschallski
1. Patriot & Inhaber