Eptimum.com - e-commerce B2C
Refonte du tunnel d’achat
L'ancien tunnel regroupait l'ensemble des étapes de l'achat sur une seule page, ce qui pouvait désorienter certains utilisateurs et rallonger le processus de commande. La refonte a permis de séquencer le parcours, de clarifier les actions et de mieux accompagner l'utilisateur jusqu'au paiement.
1 — Quel était le contexte ?
La refonte du site A.com a été réalisée en plusieurs étapes.
Lors du lancement du nouveau site, le tunnel d’achat n’avait pas encore été repensé. Une première adaptation graphique avait simplement permis de l’intégrer visuellement au nouvel univers du site.
Historiquement, la finalisation d’un achat se faisait sur une page unique regroupant le panier, l’authentification et le paiement. Cette approche était notamment liée au contexte historique du site, où le panier moyen contenait généralement un seul article.
Avec l’évolution du site et des usages, il devenait nécessaire de revoir ce parcours afin de le rendre plus clair, plus progressif et mieux adapté aux différents scénarios d’achat.
2 — Ma mission
Analyse
Audit de l'existant - Analyse des parcours - Benchmark Ui
Conception
Flowchart - Principes UI - Wireframes - Maquettes HD - Responsive
Système UI
Mises à jour du Kit UI
Collaboration
Présentation et argumentation des choix - Échanges avec les équipes métier et développement - Tests de conformité
3 — Problématiques
Un parcours trop dense
Panier, authentification et paiement étaient regroupés sur une même page, ce qui augmentait la quantité d'informations et d'actions à traiter simultanément.
Une navigation peu lisible
L'utilisateur pouvait avoir des difficultés à comprendre où il se trouvait dans le processus et quelles actions étaient encore nécessaires.
Des temps de complétion élevés
L'analyse des enregistrements de sessions montrait que certains utilisateurs passaient beaucoup de temps à compléter leur achat et pouvaient effectuer plusieurs allers-retours.
Une surcharge d'information
Le contenu affiché n’était pas optimisé et comportait trop d’informations au moment où l'utilisateur devait finaliser son achat.
Comment simplifier le processus d'achat tout en donnant à l'utilisateur suffisamment de visibilité et de réassurance pour aller jusqu'au paiement ?
4 — Objectifs
Réduire la charge cognitive
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers
Clarifier le parcours
Donner de la visibilité sur la progression - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers
Optimiser chaque étape
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers
Limiter les erreurs et permettre leur correction
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers
Rassurer l’utilisateur avant le paiement
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers
5 — Démarche
Observer
Étudier les enregistrements de sessions afin de comprendre les comportements. Identifier les moments de confusion, les hésitations, les allers-retours et les difficultés rencontrées pendant le parcours.
Identifier
Les différents scénarios : Achat réussi, paiement refusé, paiement en attente…
Benchmark UI
Sites concurrents et pratiques actuelles.
Structurer
Le parcours : Transformation du parcours unique en plusieurs étapes afin de séquencer progressivement les informations et les actions.
Concevoir
Wireframes - Prototypes - Maquettes HD - Travail sur la hiérarchie des informations, les actions principales, les états et les messages de réassurance.
Décliner
Responsive. Adaptation du parcours aux différents supports.
Collaborer
Échanges avec les équipes métier et développement.
Itérer
Ajustements, retours, validation.
6 — Solutions
Un tunnel d’achat en plusieurs étapes permet de guider progressivement l’utilisateur. Chaque étape possède un objectif clairement identifié et limite la quantité d’informations et de décisions présentées simultanément. Le découpage du parcours rend également la progression plus lisible et permet à l’utilisateur de mieux se situer dans le processus d’achat.
Lorem ipsum
Lorem ipsum
7 — Résultats & enseignements
Ce qui a changé
Le nouveau découpage a permis de rendre les étapes plus lisibles et de limiter les allers-retours observés dans l'ancien parcours.
Les informations ont été redistribuées afin de présenter uniquement les éléments nécessaires à chaque étape.
Les différents états du parcours — paiement accepté, refusé, en attente ou erreur — ont été intégrés directement dans la conception afin d'apporter un feedback clair à l'utilisateur.
Ce que le projet m’a apporté
Ce projet m'a permis de mieux comprendre l'importance du séquençage dans les parcours complexes : réduire la quantité d'informations présentées simultanément peut aider l'utilisateur à se concentrer sur la décision qu'il doit prendre à chaque étape.