photo de profil animée
icône burger
Français | English

La Fourche Optimiser le processus de paiement

Contexte

Dans le cadre de ma formation au sein de The Design Crew, j’ai travaillé en équipe sur un brief pour La Fourche, une épicerie bio en ligne proposant des produits jusqu'à 50% moins chers que dans les commerces habituels et livrés dans toute la France. Les produits sont sélectionnés auprès de producteurs et de marques de confiance, tous bio et engagés.

Modèle économique : Pour commander en illimité, il faut souscrire à une adhésion annuelle de 59€/an. C'est grâce à la fidélité des adhérents que La Fourche peut diminuer ses marges et proposer des produits à des prix très compétitifs.

Objectifs :
🤝 Conversion – Faciliter le passage d’une 1ère commande pour les nouveaux utilisateurs
🧲 Rétention – Faciliter le re-ordering chez les adhérents

Rôles : Gestion de projet Benchmark Recherche Interviews utilisateurs Idéation UI & prototypage Tests utilisateurs

De la recherche utilisateur au prototypage d’une solution, nous avons travaillé sur l’ensemble du Design Process.

Problème

« Comment optimiser le processus de paiement afin d’augmenter le nombre de commandes ? »

Organisation

Ce projet étant le dernier de notre formation, nous devions cette fois travailler en totale autonomie en mettant en place notre propre planning. Pour ce faire j'ai proposé la création d'un tableau sur Trello. Ce tableau allait nous permettre de distribuer les tâches, de lister les différentes ressources et surtout d'établir un retro-planning.

Benchmark

Nous avons commencé notre benchmark en analysant le flux de paiement actuel sur le site de La Fourche dans deux scénarios principaux :

👉🏻 Le visiteur est inscrit mais n'a pas encore activé son essai gratuit

👉🏻 Le visiteur est inscrit et adhérent à La Fourche

État de l'existant et améliorations potentielles au niveau du flux de paiement :

👉🏻 Manque de cohérence visuelle entre les différentes étapes du paiement et avec le reste du site

👉🏻 Absence de la marque (logo)

👉🏻 Panier non modifiable

👉🏻 impossibilité de retourner sur le site pour continuer ses achats (en cas d'oubli d'un produit par exemple)

👉🏻 Dans le cas d'un nouveau visiteur : friction possible au niveau du concept (payer un abonnement pour pouvoir faire ses courses sur le site, renseigner ses informations bancaires pour démarrer l'essai gratuit)

L'utilisation de la plateforme de paiement Stripe par La Fourche est la principale cause des quatre premiers points listés ci-dessus. En effet, Stripe ne permet pas une grande personnalisation (notamment visuelle) de ses outils. Bonne nouvelle, nous avons appris que La Fourche comptait développer à terme sa propre plateforme de paiement.

Nous avons ensuite étendu notre benchmark aux concurrents directs de La Fourche, ainsi qu'à d'autres sites de e-commerce, afin d'obtenir une vision globale. Cela nous a permis de définir ce qui fonctionne et ne fonctionne pas – selon nous et nos connaissances en UX – afin de nous en inspirer par la suite.

👍🏻 Présence d'un fil d'ariane et barre de progression, montant total du paiement toujours affiché, sélection facile de l'heure de livraison, multiples modes de paiement

👍🏻 Informations sur la livraison et la politique de remboursement, proposition d'alternatives en cas de rupture de stock d'un produit, interface claire et intuitive

👎🏻 Pas de mention à propos de la sécurisation du paiement, montant minimum pour pouvoir commander, trop d'étapes / clics, impossibilité de revenir à l'étape précédente

Le processus de paiement étant un sujet crucial, il nous fallait compléter notre benchmark par de la recherche sur les bonnes pratiques et meilleurs exemples de processus de paiement en e-commerce, et bien sûr tenter de confirmer ou infirmer nos hypothèses quant à ce qui fonctionne et ne fonctionne pas sur le site de La Fourche grâce à des interviews utilisateurs.

Recherche

En même temps que nous planifions notre recherche utilisateur, nous avons parcouru et collecté des articles sur les bonnes pratiques et meilleurs exemples de flux de paiement en e-commerce. Cette phase de recherche a également porté sur les principales causes d'abandon durant le flux de paiement, et comment y remédier.

Principaux enseignements sur les éléments à optimiser :

👉🏻 Réduire le nombre d'étapes

👉🏻 Réduire le nombre de champs dans les formulaires, et optimiser leur remplissage

👉🏻 Permettre de modifier le panier et de retourner sur le site pour continuer ses achats

