l'Appli Mobile BrandAlley

publié le 30 mars 2013 à 09:12 par Elalami LAFKIH   [ mis à jour : 21 nov. 2014 à 13:18 ]

Quelques explications sur les 80% d'abandons à l'étape de paiement chez BrandAlley

Tout a commencé par la lecture dans la presse le passage suivant "Chez BrandAlley, près de 80% des paniers d'achat sur mobiles étaient abandonnés lors de l'étape de paiement, et notamment lorsqu'il s'agissait d'entrer le numéro de carte bleue" Ce frein à l'achat plombe par ailleurs le taux de transformation depuis les mobiles : "Il est de 0,5% alors que depuis un site e-commerce, il est d'environ 2%. Cela nous laisse une bonne marge de progression", indique Sven Lung. 

C’était en mars 2013, à l'occasion de lancement de Scanpay: un service de scan de carte bleu qui vise donc à combler ce retard d’après les dires de Sven Lung.

Imaginez-vous le propriétaire d'une boutique parisienne qui voit 80% de ses clients quitter son magasin une fois qu'ils ont sélectionné leurs articles. Au moment où ces acheteurs se dirigent vers la caisse (avec leur panier bien rempli) et bien, ils quittent brusquement la boutique.

Du coup, je me suis remis au travail pour essayer de comprendre le vrai problème de BrandAlley et tenter de trouver des explications sur les "80% des paniers d'achat sur mobiles qui étaient abandonnés à l'étape de paiement". J'ai commencé par installer l'application BrandAlley sur mon  iPhone. Et voici ce que j'ai découvert

Je me suis concentré sur le tunnel d'achat qui se déroule comme suit:

 Etape#1 (Je vous épargne la navigation dans le catalogue et la recherche du produit. J'ai pris le premier article que j'ai vu)

 Analyse de l'étape#1
Rien de particulier, une fiche produit simple avec une action "Ajouter au panier" claire, précis et mis en valeur.
 Etape#2: Après avoir cliquer sur l'action "Ajouter au panier", la page suivante apparaît




















 Analyse de l'étape#2
