Widget
Date
Décembre 2023
Rôle
Lead Product Designer
Design d’interaction
Design System
Parcours utilisateur & wireframing
Prototype
Recherche utilisateur
Widget de parrainage et de loyalty
Allier web3 et loyalty program
Ce projet a été développé pour un club privé de vin souhaitant améliorer son programme de fidélité et de parrainage. L'objectif principal était d'inciter les membres à inviter de nouveaux utilisateurs et à interagir davantage avec la plateforme. Mon rôle a impliqué la collaboration avec les développeurs pour garantir une intégration fluide du widget, ainsi que l'optimisation de l'expérience utilisateur pour maximiser l'engagement et la conversion. Ce projet m'a permis de conjuguer UX design et innovation technologique, tout en respectant les impératifs liés à la blockchain et aux solutions Web3.
Note : Pour des raisons de confidentialité, le nom du club ne peut pas être mentionné.
Objectifs
• Améliorer l’engagement des membres avec un système de récompenses motivant.
• Faciliter le parrainage en supprimant les principaux freins à l’inscription.
• Optimiser l’expérience utilisateur pour maximiser la conversion.
Problème
Le programme de fidélité et de parrainage n’existait pas encore sur la plateforme, ce qui représentait un défi majeur. L'objectif était de concevoir un système engageant et fluide, en prenant en compte les attentes des utilisateurs. Plusieurs problématiques clés ont émergé :
Le processus actuel de parrainage trop complexe
Chaque nouvel utilisateur doit être rentré manuellement. Trop d’étapes pour inscrire un nouvel utilisateur.
Besoin de clarté sur les bénéfices et l’adhésion au club
Les membres ne savent pas quels avantages ils peuvent obtenir ni comment ils sont récompensés, ce qui limite leur intérêt et leur engagement potentiel.
Freins à l'inscription
Les utilisateurs hésitent à s’inscrire par manque d’informations claires.
Contraintes liées à la blockchain
L’implémentation du widget devait prendre en compte le smart contract et son impact sur l’expérience utilisateur.
Phase de recherche
— Interviews
Avant l’implémentation du programme de fidélité, nous avons mené une série d’interviews avec les membres du club afin d’explorer leurs attentes. L’objectif était d’identifier leurs habitudes de consommation, leur relation avec le vin et leur perception des programmes de fidélité et de parrainage. Comprendre leurs motivations et les freins potentiels nous a permis de concevoir un widget en phase avec leurs besoins spécifiques.
12 membres du club ont été interviewés, dont 8 hommes âgés de 32 à 63 ans, offrant une diversité de profils et de perspectives.
Structure principale des interviews qualitatifs
Comprendre les motivations d'adhésion au club
"Pourquoi avez-vous choisi de rejoindre ce club privé de vin ? Qu'est-ce qui vous attire dans ce type d'expérience ?"
Explorer les habitudes de consommation
"À quelle fréquence consommez-vous du vin et dans quel contexte ? Avez-vous des préférences particulières en matière de sélection ?
Identifier la relation avec les programmes de fidélité
"Avez-vous déjà participé à un programme de fidélité ou de parrainage lié à un produit similaire ? Qu'est-ce qui vous motive ou vous freine à utiliser ces programmes ?"
Attentes vis-à-vis des avantages et récompenses
"Quels types d'avantages ou d'expériences exclusives vous sembleraient les plus attractifs dans un programme de fidélité dédié au vin ?"
Identifier les obstacles à l'engagement
"Quelles sont les raisons qui pourraient vous empêcher d’inviter un ami via un programme de parrainage ?"
Expérience utilisateur sur le site actuel
"Pouvez-vous me décrire comment vous interagissez actuellement avec le site du club ? Quels aspects trouvez-vous pratiques ou frustrants ?"
— Principales insights
Après avoir mené et analysé l’ensemble des interviews, plusieurs pain points majeurs sont ressortis :
01 - Absence de programme de fidélité structuré
Les membres n’avaient pas de cadre clair pour être récompensés pour leur engagement.
02 - Peu d’incitations à recommander le club
L’absence de système de parrainage formel réduisait la motivation à inviter de nouveaux membres.
03 - Importance des expériences exclusives
Beaucoup attendaient d’avantages sous forme d’événements ou d’offres privées plutôt que de simples réductions.
04 - Besoin d’un processus simple et transparent
Les utilisateurs souhaitaient une intégration intuitive, sans étapes complexes ou conditions peu claires.
— Priorisation des objectifs
Après avoir analysé les retours des utilisateurs, il était essentiel de prioriser les objectifs et de conceptualiser des solutions adaptées. Afin de répondre aux problématiques identifiées, nous avons envisagé le développement de ce widget combinant parrainage et fidélité. Plusieurs ateliers ont été organisés pour affiner cette approche, et voici les principales conclusions qui en ont émergé :
Réduire la friction dans le processus de parrainage
Simplifier l’invitation et l’inscription des nouveaux membres.
Renforcer la motivation des utilisateurs
Proposer des incitations attractives et adaptées aux différents profils.
Garantir une intégration fluide avec la blockchain
Prendre en compte les contraintes du smart contract sans altérer l’expérience utilisateur.
Clarifier le système de fidélité
Fournir une explication transparente des points et des récompenses.
Phase Design
— Architecture de l'information
Pour structurer le contenu, nous avons réalisé un atelier de tri des cartes. Cet exercice nous a permis de définir clairement l’organisation des informations et les différentes interactions possibles. Il a également servi de base pour l’élaboration de l’arborescence. Notre priorité était d’assurer une navigation fluide, en différenciant clairement les actions liées au parrainage de celles liées à l’accumulation et à l’utilisation des points de fidélité.
— Parcours utilisateurs
Comme nous avons décidé de concevoir un widget combinant à la fois le parrainage et le programme de fidélité, nous avons designé tous les parcours utilisateur possibles. Chaque flow a été élaboré en intégrant les spécificités du smart contract afin d'assurer une expérience fluide et sans friction pour les utilisateurs.
Flow parrainage - utilisateur : parrain
Flow parrainage - utilisateur : Filleul
Flow parrainage - utilisateur : Parrain (connecté)
— Wireframes
Toutes les décisions prises et les flows établis nous ont permis de concevoir les wireframes.
— Parcours et interactions
Une fois le design terminé, il était important de définir toutes les interactions possibles au sein du widget. En annotant des commentaires pour les développeurs, nous avons pu établir le parcours "idéal" lorsqu'il n'y a pas d'erreurs.
Flow parrainage - utilisateur : parrain connecté
Design finale
— Une solution centralisée dans un widget
Tout a été conçu pour que le widget réponde aux deux besoins essentiels des utilisateurs : parrainer facilement et accumuler des points en toute simplicité.
— Inviter un ami
Le widget permet d’inviter directement un ami et de suivre l’état des invitations. L’utilisateur peut voir celles en attente ainsi que celles déjà acceptées, garantissant une meilleure visibilité du processus de parrainage
— Modal d'invitation
Lorsqu’un utilisateur souhaite inviter une personne, une fenêtre modale s’ouvre, lui permettant d’envoyer une invitation au filleul par e-mail en quelques clics.
— Suivre ses invitations
Une fois l'invitation envoyée, le parrain peut suivre son statut en temps réel et visualiser si elle est en attente ou acceptée.
— Historique des points
Le widget offre un accès à l’historique des points, permettant aux utilisateurs de suivre l’accumulation et l’utilisation de leurs récompenses en toute transparence.
— Récompenses
Les récompenses obtenues par un membre, qu’il s’agisse d’événements exclusifs ou d’autres avantages, sont affichées ici pour une meilleure visibilité.
— Système de gamification
Chaque action (parrainage, achat, interaction) rapporte des points utilisables pour des récompenses exclusives.
— Parcours inscription
Plusieurs parcours ont été conçus pour fluidifier l’inscription des nouveaux membres. L'utilisateur doit renseigner l'adresse e-mail de son parrain, qui est ensuite vérifiée dans la base de données avant l'envoi d'une demande de parrainage.
Conclusion
Ce que j'ai appris
Transformer des contraintes techniques en solutions UX
L’intégration du smart contract a nécessité une réflexion approfondie pour minimiser la complexité perçue par l’utilisateur. Chaque interaction a été optimisée pour assurer une expérience fluide tout en respectant les exigences techniques de la blockchain.
Collaborer efficacement avec les développeurs
L’échange constant avec l’équipe technique a été essentiel pour aligner la conception UX avec les contraintes de développement. J’ai renforcé ma capacité à documenter précisément les interactions et à anticiper les problématiques d’implémentation.
Optimiser un parcours utilisateur dans un environnement Web3
Les contraintes de la blockchain (délai de validation des transactions, transparence des opérations) ont demandé une adaptation des flows utilisateur pour limiter les frictions et garantir une interaction naturelle avec le widget.
Ce projet a été un véritable défi d’allier expérience utilisateur et contraintes blockchain. Concevoir un widget combinant fidélité et parrainage a nécessité une approche centrée sur l’utilisateur tout en prenant en compte des aspects techniques complexes, notamment l’intégration du smart contract et la gestion des délais de validation.
Ce projet a été une expérience enrichissante du début à la fin. De la recherche utilisateur à la conception finale, chaque étape a été l’occasion d’approfondir ma compréhension des attentes des utilisateurs.