👉🏻 Faciliter l'accès à l'assistance et aux informations relatives à la livraison et aux retours / remboursements

👉🏻 Proposer des moyens de paiement alternatifs à la carte bancaire (Apple Pay et Google Pay, Paypal...)

Interviews utilisateurs

Ayant tiré de nombreux enseignements de nos phases de benchmark et de recherche, nous avons pu formuler des hypothèses quant aux améliorations à apporter au flux de paiement de La Fourche.
La recherche utilisateur nous a permis de :

👉🏻 Comprendre les habitudes de consommation sur les sites e-commerce (de manière générale et avec les utilisateurs de La Fourche)

👉🏻 Collecter des retours sur la version actuelle du flux de paiement de La Fourche en faisant tester le site aux utilisateurs

Limites : Nous n'avons pu avoir accès qu'à deux utilisatrices de La Fourche pour cette phase de recherche. Nous avons donc complété notre panel d'utilisateurs avec des personnes non-utilisatrices de La Fourche.

Apprentissages

👉🏻 Ils ont notifié le manque de cohérence entre les différents écrans

Tous les boutons sont différents, les informations en bas de page sont bizarres j'ai l'impression que la mise en page de chaque page est différente. – Benoît

👉🏻 Ils souhaitent pouvoir verifier et modifier leur panier avant le paiement
Before I pay, I check my list and numbers of each item. If I forget something, I will go back to search. – Leanne

Je ne peux pas modifier le nombre d’articles avant de payer. – Anne-Charlotte

👉🏻 Ils consultent les politiques d’envoi et de retour au moment du paiement
Before I pay, I usually check delivey information. It’s hard to find customer service. – Maggie

👉🏻 Une méthode de paiement sécurisé et rapide est appréciée
If I can pay with Paypal, I will feel the payment is safe. – Leanne

If I can chose another fast method pay, it will make the payment more easier. – Benoît

👉🏻 Retourner à l’étape précédente est compliqué (sur le site de La Fourche)
Si je veux retourner à l’étape précédente je clique sur le logo, mais il n’est pas clickable, c’est diffile de retourner en arrière. – Anne-Charlotte

Tendances

Nos deux utilisatrices de La Fourche nous ont appris que si elles utilisent le site mobile pour faire leur shopping, toutes deux ne procèdent au paiement que sur la version bureau du site, pour des raisons de confort et de lisibilité. De plus, elles utilisent le panier comme une liste de courses qu'elles complètent à différents moments de la semaine, avant de passer commande. Cela explique en partie le taux d'abandon sur mobile.

Nous avons également découvert que l'une des principales frictions que rencontraient les deux utilisatrices de La Fourche ne concernait pas le flux de paiement mais un problème de stock et de catalogue. En effet, il leur arrive régulièrement qu'un article ajouté dans leur panier ne soit plus en stock, ou que certains produits disparaissent du catalogue sans qu'elles en soient informées. Une visite sur le groupe Facebook de la communauté La Fourche nous a permis de confirmer ce problème.

De manière globale, nous avons pu confirmer que les utilisateurs accordent une grande importance à la sécurisation du paiement, et le vérifient en cherchant le cadenas et le "https" présent dans la barre d'adresse. La présence d'alternatives de paiement connues (Paypal) est un incitateur d'achat considérable de part l'aspect sécurité et simplicité, l'utilisateur n'ayant pas besoin de renseigner l'adresse de livraison et le moyen de paiement. Ce dernier point a également permis de mesurer la grande importance qu'accordent les utilisateurs à la préservation de leurs données personnelles et bancaires, et donc leur réticence à les renseigner sur les sites de e-commerce notamment.

Idéation

À l'issue de notre recherche, nous avons re-formulé la probématique en "How Might We's" :

👉🏻 Comment pourrions-nous rendre le procédé de paiement fluide et rapide pour le premier utilisateur ?

👉🏻 Comment pourrions-nous rendre les commandes suivantes encore plus rapides et plus pratiques ?

Durant notre phase d'idéation nous avons décidé de nous focaliser sur une approche "mobile first", avec pour mots d'ordre : facile, rapide, sécurisé. Nous avons donc cherché à augmenter le confort et l'ergonomie, à simplifier chaque étape du processus de paiement, tout en réintégrant la marque et en créant une homogénéité avec le design global du site.

V1

Améliorations proposées :

👉🏻 Ajout d'un logo cliquable permettant à la fois de conserver le branding dans le flux de paiement et de retourner sur le site pour ajouter d'éventuels articles oubliés

👉🏻 Panier plus lisible, classant les produits en catégories, accessible et modifiable à chaque étape du processus de paiement