Rien de particulier: on note  la disparition de footer et une action "Ajouter au panier" claire et précis (remarquez que c'est la même que celle de l'étape#1)
On pourrait se demander s'il n'a pas une possibilité de fusionner les deux étapes en une seule. Par exemple avoir dans une seule page les sections dépliantes suivantes (prix, taille, couleur) et quand l'utilisateur clic sur la taille, la section "taille" se déplie  "UnFold" et quand l'utilisateur sélectionne sa taille et sa couleur alors  l'action "Ajouter au panier" apparaisse comme le montre cette page prise sur l'appli Amazon. Et ainsi on économisera une étape entière. On se demande aussi pourquoi la "Quantité" se trouve sur  cette page.

Autre point d’amélioration possible, déplacer l'action "Ajouter au panier"  en haut pour la rendre encore plus visible. 
 Etape#3: Je choisi la taille et la quantité et je clic sur l'action "Ajouter au panier", la page suivante apparaisse:


 Analyse de l'étape#3: On se demande sur l'utilité de cette page intermédiaire. Le message de confirmation de l'ajout d'un article dans le panier pourrait se faire d'une autre manière. Par exemple, dès que l'utilisateur clic sur  "Ajouter au panier", on fait vibrer l'iphone. Ainsi, on économise un écran supplémentaire. 






 
 Etape#4: Je valide OK, et la page suivante apparaisse






 Analyse de l'étape#4: On se demande sur l'utilité de cette page et étape supplémentaire (ne faites pas attention au prix, car j'ai pris ces Screenshots en l'espace de plusieurs jours, ce qui explique l'écart de prix)

Notez aussi l'apparition de footer qui perturbe l'acheteur. On invite l'utilisateur à allez voir ailleurs.

Au passage, notons aussi que l'action "Ajouter au panier" est présente même si l'article n'est plus en Stock. Une mauvaise pratique à bannir sur un site sérieux.

Le problème de cette page, c'est que l'utilisateur ne comprend pas son utilité, du coup il est extrêmement difficile pour lui de répondre aux trois questions:
  1. Où suis-je? 
  2. Qu'est que je suis sensé faire sur cette page?
  3. Pourquoi dois-je le faire?
L'autre gros problème de cette page c'est que si l'utilisateur clic sur l'action "Ajouter au panier", et bien,  l'article en question sera ajouté à son panier et il se retrouvera avec deux articles au lieu de un.

 Etape#5: Cette fois-ci, pour ne pas boucler sur sur l'action "Ajouter au panier" et me trouver avec une dizaine de sandales, j'ai cliqué sur l'icone "Panier" qui se trouve dans le Footer et voici la page que j'ai eu: (La sandale rose n'étant plus en stock, j'ai choisi un autre article pour continuer mon expérience)




 Analyse de l'étape#5: Rien d'anormal, une page "Panier" simple avec une action "Commander"  mis en valeur.
On se demande toujours sur l'utilité de footer dans cette page.
 Etape#6: Après avoir "Commander", j'ai été étonné de voir la page suivante.





  Analyse de l'étape#6: Je ne vais pas commenter longuement cette page car il faudra à elle seule tout un article, mais une chose cela relève malheureusement à l'incompréhension du e-commerce  du m-Commerce. Je vais juste vous poser la question suivante:
Quand vous voulez payer 
à la caisse un article que vous avez acheté dans une boutique physique, est-ce que la caissière vous demande: est-ce que vous êtes client et vous oblige à devenir client AVANT de payer? Je vous laisse méditer sur la réponse.

Sachant que le e-commerce et le m-Commerce,  sont normalement sensés être moins contraignants/lourds (nous facilite la vie quoi) que le in-store commerce.

L'utilisateur a déjà passé beaucoup de temps avant d'arrivé à cette étape, ne lui demandons pas de perdre encore quelques minutes sur quelques choses d'inutile.

Il n'y a pas de pire ennemie au "taux de conversion" que d'exiger la création d'un compte utilisateur pendant le process d'achat. L’absence de l'option "Guest Checkout" participe à elle seule à hauteur de 14% au taux d’abandon. Voici le bon exemple à suivre:


La proposition de créer un compte peut se faire à la fin du process de checkout mais elle doit toujours être accompagner par une phrase expliquant les avantages et les bénéfices de créer un compte. L'autre façon de faire est d'utiliser l'ensemble des informations fournies par l'utilisateurs pendant le process normal de checkout à la création de son compte et ce d'une manière totalement transparente.

Un important acteur de retail aurait vu un rebond de 300 millions de $ de son chiffre d'affaires en enlevant le bouton «Créer un compte»!
 
 Etape#7: J'ai décidé tout de même de créer un compte (pour acheter une chaussure!) Et voici le Next Step



 


 Analyse de l'étape#7: Je crois que cette page et cet interminable formulaire se passe de commentaires.

Je veux juste rappeler la règle suivante connue des spécialistes de l'UX: chaque champs qui se trouve dans un formulaire coûte grosso-modo entre 10% et 15% en terme de taux de conversion (c.a.d si vous avez 1 paramètre dans un formulaire, votre taux de conversion diminue de -10% ou -15%  et plus vous avez de paramètres dans votre formulaire plus le taux de conversion diminue) Je vous laisse calculer cela pour ce formulaire.

Notez-aussi la chose étrange suivante: on demande à l'utilisateur de reconfirmer son email. Une pratique qui ne se fait plus même dans les site web.

C'est ce genre de conséquences qu'on obtiens lorsqu'on fait copie/coller de la version web du site.

Notons aussi que nous sommes sur une application iphone et tout ces champs doivent être saisis avec un clavier mobile.

Il y a plusieurs pistes pour remédier à cela, pour ne citer que deux: ne demander dans un formulaire que les informations essentiels et vitales. On peut imaginer aussi un formulaire simple avec uniquement un  champ "email" et un "mot de passe" comme chez Amazon.
 Etape#8:  Après avoir créer un compte, j'ai été redirigé à ma grande surprise à l'écran de l'étape#5, du coup j'ai recliqué au nouveau sur "Commander" et là, j'obtiens






 Analyse de l'étape#8: On se demande sur l'utilité de cette étape. Rappelons les questions auxquels chaque utilisateur doit répondre en moins de 30 secondes.
  1. Où suis-je? 
  2. Qu'est que je suis sensé faire sur cette page?
  3. Pourquoi dois-je le faire?
Une autre règle que j'ai oublié de mentionner: chaque étape inutile/additionnelle dans un parcours d'achat coûte environ 30% en terme de taux de conversion.
 Etape#9: Je clic sur Valider, et je passe à l'étape suivante







 Analyse de l'étape#9: Même commentaire que  l'étape#7. 
Toute une étape  a été rajoutée juste pour inviter l’utilisateur à entrer un code de réduc. Hors, un code réduc peut être inclut dans le récap de la commande. Et mettre "aucun" comme valeur par défaut, et ce n'est que quand l'utilisateur modifie sa valeur, que le champs Code de réduction apparaisse. Voir le cas de chez Amazon dans l'étape qui suit.

Positionner une étape juste pour inviter l'utilisateur à entrer un code de réduc constitue un risque majeur, car on est tenté d'aller sur le net et chercher un code de réduction. 

Un code coupon est une option et non pas une étape en soit.
 Etape#10: Je reclic une deuxième fois sur "Commander" et la page suivante s'affiche:














 Analyse de l'étape#10: Cette étape aurait pu être fusionner avec l'étape suivante "Livraison".  Dans cette page fusionnée on aurait garder que le le titre de chaque adresse et ne pas afficher l’ensemble de détail.

L'appli Amazon, fusionne cette page, la page suivante dite "Livraison" et cette d’après dite "Paiement" en une seule page/étape. Voici ce que cela donne:
Observez aussi où Amazon on mis le bouton "Valider la commande" (en haut à droite)

                                     
 Etape#11: Je reclic sur Validr et je passe à l'étape suivante








 Analyse de l'étape#11: On peut se demander sur l'utilité de cette page. On peut se demander aussi pourquoi on ne propose pas à l'utilisateur une seul option de livraison par défaut; celle choisie par 80% d'acheteurs chez BrandAlley. Et pour les 20% restant et bien, ils n'ont qu'à modifier l'option par défaut et choisir un autre mode de livraison.
 Etape#12: J'ai choisi une livraison à mon domicile à 5€90 et voici ce la page qui s'est affichée
 

Note: Notez que l'écran a masqué le barre de progression ce qui peut perturber l'utilisateur.  
 Etape#13: Je revalide mon adresse et je passe à l'étape de choix de moyen de paiement:

 Etape#14: Je choisi Visa comme mode de paiement et la page suivante s'affiche.


 

 Analyse de l'Etape#14: Les étapes 13 et 14 peuvent être fusionner en une seule étape. Le titre "Panier" est inapproprié pour cette page
Sur cette page, on voit deux call to action Oui je confirme mon paiement

Conclusion: 
Dans la presse on dit que c'est sur cette page que BrandAlley enregistre 80% de taux d’abandon, ce qui est énorme, mais cette brève expérience montre que le taux de conversion est impacté d'une manière significative bien avant cette étape.  

Cette expérience montre comment un parcours d'achat a été transformé en parcours de combattant (dans le vrai sens du terme) par la multiplication des étapes redondantes et inutiles. On a l'impression que les personnes qui ont spécifiés l'UX ne voulaient pas que l'utilisateur ira jusqu'au but de son achat en un minimum de temps.

Une étude publiée  en 2009  déjà montre que près de 75% des utilisateurs  mobiles s'attendent à effectuer une transaction simple en moins d'une minute, avant d'abandonner et de quitter le site. Cette attente s'explique parfaitement par le fait que les utilisateurs des mobiles sont toujours perturbés et sollicités  par ( la vraie vie, les appels/SMS entrants et les interruptions réseau) 

Chaque étape mérite une analyse approfondie et je serais curieux de connaitre la suite des événements  BrandAlley peut mettre en place de l' A/B Testing ou de Multivariate Testing, mais pour le début  à mon avis il va falloir rationaliser l'ensemble du parcours et faire de   l'A/B Testing sur des implémentations très précises qui nécessitent une validation de l'usage réel des utilisateurs avant généralisation.

Si vous avez, ou vous êtes en train de développer  une application et vous souhaitez avoir un feedback de ma part alors n'hésitez pas de prendre contacte avec moi, ça sera avec plaisir si je peux vous aider.
 

1-1 of 1