Cas pratique : Comment optimiser l’expérience utilisateur·rice·s sur son site e-commerce et augmenter ses ventes ?

Bonjour et bienvenue cher·ère lecteur·rice :)

Nous allons voir la méthodologie utilisée lors de la refonte du tunnel de vente* d’un site d’une grande marque de prêt-à-porter français pour les 20–40 ans. L’expérience date de 2017, mais la méthode est intemporelle !

Malgré les quelques années du site, il restait dans l’air du temps et continuait de bien convertir par rapport à la tendance du marché (d’après Patrick, directeur e-business & relation client de la marque). Néanmoins, avec l’émergence du mobile et des nouveaux usages des consommateurs, nous avions une belle marge de progression devant nous. En analysant régulièrement les statistiques d’usage, Patrick s’était aperçu que le site était victime d’un joli taux de rebond* dans le tunnel de vente et a fortiori sur les appareils mobiles.

En partenariat avec Patrick, nous avons mis en place un plan d’action pour répondre à cette opportunité de business et d’image de marque. Voici étape par étape les actions que nous avons menées.

1. Définition des objectifs et indicateurs de performance

Pour commencer une mission, il est important de connaître les objectifs de l’entreprise et de l’équipe projet, ici ils étaient assez clairs :

• Augmenter le chiffre d’affaire sur le site internet
• Rattraper le retard sur mobile

Pour influer sur ces objectifs, nous avons défini trois leviers d’actions principaux :

• Réduire le taux de rebond sur mobile
• Augmenter le nombre de commandes
• Augmenter le panier moyen

Ces leviers étaient aussi nos indicateurs clés, si ces indicateurs évoluaient, nous savions que nos actions étaient efficaces.

Une fois cette étape terminée, nous avons commencé la mission par l’étude des utilisateur·rice·s pour mieux comprendre les points de blocage.

2. Définition des personæ*, de leurs parcours & audit de l’expérience globale

Nous avons analysé en détail l’expérience utilisateur. De l’arrivée sur le site depuis les réseaux sociaux, jusqu’à l’achat en ligne et même le retrait en boutique. Il faut prendre en compte que chaque utilisateur·rice a une expérience différente. Elle et il peut consulter le site sur mobile ou sur desktop, être au travail ou sur son canapé, connaître la marque ou pas, savoir ce qu’elle et il veut ou pas, être plus ou moins à l’aise avec les nouvelles technologies, etc.

Nous avons donc établi une liste de personæ :

• Gary, 28 ans, Marseille, connaît bien la marque, budget 150€ par trimestre, achète pour lui, aime bien les promotions, dispose d’un compte fidélité, fait tout depuis son téléphone et de n’importe où.
• Sophie, 35 ans, Bordeaux, connaît la marque, budget 100€ par mois, achète pour elle et son mari, n’a jamais acheté cette marque.
• Frédéric, 32 ans, Clermont-Ferrand, achète uniquement en ligne et retire en boutique, ne connaît pas encore la marque
• Etc.

Exemple de fiche persona

Nous avons ensuite analysé les parcours de navigation des personæ afin de lister tous les points de friction qu’ils rencontraient lors d’interactions avec la marque (informations qui pourraient manquer, design qui ne met pas suffisamment en avant un élément important, réassurance* peu visibles, etc.).

Carte d’expérience d’un utilisateur

Nous avons aussi analysé en détail les pages desktop et mobile en nous basant sur :

1. les critères de Bastien et Scapin :

• Guidage
• Charge de Travail
• Contrôle Explicite
• Adaptabilité
• Gestion des Erreurs
• Homogénéité / Cohérence
• Signifiance des Codes et Dénominations
• Compatibilité

2. les heuristiques de Nielsen et Molich :

• Visibilité de statut du système
• Correspondance entre le système et le monde réel
• Contrôle de l’utilisateur et liberté
• Consistance et étalon (normalisation)
• Prévention contre les erreurs
• Reconnaissance plutôt que rappel
• Flexibilité et efficience d’utilisation
• “Design” esthétique et minimaliste
• Fonctions de l’aide (reconnaissance, diagnostic et récupération d’erreurs)
• Aide et documentation