👉🏻 Réduction de 50% du nombre de champs à remplir dans l'étape de saisie des coordonnées (4 vs 8)

👉🏻 Ajout d'une carte interactive lors de l'étape de choix d'un point relais et ajout des horaires d'ouverture

👉🏻 Facilitation de la saisie d'une nouvelle carte bancaire (possibilité de scanner la carte)

👉🏻 Ajout Apple Pay, Google Pay et Paypal

👉🏻 Ajout d'un écran récapitulatif avant la confirmation de la commande (avec accès rapide pour modifier les informations saisies à chaque étape)

Tests utilisateurs

👉🏻 4/4 utilisateurs ont trouvé le processus de paiement fluide et facile

👉🏻 3/4 utilisateurs ont déclaré que la qualité des produits avait le plus d’impact sur la fidélisation que n’importe quelle fonction

Pistes d'améliorations suite aux tests

👉🏻 Prevenir les utilisateurs de l’indisponibilité des produits à plusieurs étapes Je cherchais un produit que j’ai l’habitude d’acheter sur La Fourche et ils ne l’avaient plus, je n’avais pas eu de notification. – Saphir

👉🏻 Rendre possible le choix d’enregistrement des informations de la carte bancaire Je n’aime pas que les informations de ma carte bleue soient automatiquement enregistrées, je ne trouve pas ça rassurant – Cécilia

V2

Après avoir apporté la touche finale à notre flux de paiement, nous avons élargi notre réflexion à l'ensemble de l'expérience. Nous avons notamment traité les problèmes de stock et de catalogue avec deux idées de solutions :

👉🏻 Prévenir des indisponibilités produits en amont quand c’est possible

👉🏻 Proposer des produits de remplacement dans la page “Panier” pour ne pas quitter le paiement

Flux de paiement

Bouton play

En détail

Tenant compte des retours de certains utilisateurs, nous avons ajouté la possibilité de saisir une adresse spécifique pour la recherche de point relais, dans le cas où la personne souhaiterait retirer son colis près de son lieu de travail par exemple.

Nous avons également ajouté une confirmation de suppression d'article dans le panier.

Afin de faciliter le re-ordering, nous avons imaginé la possibilité d'ajouter le contenu des commandes récentes dans le panier en un clic...

... ainsi qu'un flux de paiement pré-rempli allant directement à l'écran récapitulatif.

Rupture de stock et sortie de catalogue

Nous avons enfin imaginé un système de notifications lorsqu'un produit présent dans le panier est en rupture de stock...

...ou lorsqu'un un "produit habituel" quitte le catalogue de La Fourche.

Dans les deux cas l'utilisateur peut choisir d'être notifié lorsque le produit est de nouveau en stock...

...et le site lui propose une sélection de produits alternatifs.

Conclusion

Ce dernier projet proposé par The Design Crew aura été l'occasion de mettre en pratique les compétences et l'expérience acquises durant la formation en totale autonomie et sur un cas de e-commerce très intéressant.

Sur un plan personnel, j'ai pu avoir la confirmation de ma capacité à gérer un projet et à veiller à maintenir un cadre de travail bienveillant, encourageant chacun.e à partager ses idées. J'ai également eu la confirmation de mon appétence pour la recherche utilisateur et de mon aisance à mener une interview ou un test.

Quant au projet en lui-même, il nous a permis d'acquérir de nombreuses connaissances en UX sur la thématique e-commerce, plus spécifiquement sur les processus de paiement. Nous avons également pu mesurer l'importance de la phase de recherche, notamment en ce qu'elle permet de découvrir l'existence de problèmes à d'autres endroits de l'expérience utilisateur.

Pour aller plus loin

Lors de notre phase de recherche nous avons découvert que certaines personnes pouvaient être freinées à l'idée d'enregistrer leur carte de crédit pour activer l'essai gratuit. S'il est bel et bien possible de l'annuler à tout moment, le renouvellement (et donc le début de la facturation) est actuellement automatique (avec une notification à l'approche de la fin de la période d'essai). Nous suggérons simplement, à l'instar du "pass Uber Eats", que le renouvellement ne soit pas automatique par défaut. Nous supposons que cela aurait pour effet de renforcer le lien de confiance avec La Fourche, et de limiter la charge mentale liée aux divers abonnements, tout en donnant à l'utilisateur la sensation d'avoir le contrôle.

Voir plus de projets

Lydia

Rendre transparentes les limites d'utilisation

Airbnb

Optimiser la conformité des annonces

Sato Creative

Co-concevoir et développer un site web sur-mesure pour une agence créative

Projet personnel

Concevoir et réaliser un site web original