Glady améliore son parcours utilisateur de conversion en bons d'achat.
Refonte de la fiche enseigne Maisons du Monde sur la plateforme grand public Glady. Objectif : augmenter le taux de conversion en bons d'achat, améliorer le taux de lecture des conditions et lever l'incompréhension de la division des bons. Discovery, idéation collaborative et tests utilisateurs sur 1 mois et demi.
Une expérience de conversion plus fluide, mieux comprise, plus efficace.
↗
Taux de conversion en bons d'achat boosté grâce aux montants pré-définis et au parcours simplifié.
5/5
Lisibilité des conditions validée en tests : pictogrammes + hiérarchie visuelle plébiscités à l'unanimité.
5
Tests utilisateurs modérés en visio — 4 femmes / 1 homme, 37 à 48 ans, France entière.
01 · Contexte
Une fiche enseigne qui compliquait la conversion en bons d'achat.
Glady est un fournisseur de chèques cadeaux qui donne accès à une sélection d'enseignes partenaires. Chaque enseigne est présentée à travers une "fiche enseigne" détaillée, avec ses conditions d'utilisation et la description de ses services. Notre mission : repenser la fiche enseigne Maisons du Monde en version desktop, sur trois axes — UX & ergonomie, design visuel, design d'interaction.
Ancien bandeau enseigne · une bannière full-width avec un CTA "Voir le site internet" en bas à droite et une description tassée en surimpression sur la photo. Lecture difficile, hiérarchie peu claire.
Existant · saisie
Bloc de saisie peu guidant
Choix de montants pré-définis (20€/30€/50€/100€) ou champ personnalisé : trop d'options simultanées, pas de hiérarchie.
Existant · découpage
Découpage des bons en aveugle
Quand le montant n'est pas disponible, l'utilisateur reçoit plusieurs cartes cadeau sans contextualisation — incompréhension totale.
Ce que nous connaissons de l'existant
Quatre frictions identifiées avant la Discovery.
L'audit de l'expérience actuelle, la lecture des tickets support et les premières observations Hotjar ont permis d'isoler quatre zones de friction systématiques sur la fiche enseigne avant de lancer la phase exploratoire.
📜
Conditions illisibles
Difficulté à comprendre rapidement les conditions des enseignes — un mur de texte juridique difficile à parcourir, en particulier sur mobile ou pour les utilisateurs moins à l'aise avec le numérique.
🤔
Hésitation au montant
Hésitation lors du choix du montant — le convertisseur ne guide pas, les utilisateurs perdent confiance et abandonnent au moment de basculer leur dotation en bon d'achat.
📚
Surcharge d'informations
Surcharge de texte et d'informations entassées — la fiche enseigne demande à l'utilisateur d'absorber trop de contenu d'un coup, sans hiérarchie claire entre essentiel et secondaire.
Cible
👥
Des personas divers et variés
Les bénéficiaires Glady représentent l'ensemble de la population active française. Il faut concevoir une interface qui allie rapidité d'utilisation pour les "digital natives" tout en restant didactique, simple et accessible pour ceux moins familiers avec les outils numériques.
Cas d'usage
📅
Une utilisation ponctuelle
La fréquence de visite actuelle est faible : le contexte d'utilisation incite les utilisateurs à ne venir que ponctuellement. Pas question d'introduire des fonctionnalités originales ou déroutantes par rapport à ce qu'ils rencontrent ailleurs.
Problématique & objectifs
Comment améliorer les fiches enseignes pour optimiser et faciliter l'utilisation de Glady ?
Trois objectifs business ont guidé la démarche, alignés sur le funnel de conversion et la satisfaction utilisateur.
1Conversion
Augmenter la conversion en bons d'achat
Faire en sorte qu'un utilisateur arrivé sur une fiche enseigne aille jusqu'au bout du parcours d'achat sans abandonner en route.
2Lisibilité
Améliorer le taux de lecture des conditions
Donner envie aux utilisateurs de lire les conditions des enseignes — utilisation, validité, restrictions — avant de convertir leur dotation.
3Compréhension
Lever l'incompréhension du découpage
Expliquer pourquoi un montant personnalisé peut être réparti en plusieurs cartes cadeaux — un mécanisme aujourd'hui opaque.
Framework · Opportunity Solution Tree
Partir d'un outcome mesurable, descendre vers les opportunités, puis les solutions.
Le framework Opportunity Solution Tree (Teresa Torres) structure la réflexion produit en partant d'un objectif business mesurable, puis en identifiant les opportunités d'amélioration côté utilisateurs, avant d'explorer et tester différentes solutions.
🎯 OUTCOME
Un objectif business clair
Augmenter le taux de conversion des utilisateurs qui souhaitent transformer leur dotation en bons d'achat.
🔎 OPPORTUNITIES
Des frictions utilisateurs identifiées
Lecture difficile, hésitation, surcharge, manque de guidage — quatre opportunités issues de la Discovery.
💡 SOLUTIONS
Plusieurs pistes testées
Montants pré-définis, parcours en étapes, pictogrammes — chaque opportunité a fait naître plusieurs idées de solution.
02 · Design process
"…Like a diamond" — Double Diamant complet sur 6 semaines.
Nous avons fait appel à l'ensemble des étapes du Double Diamant : compréhension et définition du problème via la Discovery, idéation collaborative, prototypage Figma, tests modérés et itération à partir des enseignements.
USER RESEARCH
Comprendre & définir
Comprendre le comportement des utilisateurs et définir le problème.
IDÉATION
Veille & itération
Générer le maximum d'idées répondant à la problématique.
PROTOTYPAGE
Matérialiser
Transformer les idées en wireframes puis maquettes Figma.
TESTS
Tests utilisateurs
Tester la solution et en tirer les enseignements.
ITÉRATION
Améliorer
Affiner la solution à l'issue des résultats des tests.
🕵️ Phase exploratoire · User Research
Comprendre les comportements et besoins liés à une expérience d'achat en ligne.
L'objectif de cette phase exploratoire : rassembler les informations sur l'existant et organiser des entretiens semi-directifs en gardant une ouverture d'esprit constante, sans créer de biais. Nous avons aussi animé des ateliers internes pour identifier les pains connus, drops potentiels, et mettre en place des trackers et heatmaps.
1×
Audit existant
Analyse complète de l'ancienne fiche enseigne et des tickets support associés.
N
Entretiens semi-directifs
Avec des personnes utilisant ou non Glady (ou une plateforme similaire).
+
Ateliers parties prenantes
Pain points connus, drops, trackers, heatmaps, et data Hotjar.
Hotjar pour outiller la recherche.
Pour analyser les comportements utilisateurs et connaître le niveau de satisfaction de la plateforme, nous avons mis en place Hotjar : feedback instantané, heatmaps, recordings et entretiens individuels — tout au même endroit. Un excellent complément aux interviews et tests utilisateurs.
👁️Heatmaps pour identifier où les utilisateurs cliquent et regardent.
📊Trackers pour voir avec quels éléments ils interagissent réellement.
💬Surveys instantanés pour récolter le feedback à chaud sur le parcours.
Résultats & enseignements de la recherche
Trois besoins utilisateurs forts, validés par 5 verbatims sur 5.
Les entretiens ont fait émerger trois besoins systématiques dans l'expérience d'achat en ligne — confirmés par les ateliers parties prenantes et la data Hotjar.
🏃🏻♂️ Rapidité
3/5 utilisateurs
Avoir accès à l'information rapidement et simplement.
« J'ai dépensé un chèque cadeau qu'on m'avait offert sur Airbnb, en plusieurs fois, sans problèmes, c'était ultra simple. »
Virginie · 29 ans
🖼️ Visuel
5/5 utilisateurs
Du contenu visuel plutôt que textuel donne envie d'acheter.
« J'avais pas mes lunettes et il y avait trop de texte, alors ça ça m'a énervé. »
Didier · 69 ans
🧭 Guidage
4/5 utilisateurs
Être rassurés et guidés dans la prise de décision.
« Je commande sur Nature et Découvertes. J'ai toutes les infos très rapidement, c'est visuel et intuitif. Je peux passer à l'achat en quelques secondes. »
Aurélie · 26 ans
Problématique approfondie
Comment mieux accompagner les bénéficiaires sur Glady pour les aider à dépenser leurs chèques cadeaux ?
Suite aux enseignements de la recherche, nous avons challengé la problématique initiale. Le focus s'est déplacé du "comment améliorer la fiche enseigne" vers le "comment accompagner et guider les bénéficiaires pour qu'ils dépensent leurs chèques sans friction".
Analyse de la concurrence · benchmark
Apprendre des références du secteur — sur la lisibilité comme sur la conversion.
Pour chaque opportunité identifiée, nous sommes allés voir comment les acteurs majeurs traitent le sujet — pour s'inspirer des bons patterns sans les copier.
Conversion
Airbnb · cartes cadeaux personnalisables
Choix d'un visuel + montants pré-établis et option personnalisée. Parcours fluide, peu de friction.
Lecture conditions
Nature & Découvertes · pictos & hiérarchie
Conditions présentées avec pictogrammes (livraison, paiement, retour) et faible quantité de texte.
Lecture conditions
Back Market
Conditions générales "digestes" et visuelles — chaque garantie en pictogramme.
Lecture conditions
Déco Relief
Bandeau d'infos clés en pictogrammes : magasins, livraison, ancienneté, catalogue.
Conversion
Amazon · cartes cadeaux
Proposition de montants pré-établis avec champ "autre montant" en bout de ligne.
🧠 Phase d'idéation · ateliers collaboratifs
6 idées générées en atelier, 3 retenues pour le prototypage.
Après avoir établi la nouvelle problématique, nous avons mis en place plusieurs méthodes d'innovation collaborative en idéation, via des ateliers avec les parties prenantes — enseignes, légal, conformité, data — sur Miro et Figjam. 6 idées sont sorties, 3 ont été sélectionnées pour aller plus loin.
🎓
1Didacticiel
Système d'highlights
Mettre en avant les éléments importants de la fiche enseigne.
💡
2Choix guidés
Montants pré-définis
Aider la prise de décision avec des suggestions de montants.
✅
3Validation
Confirmer avant d'acheter
Valider les conditions d'utilisation avant de passer au panier.
🖼️
4Visuel impactant
Picto + copywriting
Revoir le copywriting et illustrer les propos via des pictos sur les conditions.
⭐
5Récurrence
Donner envie de revenir
Possibilité d'ajouter en favoris une enseigne pour la retrouver plus tard.
🤖
6Mascotte
Logo guide
Diriger le logo "Glady™" vers les éléments importants de la page, comme un guide.
Trois directions ont été matérialisées en wireframes pour confronter les hypothèses. Chacune adresse différemment l'accessibilité de l'action "saisir le montant" et la lisibilité des conditions.
Idée 01
CTA "Saisir le montant" mis en avant
Influence mobile, visibilité du CTA
Quantité de texte trop élevée
Risque de non-conversion
Idée 02
Actions via étapes 01 → 02 → 03
Système d'étapes intuitif et lisible
Gain de place
Quantité de texte encore trop élevée
Idée 03
Accompagnement via étapes en colonnes
Aérer et expliciter les actions requises
Banner full screen
Saisie du montant peu accessible
🤩 Solution privilégiée
Wireframe retenu pour le prototype
Mise en avantLogo enseigne, descriptif court, CTA "Visiter le site" — l'essentiel d'abord.
Aide à la sélectionMontants pré-définis (20€/30€/50€/100€) + ?-tooltip pour expliquer la logique.
Conditions hiérarchiséesPictogrammes + bullets courts pour digérer les CGV en un coup d'œil.
Récap clairCarte cadeau, solde actuel, solde après achat — chiffres lisibles avant validation.
🎓 Phase de tests utilisateurs
Tests modérés en visio sur prototype Figma — 30 minutes par session.
Une fois le guide de test rédigé sur Notion, nous avons mené des tests modérés en visio de 30 minutes sur notre prototype Figma. Trois objectifs de test : évaluer la facilité du flow de conversion, vérifier la clarté des conditions, vérifier la compréhension du découpage des bons.
Panel
4 femmes / 1 homme
37 à 48 ans
France entière
30 min · visio modérée
Scénario : convertir une dotation en chèques cadeaux
3 objectifs de test · facilité du flow · clarté des conditions · compréhension du découpage en plusieurs cartes.
Résultats & enseignements de tests
Trois enseignements clés, validés sur prototype.
Les tests ont confirmé les hypothèses sur les trois axes — parcours, accessibilité des conditions, compréhension du découpage. Verbatims encourageants et une clarté plébiscitée.
🧭 Parcours
4/5 utilisateurs
Compréhension des infos et favoris facilement repérables.
« Cela a été un jeu d'enfant de retrouver les infos liées à l'enseigne Maisons du Monde ! »
Thierry · 48 ans
💡 Accessibilité
5/5 utilisateurs
Aide à la lecture grâce aux pictos et à la mise en avant.
« Les conditions des enseignes sont facilement accessibles et compréhensibles. »
Pascale · 41 ans
🤔 Division
4/5 utilisateurs
Aide à la sélection et la prise de décision sur le montant.
« Malin de proposer des montants pré-définis, ça m'a bien aidé ! »
Carine · 37 ans
Solution finale · maquettes
Une fiche enseigne plus aérée, mieux hiérarchisée, plus rassurante.
L'écran final reprend les enseignements de la Discovery, des wireframes et des tests : bandeau enseigne lisible, conditions illustrées par pictogrammes, montants pré-définis avec aide contextuelle, et récapitulatif clair avant validation.
Le nouveau dashboard Maisons du Monde.
Tout l'essentiel sur la même fiche : le bandeau visuel de l'enseigne, l'alerte "non valable Marketplace" en évidence, les conditions explicitées par pictos, et le bloc de saisie de montant à droite — avec montants pré-définis, solde actuel et solde après achat.
✓Bandeau enseigne — descriptif visible, CTA "Voir le site internet" cliquable.
✓Alerte Marketplace — bannière contrastée pour qu'elle soit lue.
✓Saisie de montant guidée — pré-défini ou personnalisé, récap en temps réel.
Détail · bandeau & alerte
Une alerte impossible à manquer.
Le bandeau enseigne reste visuel et engageant, mais l'alerte "Bon d'achat non valable sur le MARKETPLACE" est désormais affichée comme un encart contrasté juste en-dessous — pour que l'utilisateur lise et comprenne avant de convertir.
Détail · pictogrammes
Les conditions, en un coup d'œil.
Bloc "C'est toujours bon à savoir" : 6 conditions clés présentées avec pictogrammes et phrases courtes, en deux colonnes. Inspiré de Nature & Découvertes et Back Market, validé à 5/5 en tests.
Détail · saisie
Saisir 100€, voir tout de suite l'impact.
Montant pré-rempli ou personnalisé, contrôles +/− visibles, et un récap immédiat : carte cadeau, solde actuel, solde après achat. Le bouton "Valider" enchaîne directement sur "Ajouter au panier" — un parcours en 2 actions.
Détail · aide contextuelle
Lever l'opacité du découpage.
Deux tooltips inline répondent aux deux questions les plus fréquentes des tickets support : "Comment choisir mon montant ?" et "Pourquoi mon montant est divisé ?" — directement à côté du bloc de saisie.
Avant / Après · solution
Le résultat, en contexte.
La nouvelle fiche enseigne montrée en contexte desktop : menu latéral à 7 entrées, contenu central aéré, bloc de conversion à droite — l'utilisateur arrive et sait immédiatement quoi faire.
Avant · pour comparaison
Pour rappel — l'ancienne version.
Bandeau full-width avec description en surimpression, bloc de saisie dense (4 montants + champ libre + total), conditions en mur de texte. Mission : tout aérer.
03 · Prototype en mouvement
Voir la solution en action.
Démonstration vidéo du parcours de conversion en bons d'achat — depuis la fiche enseigne Maisons du Monde jusqu'à la sélection du montant et l'ajout au panier.
▶ Walkthrough vidéo
Parcours complet de conversion en bons d'achat
Fiche enseigne, lecture des conditions, choix du montant, ajout au panier — la nouvelle expérience Glady B2C de bout en bout.
Une étape essentielle qui valide notre concept et guide les prochaines étapes.
Les tests utilisateurs ont validé notre concept et notre solution, mais ils ont aussi fourni des informations précieuses pour guider nos prochaines étapes. Forts de ces conclusions, nous étions désormais prêts à poursuivre le développement et à affiner l'offre pour une expérience utilisateur encore plus satisfaisante.
🎯
Solution validée en tests
Les tests utilisateurs ont confirmé une meilleure compréhension des conditions et une expérience de conversion plus fluide — sur les 3 objectifs de test, scores entre 4/5 et 5/5.
📈
Frictions levées
Les trois opportunités initiales — lisibilité des conditions, hésitation au montant, opacité du découpage — sont adressées de bout en bout, avec un parcours plus efficace.
🔁
Discovery continue ancrée
Hotjar, Maze, Notion, Amplitude : la stack mise en place pendant la Discovery permet de continuer à écouter les utilisateurs après le lancement.
🤝
Une squad alignée
PM, devs front, lead dev, QA, Product Designer : 6 personnes qui ont co-construit la fiche enseigne avec les utilisateurs et les parties prenantes (enseignes, légal, conformité, data).
Étude de cas Glady B2C
Discutons de votre prochain parcours de conversion ou de votre refonte e-commerce.
