Structurer une démarche UX pour moderniser un site e-commerce
Comment j'ai installé la première démarche UX et le premier design system de Rapid Flyer, tout en améliorant son tunnel d'achat.
01 · Contexte
Un site qui évoluait au gré des besoins métier, sans démarche UX
Rapid Flyer vend de l'impression personnalisée en ligne, aux particuliers comme aux professionnels. À mon arrivée, il n'y avait ni démarche UX structurée ni design system : les décisions produit suivaient surtout les besoins métier et les contraintes techniques. La mission : améliorer les performances du site tout en posant des bases solides pour la suite, dont le lancement d'un service de Print on Demand B2B.
La direction voulait un changement de positionnement marketing et d'identité visuelle et ainsi profiter de ce projet pour mettre en place un Design System.
02 · Problème
Des lacunes pour identifier et prioriser les frictions
Le taux d'abandon de panier atteignait près de 3 paniers sur 4 (74 %) et le tunnel d'achat n'était complété que dans 31 % des cas. Sans recherche ni composants communs, chaque évolution se concevait au cas par cas.
03 · Recherche
Cibler les problèmes avant de concevoir et développer
J'ai d'abord analysé le produit existant, puis présenté les conclusions à la direction et à la Product Owner pour fixer les priorités.
Exemples de 2 écrans de l'ancien site et une partie de la liste des points d'amélioration relevés lors de l'audit du parcours de personnalisation du produit. Captures d'écran issues de Wayback Machine, ce qui explique l'absence de certains visuels.
04 · Solution
Retravailler les parcours et créer le premier Design System en parallèle
Les parcours ont été repensés pour simplifier les étapes clés du tunnel d'achat, et l'arborescence comme la navigation ont été retravaillées. Les nouvelles fonctionnalités ont été testées sur prototypes avant développement.
Parcours utilisateurs du site principal de Rapid Flyer présentant les étapes principales du parcours.
Les pages ont été retravaillées par "bloc" : découvrabilité (accueil, catégorie de produits, page produit, menu), le tunnel d'achat, l'espace utilisateur, conseils & inspiration, centre d'aide... afin de penser les améliorations de manière globale et cohérente.
Avant la refonte :
- Menu dense qui mélange les produits et des secteurs professionnels.
- Des boutons de styles différents et inconsistants (forme, couleur, intitulé...).
- Le service de créations graphiques n'est visible que dans le header.
- La page est longue et la première section proposée est de la mise en avant d'autres produits alors que l'utilisateur peut rechercher des informations.
Après la refonte :
- Simplification du menu pour mettre en avant les offres différenciantes (Express : impression et livraison en 24h).
- Uniformisation et hiérarchisation des boutons dans tous les parcours.
- Mise en avant du service de créations graphiques dès la page produit
- Onglets d'ancres qui permettent de naviguer rapidement dans la page
Avant de passer une nouvelle fonctionnalité en développement, une phase de test sur prototype était conduite pour valider ou invalider la solution.
Cas concret : un projet de livraison d'une commande à différentes adresses a été mené jusqu'à la phase de test sur prototype mais n'a pas été développé car il s'est avéré que cette fonctionnalité allongeait et complexifiait le parcours des particuliers qui n'étaient pas la cible de la fonctionnalité. Cette décision a apporté un argument supplémentaire pour lancer un service de Print on Demand, destiné aux professionnels exclusivement.
Extraits d'une restitution de tests utilisateurs pour une fonctionnalité de "commande avec livraison à plusieurs adresses".
05 · Design System
Un Design System commun pour plusieurs produits
Conçu en parallèle des nouveaux parcours, le Design System devait unifier les interfaces du site et du futur service Print on Demand, faciliter leurs évolutions et amorcer le changement d'identité visuelle.
Extraits des styles et des composants en suivant la philosophie Atomic Design (Atomes → Molécules → Organismes → Templates → Pages) qui forment la librairie UI liée à Storybook pour les composants web et Zeroheight pour la documentation et les guidelines. Un tableur Airtable a été créé pour faire le lien entre les différentes plateformes et le suivi du cycle de vie des composants.
06 · Résultats
Plus de paniers validés, et une équipe qui conçoit désormais avec ses utilisateurs
- Taux de conversion, de 2,3 % à 2,5 % (+8,7 % en valeur relative)
- +0,2 pt
- Paniers abandonnés, de 74 % à 67 % (−9,5 % en valeur relative)
- −7 pts
- Complétion du tunnel d'achat, de 31 % à 37 % (+19,4 % en valeur relative)
- +6 pts
Le site convertit mieux et les services de créations et retouches graphiques rattachés à une commande ont progressé de 12 % en valeur relative. Surtout, l'entreprise dispose désormais d'une méthode et d'un Design System partagé entre ses deux produits.
Projet suivant