Le cœur « Customer Journey »

Petri Harju

31/10/2019

Photos: Thomas Kunz

Co-auteur: Rico Schüpbach

Le passage en caisse est l'un des composants les plus importants d'une boutique en ligne. Car c'est lui qui permet de finaliser les achats. Aujourd'hui, nous jetons un coup d'œil derrière les coulisses et vous montrons ce qui est important.

Nos clients connaissent certainement la page de paiement de Digitec Galaxus. Cela fait quelques années que le design est resté le même. Pourquoi devrions-nous le changer ? Il fonctionne parfaitement et est, en général, très facile à utiliser. Les clients, qui visitent la boutique pour la première fois, pourraient être un peu découragés par la mise en page plutôt dense et les nombreux textes. Tous les autres devraient s'y être habitués maintenant. Néanmoins, le moment est venu de faire une mise à jour. Comme nous ne voulions pas seulement faire des changements cosmétiques en surface, nous avons également actualisé les caractéristiques techniques.

L'équipe

L'équipe Goldfinger est principalement responsable des sous-domaines, c'est-à-dire de tout ce qui est visible pour le client. Par exemple, le processus de commande, l'aperçu des commandes et le passage en caisse. De plus, l'équipe se creuse aussi les méninges sur la façon d'intégrer d'autres services qui pourraient être utiles au client d'une manière qui ne semble pas intrusive. Ils travaillent sur le panier d'achats virtuel et s'assurent que le client peut facilement terminer sa session shopping. L'équipe se compose de développeurs back-end et front-end, d'un chef d'équipe, d'un productowner, d'un concepteur UX et d'un scrum master.

Le plus grand défi ? Une avarie totale serait vraiment dommage.

Quel est le pire scénario pour le passage en caisse ? Une panne. Si cette page ne fonctionne pas, alors les clients ne peuvent pas faire leurs achats. Pour Digitec Galaxus, un tel scénario serait dévastateur, car il menacerait aussi de causer des dommages financiers. Et c'est précisément pour cette raison que chaque changement planifié fait l'objet d'un suivi méticuleux. L'équipe Goldfinger utilise des outils d'alarme pour surveiller le processus en continu. Si quelque chose d'imprévu se produit, l'équipe est immédiatement avertie par chat et e-mail afin qu'elle puisse réagir.

Longue vie à l'évolutivité !

À ce stade de la lecture, tout le monde sait que la disponibilité de la page a la plus haute priorité. Un autre défi auquel nous sommes confrontés est l'évolutivité. Que ce soit un mardi soir calme ou à minuit lors du Black Friday ; la page du passage en caisse doit résister à tout flux de visiteurs. Quand les clients veulent tous consulter la même page – par exemple celle où se trouvent les bonnes affaires en quantités limitées – nous nous trouvons face à de gros défis techniques. En préparation du Black Friday de cette année , l'équipe effectue des tests basés sur les prévisions de trafic. Cela est nécessaire pour identifier les points faibles et développer une compréhension des seuils de tolérance et des performances du système. Une fois les résultats des tests disponibles, les améliorations pour les problèmes sont identifiées, discutées, conçues et appliquées.

La vision cristalline

La mise à jour de notre page de passage en caisse est un projet ambitieux avec plusieurs objectifs. Nous nous efforçons de rendre l'expérience moins compliquée, plus agréable et moins déroutante pour nos clients. En même temps, nous voulons réduire la charge sur nos serveurs. Oh, et avons-nous mentionné que le site a aussi besoin d'un boost au niveau vitesse ? La vitesse d'une page est toujours une question centrale – à raison. Vous en apprendrez plus à ce sujet ici :

Le minimalisme comme tendance

Qu'est-ce que cela signifie en pratique ? Commençons par le layout. Le processus de paiement actuel est une longue page avec beaucoup de texte et de boutons. En 2019, tant de contenus ne reflètent plus vraiment l'air du temps. La tendance est aux grands éléments sobres avec beaucoup d'espace libre autour et le moins de texte possible. Nous voulons guider nos clients étape par étape dans le processus de paiement. Sans chichis. Nos boutiques en ligne sont entrées dans l'ère des technologies comme React, Typescript et le rendering isomorphe. Cela nous a permis, entre autres, de déplacer certaines parties non critiques du code vers le front-end, ce qui nous procure deux avantages : réduire le besoin de communication entre le navigateur Web du client et notre back-end, et améliorer l'interface utilisateur. Les modifications futures du code seront plus faciles à mettre en œuvre.

Des changements, mais seulement à dose homéopathique

La confiance est le b.a.-ba des achats en ligne. À l'ère des fausses nouvelles, des pourriels et du credential stuffing, les clients veulent donner des données sensibles comme l'adresse, le numéro de téléphone et les détails de carte de crédit uniquement aux sites de confiance. Si la page est complètement différente d'un jour à l'autre, les utilisateurs se sentent mal à l'aise et pensent que quelque chose est n'est pas normal. Pour éviter cela, les changements seront mis en œuvre progressivement sur une plus longue période de temps.

De l'expérience de l'utilisateur

Beaucoup de choses ont changé sur le Web ces dernières années. Aujourd'hui, les appareils mobiles sont au cœur de tout ce que nous faisons. Chaque modification de l'interface utilisateur est testée sur plusieurs navigateurs et tailles d'écran. Que ce soit sur un écran de 34 pouces ou sur un petit smartphone ; l'expérience doit être excellente. Pour ce faire, l'équipe travaille en étroite collaboration avec nos spécialistes de l'expérience utilisateur internes.
Nous faisons de grands efforts pour offrir à nos clients une bonne expérience. Voici un exemple : vous l'avez peut-être remarqué sur la page d'aperçu des commandes (où toutes vos anciennes commandes sont répertoriées) ; lorsque vous passez votre souris sur une commande, les requêtes GraphQL sont envoyées au back-end de notre boutique, qui récupère les détails de livraison et de paiement pour cette commande. La réponse de nos serveurs est généralement d'environ 200 millisecondes. Ces données sont stockées dans le cache local du navigateur Web. Si vous cliquez sur la commande au lieu d'interroger la base de données, nous récupérons les informations du cache local du navigateur et rendons la page des détails de la commande à la vitesse de l'éclair. Ce sont les petites choses qui comptent.

Tout nouveau n'est pas toujours tout beau

Un autre exemple d'un design intuitif est la version « épurée » du passage en caisse testée cet été par l'équipe Goldfinger. Dans ce design, les colonnes gauche et droite de la page de paiement et plusieurs éléments en haut de l'écran n'étaient pas visibles. Le nouveau design devrait être plus attrayant pour les clients afin qu'ils puissent compléter le processus d'achat et commander sans se laisser distraire. Les performances du design ont été mesurées à l'aide d'un test A/B, au cours duquel le nouveau design a été présenté à 50 % des clients sur digitec et Galaxus. Cependant, les choses ne se sont pas déroulées comme l'équipe l'avait espéré – dans le test A/B, le design traditionnel a gagné avec une faible majorité. Même si cela nous a un peu surpris, il faut garder à l'esprit que selon une étude menée par Google, la plupart des tests A/B indiquent que tout devrait rester inchangé.

En passant, nous faisons actuellement le test A/B du nouveau modèle de passage en caisse. Mais ne soyez pas surpris si vous ne voyez pas la différence. Cela signifie seulement que vous appartenez au groupe A.

Petri Harju

Software Engineer

Petri.Harju@digitecgalaxus.ch

Ingénieur logiciel. Scrum Master. Skeptik.

Suivre

Ces articles pourraient aussi vous intéresser