Ces deux méthodes d’analyse permettent de vérifier tous les points potentiellement sensibles d’une interface numérique (d’un site, d’une application, d’une borne, etc.). Nous avons trouvé grâce aux deux méthodes un certain nombre d’incohérences, de problèmes, ou de freins à l’expérience utilisateur… A ce moment là, nous avons dû faire preuve de créativité et trouver des solutions afin de proposer des améliorations à chacun des problèmes.

3. Nos recommandations d’améliorations

Pour que Patrick puisse se projeter et visualiser nos préconisations, nous avons réalisé des wireframes* interactifs de plusieurs parcours utilisateurs comprenant les pages suivantes :

• Accueil
• Liste des produits
• Produit
• Panier
• Connexion / inscription
• Adresses de livraison / facturation
• Paiement
• Confirmation

Nos recommandations n’imposaient pas une refonte complète du site, mais plutôt la mise en place de quick-wins*. Pour vous donner quelques exemples, nous avons fait des recommandations à plusieurs niveaux :

• Modification de la taille et la couleur des boutons d’action
• Ajout d’éléments de réassurance (tous les moyens de paiement ou les frais de retour gratuits)
• Ajout du récapitulatif de commande à chaque étape du tunnel
• Simplification des interfaces
• Agrandissement des images
• Réduction du nombre d’étapes du tunnel d’achat
• Ajout d’informations complémentaires sur les produits
• …

Tout ça en gardant en tête les objectifs fixés en amont de la mission.

4. Le test utilisateur simple, efficace et évolutif

L’étape la plus excitante, la confrontation de nos recommandations face aux utilisateur·rice·s finaux !

L’objectif du test utilisateur est d‘observer les réactions des testeurs lors de la découverte et l’usage de l’outil, afin d’éviter les problèmes d’ergonomie. D’ailleurs, un test utilisateur de 8 à 10 personnes, aléatoirement sélectionnées, permet d’éviter 90% des problèmes d’ergonomie !

Dans notre cas de figure, nous avons mis en place un scénario de test étape par étape que l’utilisateur·rice peut suivre seul·le, par exemple : Vous arrivez sur le site de vente en ligne, depuis la page d’accueil trouvez le produit chemise en lin pour homme, puis ajoutez le au panier en sélectionnant la taille M en 1 exemplaire…

Nous avons choisi de faire un guerilla testing, le terme peu paraître barbare, mais pas du tout, le protocole est plutôt confortable pour tout le monde. Ce type de test n’impose pas la sélection d’un panel utilisateur·rice·s, mais plutôt de prendre des gens de manière aléatoire. Il se pratique dans un lieu public avec du passage, il faut néanmoins privilégier un endroit où les gens ont du temps, car le test peut durer entre 10 et 15 minutes. Nous avons l’habitude de le faire à la terrasse d’un café, ça nous permet d’être confortablement installé et d’offrir une boisson ou une viennoiserie aux testeur·euse·s en guise de remerciements.

Pour faire tester, il faut recruter ! Là où le bât blesse, forcément, en arrêtant des passants inconnus, nous sommes inévitablement assimilé à une association dans le besoin (avec tout le respect que j’ai pour eux, mais malheureusement l’amalgame est facile).

Le guerilla testing, permet aussi d’ajuster le scénario au fil de l’eau. Nous nous sommes aperçus que certaines choses posaient problèmes à plusieurs testeur·euse·s. Nous avons donc fait évoluer le scénario pour que les testeur·euse·s suivant·e·s ne buttent pas sur ce point et puissent continuer le test en se focalisant sur le reste. Aussi en parallèle, nous avons fait évoluer les wireframes pour apporter une solution aux problèmes rencontrés et les faire tester à d’autres utilisateur·rice·s dans la foulée pour valider nos améliorations.

Nous n’avons malheureusement pas pu tout corriger en live, il faut prendre en note les potentiels problèmes et les verbatims des testeur·euse·s, souvent très riches et très significatifs, en voici un petit échantillon :

Sur le panier on ne peut pas choisir son point relais ? Je ne sais pas que je pourrai le choisir après.

Le code promo, je le rentre où ?

J’aime bien avoir les frais de livraison dès le début du panier

Ça m’angoisse de m’inscrire avec mon compte Facebook

Je trouve ça très rapide d’utiliser mon compte Facebook

C’est important de pouvoir revenir sur le panier

C’est plus clair sur mobile, très pratique !

