Contexte
Conception d'une nouvelle étape de souscription qui enrichit l'offre B&You tout en préservant la rapidité et la lisibilité du parcours.
Étude de cas · 01/04
Intégrer des options sans alourdir le parcours d'achat
Conception d'une nouvelle étape de souscription qui enrichit l'offre B&You tout en préservant la rapidité et la lisibilité du parcours.
- Client
- Bouygues Telecom
- Année
- 2024
- Rôle
- UX/UI Designer
- Outils
- Figma
Vue d’ensemble
Du problème à l’impact.
Les éléments clés pour comprendre le contexte, ma démarche et la valeur créée.
Problématique
Comment proposer l’ajout d’options dans le parcours d’achat B&You tout en facilitant sa compréhension et son engagement ?
Mon rôle
J’ai analysé les standards e-commerce, structuré l’étape dans le tunnel puis conçu et itéré les wireframes avec les parties prenantes, dans le respect du design system et des contraintes du parcours existant.
Démarche UX
- Benchmark e-commerce
- Architecture du parcours
- Wireframes
- Prototype haute fidélité
Solution
Une proposition progressive, cohérente avec le design system, où l'utilisateur comprend immédiatement le bénéfice, le prix et la possibilité de continuer sans option.
Impact & preuves
3benchmarks analysés
1nouvelle étape intégrée
0choix imposé à l’utilisateur
Une recommandation commerciale crée de la valeur lorsqu’elle reste compréhensible, réversible et située au bon moment du parcours.
Le défi
Comment proposer l’ajout d’options dans le parcours d’achat B&You tout en facilitant sa compréhension et son engagement ?
Ma contribution
- Benchmark e-commerce
- Architecture du parcours
- Wireframes
- Prototype haute fidélité
01 · Overview
Contexte
Nouvelle fonctionnalité sur le parcours d’achat des forfaits B&You, l'ajout d'options vise à enrichir l’offre et à mieux répondre aux besoins des utilisateurs. L’enjeu était de concevoir une intégration fluide et intuitive, sans alourdir l’expérience d’achat.
L’un des principaux challenges de ce projet a été d’introduire l’ajout d’options dans le parcours d’achat des forfaits B&You sans perturber l’expérience utilisateur. Il était essentiel de s’assurer que cette nouvelle étape n’entraîne ni friction ni abandon, tout en mettant en avant la valeur des options proposées.
Un autre défi a été d’assurer une cohérence visuelle et éditoriale avec les animations commerciales déjà présentes sur le site. L’objectif était d’intégrer les options dans un format aligné avec les templates existants et la présentation des offres, afin de maintenir une expérience homogène et engageante tout au long du parcours d’achat.
Challenges & objectifs
- Intégrer l’ajout d’options sans friction pour préserver une expérience d’achat fluide et intuitive.
- Maximiser la valeur perçue des options en les rendant claires et attractives pour l’utilisateur.
- Assurer une cohérence avec les animations commerciales en respectant le design system et la présentation des offres existantes.
02 · Recherches
Benchmark
J’ai analysé différentes approches utilisées sur les sites e-commerce pour encourager l’ajout de produits ou services complémentaires lors du parcours d’achat. L’étude s’est concentrée à la fois sur l’intégration des recommandations, le moment et l’emplacement dans le tunnel, et sur le design visuel des modules de suggestion.
Back Market
Forces
- L’ajout d’un article au panier est immédiatement confirmé, ce qui rassure l’utilisateur et lui offre un retour visuel instantané sur son action.
- La pop-up affiche des produits fréquemment achetés avec l’article, ce qui peut encourager l’utilisateur à ajouter des options ou des accessoires qui complètent son achat.
Faiblesses
- La pop-up présente deux sections similaires, ce qui peut prêter à confusion et surcharger l’utilisateur avec des informations redondantes.
- L’utilisateur doit effectuer deux types de scroll, vertical et horizontal, ce qui peut rendre la pop-up moins fluide et plus difficile à parcourir.
Orange
Forces
- La page dédiée permet de fournir des informations claires et détaillées sur chaque option.
- Le fait d’être redirigé vers une page dédiée évite la surcharge d’informations dans une pop-up et offre une expérience plus aérée.
Faiblesses
- Le long défilement nécessaire pour atteindre les CTA peut être frustrant pour l’utilisateur, notamment sur mobile.
SFR
Forces
- Les CTA flottants permettent de garder la possibilité de poursuivre son parcours facilement.
- Les prix sont mis en avant de façon claire et détaillée.
Faiblesses
- Le bouton retour n'est pas flottant et disparaît lorsque l'utilisateur fait défiler la page.
- Le défilement horizontal est difficile à utiliser et peut frustrer les utilisateurs qui ne parviennent pas à naviguer de manière fluide.
03 · Conception
Arborescence
La nouvelle étape a été intégrée entre le choix du forfait et le panier, avec la possibilité d’ajouter, supprimer ou consulter les options sans interrompre la progression.
04 · Conception
Idéation
Avec les connaissances de mon analyse initiale et de mes conversations avec l'équipe de conception, j'ai esquissé diverses itérations et wireframes low-fidelity pour la fonctionnalité.
05 · Solution finale
Une recommandation claire au bon moment
Après avoir exploré plusieurs itérations de design, j’ai affiné mes propositions en collaboration avec les parties prenantes du projet pour proposer la version finale.
06 · Impact
Apprentissages
Ce projet a permis de dégager trois principes pour intégrer des recommandations commerciales sans dégrader l’expérience d’achat.
Simplifier le parcours pour fluidifier la conversion
L’ajout d’options doit être perçu comme une opportunité et non comme une contrainte. Une approche trop intrusive ou un parcours trop long peut freiner l’utilisateur. Des recommandations bien intégrées réduisent les frictions et améliorent l’expérience d’achat.
Prioriser l’essentiel pour éviter la surcharge d’informations
Trop d’informations ou de choix en simultané peuvent générer de l’hésitation et ralentir la prise de décision. Il est crucial de hiérarchiser les contenus selon le contexte et le besoin de l’utilisateur.
L’importance des CTA visibles et accessibles
Un parcours efficace repose sur des éléments d’interface bien positionnés. Des CTA flottants ou bien ancrés guident l’utilisateur sans effort et réduisent les risques d’abandon.
Résultat