# Améliorer l’expérience de parrainage Growth · 2020 · Lead Designer Fluidifier le parcours de parrainage au service de la croissance et de l’engagement. **Méthodes** : sondages, analyse concurrentielle, maquettes, prototypage, tests d’utilisabilité Source : https://albancarmet.com/fr/case-study/rakuten-referral ## Problème En équipe avec les product managers, nous avons examiné les métriques de parrainage et remarqué qu’une large part des membres qui visitaient la landing page de parrainage ne partageaient pas leur lien de parrainage unique. Pourquoi est-ce un problème ? En n’offrant pas une expérience de parrainage optimale, nous manquons une occasion d’agrandir notre base de membres et, au final, de générer plus de business. Pour qui concevons-nous ? Des membres Rakuten authentifiés Le design que nous voulions améliorer Contraintes 1. Travailler avec le Rakuten Design System 2. Fournir une solution de design permettant à l’équipe marketing de mettre à jour rapidement le montant du bonus de parrainage sans créer de nouveaux visuels. 3. Réutiliser le composant d’e-mail de parrainage pour réduire au maximum les efforts de développement 4. Réutiliser autant que possible les templates d’e-mail de parrainage existants pour réduire l’implémentation Quelles métriques utiliserons-nous pour mesurer l’impact ? 1. Augmenter le nombre de membres partageant leur lien de parrainage 2. Augmenter la conversion visites de la landing page « Parrainer un ami » → partages ## Contexte • 📊 Partage de parrainage en hausse sur mobile — sur mobile, le nombre de membres partageant leur lien de parrainage a augmenté après le lancement ; le desktop a légèrement baissé • 📉 Conversion landing page → partage en baisse — sur les deux plateformes, le ratio visites de page / partages de parrainage a décliné après le lancement • 🔄 Phase 1 livrée ; Phase 2 jamais lancée — la couche de gamification qui aurait adressé la croissance a été reportée puis finalement annulée • ⚠️ Refonte annulée — l’ancienne page de parrainage a été restaurée quelques semaines après le lancement, faute de résultats probants Rakuten Rewards est une entreprise de cashback et de récompenses shopping. Les membres du site passent par des liens affiliés avant d’acheter sur le site d’un marchand. Une fois l’achat effectué par le membre, Rakuten Rewards perçoit une commission d’affiliation du marchand, qui est ensuite partagée avec le membre. Comment fonctionne le programme de parrainage Le parrain partage son lien de parrainage unique à un ami 1. Le filleul (l’ami) rejoint Rakuten via ce lien 2. Une fois que le filleul clique sur un lien affilié (depuis Rakuten Rewards) et dépense 25 $ ou plus dans une boutique partenaire, le parrain reçoit 25 $ et le filleul 10 $. ## Démarche Découvrir les motivations En démarrant ce projet, je n’avais aucun insight client pour m’aider à concevoir une solution correspondant aux attentes des membres. C’est pourquoi j’ai conçu un sondage. Méthode : • Sondage de 3 questions via SurveyMonkey • Taux d’ouverture de l’e-mail : 16,7 % • Sondage ouvert pendant 4 jours Participants : • Envoyé à 44 000 utilisateurs Rakuten Rewards authentifiés • Ayant visité la page de parrainage au moins une fois depuis le 01/01/2019 sur Desktop • N’ayant envoyé aucun parrainage depuis le 01/01/2019 sur Desktop • 654 réponses, dont 141 réponses ouvertes Objectifs : • Comprendre le manque de motivation/intérêt des membres autour du parrainage sur Rakuten Rewards • Découvrir les aspirations des membres concernant le parrainage d’amis En analysant les résultats, voici ce qui est ressorti et comment j’envisageais de traiter ces insights : Analyse concurrentielle En complément de ces insights utilisateurs, j’ai finalisé ma phase de recherche par une analyse concurrentielle. Comme la plupart de nos concurrents ne proposaient pas d’idées innovantes sur leur expérience de parrainage, j’ai élargi mon analyse à tous types d’entreprises. ## Solution Affiner le scope du projet À ce stade du parcours de design, nous avions une idée claire des fonctionnalités/composants à inclure dans la refonte. En compilant les insights utilisateurs et les idées pertinentes d’autres programmes de parrainage, nous avons priorisé les fonctionnalités en 2 phases selon le modèle effort vs impact. La Phase 1 inclura : – un composant de storytelling expliquant comment fonctionne le programme de parrainage – modifier/ajouter de nouvelles méthodes de parrainage (dont un QR code unique à chaque membre) – un tableau de bord indiquant les statuts des filleuls dans leur journal de parrainage – une FAQ liée au programme de parrainage La Phase 2 inclura : – preuve sociale/classement (une mécanique de gamification) Itération de design mobile 1 En suivant une approche mobile-first, j’ai conçu un flux reflétant les actions que j’avais fait ressortir pendant ma recherche. Pour arriver sur la page « Parrainer un ami », l’utilisateur doit taper sur le bouton « Parrainez et gagnez 25 $ » depuis le header. Comment j’ai intégré mes insights de recherche : Améliorer la façon dont nous expliquons le programme de parrainage Sur le design actuel, le composant expliquant le fonctionnement du programme de parrainage était très bas dans l’architecture de l’information de la page. L’une de nos hypothèses était que tous les utilisateurs ne scrollaient pas forcément la page pour lire le contenu expliquant le fonctionnement. C’est pourquoi j’ai fait remonter, au-dessus de la ligne de flottaison, un call to action menant les utilisateurs vers une page expliquant le programme en détail. Dans cette page « Comment ça marche », j’ai décidé de développer un storytelling autour de 2 personnages fictifs, Sarah et Gary. Mon objectif était de bien différencier les bonus gagnés par chaque partie. En effet, le parrain gagnait 25 $ et le filleul 10 $. Méthodes de partage de lien limitées J’ai introduit de nouvelles façons de parrainer des amis via QR code et Facebook Messenger. Ces nouvelles méthodes s’ajoutaient aux existantes : SMS et copie du lien de parrainage. Pour identifier celles à mettre le plus en avant, j’ai fait équipe avec mon product manager et examiné les méthodes de parrainage les plus utilisées sur le design actuel. Il est apparu que les 2 plus utilisées étaient le « SMS » et la fonction de copie (copier le lien de parrainage). Pour refléter cette hiérarchie dans mon design, j’ai fait les méthodes SMS et copie du lien plus grandes que les autres. Pour renforcer l’emphase sur la méthode SMS (la plus populaire), j’ai aussi utilisé notre couleur d’accent rose pour la rendre plus visible. Répondre aux questions que les utilisateurs pourraient se poser sur le programme de parrainage J’ai introduit dans la page « Parrainer un ami » une section FAQ dédiée au programme de parrainage. En plus de répondre aux questions liées à ce sujet, l’objectif était aussi d’éviter que les utilisateurs quittent cette page pour trouver leurs réponses. C’est pourquoi j’ai utilisé un système d’accordéon pour afficher les réponses. Pour rappel, l’une des métriques que je cherchais à améliorer était d’*augmenter le nombre de membres partageant leur lien de parrainage*. Suivre les filleuls dans leur parcours de parrainage Pour rappel, les filleuls doivent suivre 3 étapes pour gagner leur bonus de parrainage : 1. Cliquer sur le lien de parrainage reçu 2. S’inscrire à Rakuten Rewards 3. Faire un achat de 25 $ ou plus dans une boutique partenaire de Rakuten Rewards Pour améliorer la communication sur l’avancement des amis parrainés dans leur parcours, je les ai listés sous forme de cartes. Chaque carte indique à laquelle de ces 3 étapes se trouve le filleul : « Invité », « Inscrit » et « Dépense 25 $+ ». Quand un filleul est à l’étape « Invité » ou « Inscrit », la carte inclut aussi un lien « Envoyer un rappel ». Cliquer dessus envoie un rappel par e-mail qui encourage le filleul à s’inscrire ou à finaliser un achat éligible de 25 $+ pour gagner un bonus. Développer l’engagement des utilisateurs Pour créer de l’enthousiasme et inciter les membres Rakuten à revenir dans leur section de parrainage, j’ai fait apparaître le montant de bonus qu’ils pourraient gagner si les amis qu’ils ont invités rejoignaient Rakuten Rewards et faisaient un achat éligible de 25 $+. Ces gains potentiels vivent dans l’onglet « En attente » de la page « Activité de parrainage ». Ce total est calculé en multipliant 25 $ (la récompense de parrainage) par le nombre d’amis invités ayant rejoint notre plateforme mais n’ayant pas encore fait d’achat éligible de 25 $+. Itération de design mobile 1.5 Après avoir partagé ma première itération dans une réunion de design critique, j’ai fait quelques modifications sur les sections où j’explique « Comment fonctionne le programme de parrainage ». Sur la page « Parrainer un ami », j’ai retiré les photos des personnages fictifs. D’après les retours obtenus, ajouter des photos rendait flou qui étaient ces utilisateurs. Le flou venait aussi du fait que j’utilisais également une photo de profil plus bas pour faire apparaître le profil utilisateur (Mandy Jones). Suite à ce commentaire, j’ai aussi retiré les photos de personnages associées à chaque étape de la page « Comment ça marche ». J’ai gardé l’approche pas-à-pas mais l’ai rendue plus générique. Mobile – Test d’utilisabilité 1 À partir de la version 1.5, j’ai construit un prototype et mené un test d’utilisabilité pour évaluer ma solution de design. Méthode : • À distance, non modéré via UserTesting Participants : • 10 utilisateurs • 5 femmes – 5 hommes • 25-55 ans, 40 k$ – 150 k$+ • Utilisateurs Rakuten Objectifs : • Évaluer si les utilisateurs comprennent comment fonctionne le programme de parrainage • Évaluer si les utilisateurs comprennent comment parrainer des amis • Évaluer si les utilisateurs comprennent le système de suivi des parrainages Voici les points de friction révélés par le test : Itération de design mobile 2 Suite à mes actions à mener, j’ai modifié mon design précédent et fait ces ajustements : • J’ai retiré la fonctionnalité QR et le bouton de partage pour donner plus de place aux autres méthodes de parrainage. • J’ai retiré la photo de profil et fait apparaître les bonus « gagnés » et « en attente » sur la page « Parrainer un ami ». Cela évite un tap supplémentaire pour obtenir cette information. Les utilisateurs auront accès au détail des bonus « gagnés » et « en attente » en tapant sur les liens « Voir le détail » et « Voir les amis invités ». • Sur la page « Activité de parrainage », j’ai passé la couleur de fond du haut en gris pour créer un contraste plus fort et rendre les onglets « En attente » et « Gagnés » plus visibles. L’objectif était de faciliter la navigation interne et d’éviter de devoir revenir sur la page « Parrainer un ami » pour savoir combien de bonus sont en attente ou gagnés. Mobile – Test d’utilisabilité 2 En suivant le même dispositif que le précédent, j’ai mené un second test d’utilisabilité pour évaluer cette nouvelle itération de design. Voici la synthèse de ce second test : [TEST2_SYNTHESIS_TABLE:rakuten] Itération de design desktop 1 Une fois le mobile validé par deux rounds de tests d’utilisabilité, je me suis tourné vers la version desktop — en adaptant les mêmes principes de design à un canvas plus large, tout en contournant une contrainte clé. Les expériences mobile et desktop n’étaient pas symétriques en termes de fonctionnalités. Sur mobile, le partage par SMS était la méthode principale (et la plus utilisée). Sur desktop, elle n’était pas disponible — à la place, les utilisateurs pouvaient envoyer des invitations par e-mail directement depuis la page de parrainage et importer leurs contacts Gmail. Ni le product manager ni moi n’avons retrouvé la raison d’origine de cette différence. Plutôt que de les unifier au risque de retards, nous avons décidé de préserver la différence et d’avancer vite. Le design desktop a suivi la même structure que le mobile — faire remonter les mécaniques de parrainage en haut, introduire les nouvelles méthodes de partage et construire le tableau de bord d’activité de parrainage — adapté à la mise en page plus large. Voici à quoi ressemblait la première itération : Composant d’e-mail de parrainage Sans changer la fonctionnalité cœur du composant d’envoi d’e-mail, je voulais améliorer certains éléments de l’expérience. Le premier élément que j’ai amélioré était l’interaction autour du bouton permettant d’envoyer des invitations par e-mail. Dans le design actuel, le composant e-mail ne fournit aucun feedback visuel indiquant à quel moment l’utilisateur peut cliquer sur le bouton « Envoyer l’e-mail » pour inviter des amis. C’est pourquoi j’ai introduit des états sur ce bouton. Un état inactif pour indiquer que le bouton n’est pas cliquable et un état actif pour indiquer qu’il l’est, c’est-à-dire que le composant est prêt à envoyer la ou les invitations. D’après ma recherche, j’ai aussi appris que les utilisateurs tiennent à ne pas spammer leurs amis. C’est pourquoi j’ai veillé à ne pas les inonder de trop d’e-mails, alors qu’ils en reçoivent déjà beaucoup d’autres entreprises. Dans le design actuel, une fois qu’un ami a reçu une invitation par e-mail sans s’inscrire à Rakuten Rewards, un autre e-mail est automatiquement envoyé 3 jours après le premier. Comme d’autres marques utilisant un composant d’e-mail de parrainage, j’ai choisi de donner plus de contrôle au parrain. C’est pourquoi, après avoir saisi le(s) e-mail(s) d’amis dans le champ e-mail, le parrain verra une case à cocher pour envoyer ou non automatiquement un rappel par e-mail. Desktop – Test d’utilisabilité 1 En suivant le même dispositif que pour mes tests Mobile web, j’ai mené un test d’utilisabilité pour évaluer mon design. Voici les points de friction révélés par le test : Itération de design desktop 2 Suite à mes actions à mener, j’ai modifié mon design précédent et fait ces ajustements : • J’ai remonté les méthodes de parrainage plus haut sur la page pour m’assurer qu’elles s’affichent au-dessus de la ligne de flottaison. À cause de cela, certains utilisateurs ne voyaient pas du tout les méthodes de parrainage lors de mon premier test. • J’ai déplacé la section « Comment fonctionne le parrainage » sur le côté droit de la page. Mon intention était de la garder en haut de la page pour maintenir une architecture de l’information logique. En effet, en tant que nouveau membre Rakuten Rewards, je veux d’abord comprendre comment fonctionne le programme de parrainage avant d’inviter des amis. • J’ai changé les visuels associés à chaque étape de la section « comment fonctionne le parrainage ». D’un style figuratif qui créait de la confusion à l’étape 1, je suis passé à un style abstrait pour indiquer clairement que les visuels ne sont pas cliquables. Par cohérence visuelle, je n’ai pas seulement redessiné le visuel de l’étape 1 mais tous. • Concernant la case à cocher permettant d’envoyer un rappel automatique après 3 jours, le product manager et moi avons finalement décidé de la retirer pour réduire les efforts de développement. • Quant aux états inactif et actif du bouton « Envoyer » les invitations, après avoir partagé cette idée avec l’équipe Product Design, il a été décidé de ne pas introduire ce type d’interaction. Cela aurait rompu la cohérence UX avec les autres boutons de l’expérience Rakuten Rewards. Desktop – Test d’utilisabilité 2 En suivant le même dispositif que pour mes tests Mobile web, j’ai mené un test d’utilisabilité pour évaluer mon nouveau design. Voici les résultats après le second test : [DESKTOP_TEST2_SYNTHESIS_TABLE:rakuten] Affiner les écrans de design À ce stade de production, j’étais proche de livrer les écrans mobile et desktop aux développeurs. J’ai toutefois fait quelques affinages mineurs sur mon design : • Sur la version mobile, j’ai remplacé les visuels initiaux illustrant la section « Comment fonctionne le parrainage » par le visuel abstrait créé pour la version desktop. L’objectif était de renforcer la cohérence UX entre les deux plateformes. • Concernant la fonctionnalité d’import d’e-mails Gmail, après avoir regardé attentivement les métriques, nous avons décidé de la retirer car elle était très peu utilisée. • Enfin, le product manager et moi avons fait équipe avec un copywriter pour raccourcir un peu la copy, qui était assez lourde. Ajuster les e-mails Pour finaliser la refonte de l’expérience de parrainage, la dernière pièce à concevoir était les e-mails de parrainage. Pour rappel, ce sont les e-mails que les filleuls recevront pour soit rejoindre Rakuten Rewards, soit finaliser un achat de 25 $+ pour gagner leur bonus. Voici les e-mails que les filleuls recevront durant leur parcours de parrainage : Pour l’essentiel, il s’agissait d’ajuster le message d’e-mails déjà existants. Comme pour les autres pans de l’expérience, notre objectif était de gagner du temps et de tester nos idées en production au plus vite. En plus de cela, je devais aussi être attentif à la pression de communication envoyée aux filleuls. La dernière chose que l’on veut, c’est spammer les filleuls. Comme décrit dans la timeline, les filleuls recevront des e-mails envoyés automatiquement ou manuellement. Pour éviter de « spammer » un filleul, un parrain ne pourra pas envoyer de rappel par e-mail (« invitation » ou « rappel d’achat ») dans les 7 jours suivant le dernier. Avec cette nouvelle expérience de suivi, j’ai introduit un rappel par e-mail dès qu’un filleul rejoint Rakuten Rewards sans avoir encore fait d’achat de 25 $+. L’objectif était d’encourager les filleuls à faire cet achat éligible et à gagner leur bonus. Pour créer le rappel « Shop » par e-mail, j’ai repris le template d’e-mail « invitation » et en ai créé une variante. Voici à quoi ressemblent les templates d’e-mail : Design final Voici à quoi ressemble le design final : ## Résultats • 📊 Partage de parrainage en hausse sur mobile — sur mobile, le nombre de membres partageant leur lien de parrainage a augmenté après le lancement. Le desktop a légèrement baissé. • 📉 Conversion landing page → partage en baisse — sur les deux plateformes, le ratio visites de page / partages de parrainage a décliné après le lancement. • 🔄 Phase 1 livrée ; Phase 2 jamais lancée — la couche de gamification qui aurait adressé l’objectif de croissance a été reportée puis finalement annulée. • ⚠️ Refonte annulée — l’ancienne page de parrainage a été restaurée quelques semaines après le lancement, faute de résultats probants. J’ai quitté Rakuten Rewards quelques jours avant le lancement du projet, je n’ai donc pas pu mesurer l’impact moi-même. D’après les retours recueillis peu après, les résultats étaient mitigés. Sur mobile, le nombre de membres partageant leur lien de parrainage a augmenté — ce qui rejoignait l’une de nos métriques clés. Sur desktop, cette même métrique a légèrement baissé. La conversion « visites de la landing page → partages » a décliné sur les deux plateformes. Quelques semaines après le lancement, la refonte a été annulée et l’ancienne page de parrainage restaurée. C’était décevant — mais un élément de contexte compte : c’était la Phase 1, volontairement cadrée pour reconstruire les fondations et restaurer la confiance, pas pour générer une hausse de conversion immédiate. La couche de gamification qui aurait adressé l’objectif de croissance était reportée en Phase 2, qui n’a jamais été lancée. Mes enseignements Ce projet m’a appris deux leçons difficiles qui façonnent encore ma façon de travailler. Ne pas laisser les retours utilisateurs prendre le pas sur son jugement de designer. J’ai trop misé sur les résultats des tests d’utilisabilité et j’ai fini avec des composants — surtout la section d’activité de parrainage — plus complexes qu’ils n’avaient besoin de l’être. Le bon équilibre, c’est d’utiliser les retours utilisateurs comme signal, pas comme spec. Le cadrage par phases doit être rendu explicite — tôt et souvent. Cette refonte n’a jamais eu vocation à faire bouger les métriques de conversion à court terme ; il s’agissait de poser de nouvelles fondations. Mais cette intention n’a pas été clairement communiquée aux parties prenantes, ni visible pour les utilisateurs. Quand les résultats sont arrivés, mitigés, il n’y avait aucun cadre commun pour les interpréter correctement. J’aurais dû pousser plus fort pour aligner tout le monde sur ce à quoi ressemblait le succès pour la Phase 1 spécifiquement — et m’assurer que cette définition soit documentée et visible. ## Impact Expérience de parrainage fluidifiée