5. Retours utilisateur·rice·s

Une fois les tests terminés, nous avons priorisé les retours en fonction de leur criticité. Les utilisateurs ont souligné des points que nous avions manqués ou pas suffisamment travaillés, mais aussi confirmé des points pour lesquels nous n’étions pas convaincus à la base.

Nous avons sélectionné avec le client les points à intégrer en priorité. Les retours utilisateurs peuvent parfois impliquer des fonctionnalités complexes nécessitant des moyens, du budget, des ressources logistiques, etc. Nous avons donc établi une roadmap pour les points moins prioritaires afin de les intégrer ultérieurement.

Wireframe du panier après intégration des retours utilisateur

Après avoir terminé les derniers correctifs et peaufiné les wireframes, nous avons passé le relais à l’équipe design de la marque pour qu’elle réalise les maquettes graphiques. Nous avons travaillé main dans la main pendant cette phase et garanti que les choix graphiques allaient dans le sens de nos recommandations.

Les maquettes graphiques sont ensuite passées entre les mains du top management de la marque pour une dernière validation et après quelques retouches, nous avons développé des nouveautés et des améliorations que nous avions recommandées.

6. Mise en production & analyse des données

Le hasard du calendrier, nous a permis de mettre en ligne toutes les modifications quelques jours avant le black friday*. Nous avons eu rapidement des statistiques d’usage quantitatives du site ainsi que des données très précises sur les ventes réalisées en ligne.

Tous les voyants étaient au vert :

• + 150% de ventes sur mobile
• + 75% sur tablettes et desktop
• - 30% de taux de rebond sur le panier

Patrick a été surpris par la qualité des retours terrain récoltés et surtout par le retour sur investissement de cette mission. S’il n’y avait que 5 choses à retenir :

• Un petit budget
• Un court planning
• Des retours objectifs et humains
• Des recommandations testées et validées
• Une expérience utilisateur optimisée !

« Ce projet a permis d’optimiser le tunnel d’achat, il a été un succès dès la première offre commerciale d’importance : le black friday, qui nous a permis d’augmenter de 150 % notre taux de transformation sur les supports smartphones, de 75% sur tablettes et sur desktop.

Ce projet a été mené en totale confiance avec notre partenaire sur les aspects ergonomiques, qui sont évidemment stratégiques pour un tunnel d’achat. »

Patrick, directeur e-business & relation client

Après plus de quatre années de collaboration, nous travaillons toujours avec Patrick, aussi bien sur sa stratégie en ligne que sur la digitalisation de ses points de ventes.

Merci pour votre lecture, j’espère que l’expérience vous aura plue et que vous aurez l’occasion de la mettre en pratique ;) Si vous avez besoin d’un coup de pouce, n’hésitez pas, nous serions ravis de vous aider.

A bientôt.

* Taux de rebond : Fait qu’un visiteur accède à une page web et reparte sans interagir ou lire le contenu.

* Tunnel de vente : les étapes d’achat en ligne, il est composé du panier, de la connexion/inscription, de la saisie de l’adresse de livraison et de facturation, du paiement, de la confirmation de paiement et de la confirmation de commande.

* Personæ : Un personæ est le stéréotype d’un groupe d’utilisateur·rice·s avec des objectifs, des besoins et des craintes similaires. Les personæ permettent d’analyser l’ensemble des besoins d’un outil pour ces différentes cibles.

* Wireframe : Appelé aussi “mockup”, “maquette fil de fer” ou encore “maquette noir et blanc”. Le wireframe est un genre de dessin d’architecte dédié au numérique. Il permet de mettre en scène du contenu, de l’organiser, de le hiérarchiser, sans se préoccuper de la forme définitive (design graphique).

* Quick wins : de l’anglais victoires rapides. Les quick wins sont des modifications avec un fort retour sur investissement : simples à mettre en place et à fortes valeurs ajoutées pour les utilisateurs finaux.

* Réassurance : éléments de l’interface dédiés à mettre en confiance l’utilisateur et à montrer la crédibilité du site (ex : livraison offerte, plusieurs moyens de paiement, satisfait ou remboursé, retours gratuits, etc.)

* Black Friday : de l’anglais vendredi noir. Période de promotion en ligne et en magasin après le jeudi de Thanksgiving.