Programmes de parrainage Meilleures pratiques UX et UI

Publié: 2022-04-18

Cet article de blog rassemble les meilleures pratiques et inspirations pour la conception de programmes de parrainage UX et UI pour site Web et mobile. Nous couvrirons l'ensemble du parcours client depuis les bannières promotionnelles, les pages de destination de référence, le partage des codes de référence, la réception des récompenses de référence et leur utilisation. Nous avons rédigé cet article de blog en nous basant sur l'interface utilisateur des plateformes de commerce électronique DTC la plus performante (en termes de revenus) (que vous verrez mentionnée tout au long de l'article).

Nous espérons que ce guide vous aidera à repenser votre plate-forme pour inclure un programme de parrainage ou pour améliorer votre interface utilisateur existante. Si vous souhaitez apprendre à concevoir les règles de votre programme de parrainage, nous vous recommandons cet article de blog.

Remarque : Tout au long de cet article, nous appelons la personne qui parraine un ami un « référent » ou un « avocat » et la personne qu'ils recommandent un « référent » ou un « ami parrainé ».

Remarque : Toutes les captures d'écran de bureau ont été réalisées sur Mac, Chrome et toutes les captures d'écran mobiles ont été réalisées à l'aide de la résolution iPhone X sur Chrome.

Comment assurer la meilleure UX dans un programme de parrainage client ?

Voici une liste de contrôle rapide des conseils UX que vous pouvez suivre lors de la création de votre solution de parrainage. Pour des instructions plus détaillées avec des exemples, lisez la suite.

  1. Créez une page de destination de référence distincte.
  2. Ajoutez un titre accrocheur et une copie.
  3. Expliquez les règles et les avantages du programme.
  4. Ajoutez des images de valeur et de marque.
  5. Ajoutez un formulaire pour permettre aux clients de participer facilement au programme de parrainage.
  6. Autoriser la personnalisation du code de parrainage en fonction du nom du référent.
  7. Fournir plusieurs options de partage.
  8. Fournissez un modèle de message de recommandation, mais autorisez la personnalisation.
  9. Concevez un partage de messages de réussite et d'erreur.
  10. Faites en sorte que votre CTA soit clair.
  11. Incluez la FAQ et les conditions générales sur votre page d'accueil de parrainage.
  12. Ajoutez des témoignages de clients.
  13. Annoncez votre programme de parrainage via tous les canaux et points de contact disponibles.
  14. Envoyez directement un message aux référents potentiels.
  15. Créez une page de destination pour les amis parrainés.
  16. Concevez des notifications de progression pour les référents et laissez les référents suivre la progression des références.
  17. Rendez les récompenses de parrainage faciles à trouver et à obtenir.

1. Créez une page de destination de référence

Votre page de destination de parrainage doit être le principal centre d'information sur votre programme de parrainage. Il doit expliquer tout ce que les clients doivent savoir à ce sujet et convertir les défenseurs potentiels. Vous devez l'utiliser comme centre de référence principal lié dans votre menu ou vos bannières publicitaires. Vous devez également le lier dans vos messages. La page de destination doit inclure un formulaire qui permet aux défenseurs de saisir et de partager des liens de parrainage. Voici quelques conseils pour tirer le meilleur parti d'une page de destination de référence :

Ajoutez un titre et des éléments visuels convaincants

Le titre de votre page de destination doit être simple et expliquer les règles du programme. Voici quelques exemples de titres accrocheurs que vous pouvez utiliser :

  • "Parrainez un ami et gagnez des récompenses inédites"
  • "Partager l'amour"
  • "Obtenez un X gratuit pour vous et vos amis"
  • "Faites passer le mot et profitez d'une réduction"

Exemple : Le titre de la page du programme de parrainage de Harry est court et accrocheur et contient l'avantage : "N'abandonnez pas vos amis. Invitez des amis et gagnez des produits.

Page de destination de référence de Harry

Expliquer les avantages et les règles du programme

Comme vos clients participeront très probablement au programme pour obtenir les avantages que vous offrez, commencez tout de suite par expliquer les avantages de participer au programme pour les référents et les amis référés. Vous devez expliquer les types de récompenses que les deux parties peuvent obtenir et la valeur des récompenses, d'autant plus que les arbitres ne connaissent pas votre marque et peuvent ne pas connaître la valeur des récompenses, en particulier si vous offrez vos produits en récompense.

Exemple : Omsom a une page de programme de parrainage très simple qui explique clairement les avantages pour le référent et l'arbitre.

Page de référence Omsom avec explication du programme

Une autre partie consiste à rendre les règles du programme faciles à comprendre et à suivre. Que doivent faire les défenseurs et les amis invités pour gagner l'incitatif ? Si vous avez des exclusions ou plus de détails, placez-les sur la page, mais en dessous des règles générales, afin que les bases du programme soient toujours faciles à saisir.

Exemple : Trunk Club explique brièvement mais clairement les règles du programme sur sa page de destination.

Page de destination de référence Nordstron

Inclure FAQ ou T&C sur votre page de destination de parrainage

Les clients auront généralement quelques questions avant de s'inscrire à votre programme de parrainage. Ajoutez une section pour certaines FAQ (vous pouvez en sélectionner quelques-unes, si vous préférez créer une page de conditions générales distincte) pour fournir des réponses prêtes à vos défenseurs potentiels.

Exemple : Ted Baker a un lien vers ses conditions d'utilisation sur sa page d'accueil de parrainage.

Inclusion de T&C sur la page de parrainage par Ted Baker

Ajouter des témoignages

Les témoignages sont un excellent ajout à toute page de destination. Bien qu'ils ne soient pas souvent vus sur les pages de destination de référence. Si vous pouvez montrer aux clients des preuves sociales, ils seront plus enclins à rejoindre votre programme ou à acheter chez vous pour la première fois. Ceci est particulièrement important si vous envoyez la page de destination de référence aux amis parrainés, qui ne connaissent pas la marque.

2. Ajouter un formulaire de partage de parrainage

Si vous souhaitez obtenir autant de références que possible, vous devez faciliter l'adhésion et la participation à votre programme. Demandez aux référents potentiels de ne remplir que des informations de base, comme leur nom et leur adresse e-mail. N'incluez pas trop de questions ou d'options supplémentaires dont vous n'avez pas vraiment besoin pour exécuter votre programme. Cela vous aidera à mieux convertir les clients intéressés en défenseurs.

Exemple : Lulus propose un formulaire simple, à côté duquel les règles du programme de parrainage sont à nouveau brièvement expliquées, pour rappel.

Formulaire de recommandation Lulus

Autoriser la personnalisation du code de parrainage

Si vous utilisez des codes de parrainage ou des liens de parrainage, autorisez la personnalisation du code ou du lien (par exemple, KATE-10 ou www.domain.com/kate-10). Cela le rendra plus partageable, plus facile à retenir et plus probable que vos référents l'ajouteront à leur publication sur les réseaux sociaux, par exemple. Avoir ces types de codes ou de liens aide vos amis à identifier avec un minimum d'effort cognitif qu'il s'agit d'une invitation d'un ami.

Exemple : Pretty Little Thing crée des codes de parrainage personnalisés à partir du nom et du prénom du parrain.

Personnalisation du lien de parrainage de Pretty Little Thing

Fournir plusieurs options de partage

Fournissez de nombreuses options de partage en fonction des données démographiques et des préférences de votre public. S'ils préfèrent utiliser les réseaux sociaux plutôt que les e-mails, proposez des options pour partager le lien ou le code de parrainage via les réseaux sociaux de manière native. Si vous avez votre programme de parrainage sur l'application, utilisez la fonction de partage intégrée pour les applications mobiles afin d'utiliser toutes les options que le mobile offre habituellement. De cette façon, vos référents auront accès à leur carnet d'adresses téléphoniques, leurs listes de diffusion et leurs comptes de médias sociaux dès le départ. Cela aidera également l'expérience utilisateur car ils savent comment cette fonctionnalité fonctionne.

N'oubliez pas de fournir des liens pertinents pour les mobiles et les ordinateurs de bureau. Si vous envoyez un lien vers un appareil mobile, il devrait ouvrir votre application ou votre magasin d'applications, s'il s'agit d'un ordinateur de bureau, il devrait guider les utilisateurs vers le site de bureau. Vous pouvez le faire, par exemple, en utilisant Branch. Découvrez comment Shopmark a utilisé Branch pour créer des liens de référence pertinents sur tous les canaux.

Exemple : Summersalt propose plusieurs options pour partager des liens de parrainage : par e-mail, SMS, Facebook, Messenger, Twitter ou simplement en copiant et collant le lien.

Options de partage de parrainage Summersalt

Préparez un modèle de message de recommandation prêt, mais autorisez la personnalisation

Dans certains cas, il est préférable de fournir un message pré-écrit pour encourager les défenseurs potentiels à envoyer des invitations à leurs amis. Cela permettra aux référents d'envoyer plus facilement les messages de parrainage. Vous devez cependant laisser les référents modifier ou personnaliser les messages s'ils n'aiment pas la copie pré-écrite.

En ce qui concerne la copie du message de parrainage, vous devez le rendre un peu plus informel et personnel afin qu'il semble que le référent l'ait écrit lui-même. Vous devez inclure le nom du parrain et de l'ami parrainé pour le personnaliser un peu. Il doit être court, droit au but, expliquant un peu la marque et son produit ainsi que ce qu'il y a dedans pour eux (une réduction) et comment l'obtenir (utilisez le code de parrainage). Vous devez également inclure un CTA visible afin que l'ami parrainé n'ait pas à réfléchir beaucoup sur l'endroit où cliquer pour vérifier l'offre.

Exemple : Absent a un court formulaire de parrainage qui ne nécessite que l'adresse e-mail de l'ami parrainé et qui contient un message pré-écrit (qui peut être personnalisé). Le message est court et informel et explique la valeur du produit, le contexte et la récompense qu'ils peuvent obtenir grâce au lien de parrainage qu'ils ont reçu.

Message de parrainage personnalisable

Voici à quoi ressemble l'e-mail de parrainage une fois envoyé à l'ami parrainé :

E-mail de recommandation de AWAY

Concevoir un partage des messages de réussite et d'erreur

Afficher un message de réussite si le code de parrainage a été envoyé avec succès ou copié dans le presse-papiers.

Exemple : Omsom affiche un message de réussite si une référence a été envoyée avec succès. Ils encouragent également le parrain à y référer plus d'amis.

Message de réussite de référence Omsom

D'autre part, vous devriez également afficher un message d'erreur si les choses tournent mal. Par exemple, si l'ami a déjà été parrainé par le parrain ou est déjà client et ne remplit pas les conditions du programme.

Rendre le CTA clair

Votre formulaire nécessitera une sorte de CTA qui enverra le message de parrainage aux amis parrainés. Tout dans la page de destination de votre programme de parrainage devrait conduire à l'appel à l'action. Un appel à l'action de référence doit attirer l'attention et inviter les gens à cliquer. Mettez le texte en gras, souligné ou d'une couleur différente. Certaines conceptions ajoutent encore plus d'emphase en ajoutant des flèches qui pointent vers le CTA.

En ce qui concerne la copie CTA, moins il y a de mots utilisés, mieux c'est. Voici quelques idées pour le texte CTA : "Rejoignez notre programme", "Commencez à partager maintenant", "Gagnez votre première récompense", "Inscrivez-vous", "Rejoignez maintenant" ou "Commencez à partager".

Exemple : Lulus a un simple CTA "envoyer un e-mail" car le principal moyen de partager le lien de parrainage est par e-mail.

Exemple d'incitation à l'action Lulus

Seraphine a un joli CTA "Partagez l'amour" sur sa page de programme de parrainage.

Exemple de CTA de recommandation Seraphine

3. Faites la promotion de votre programme de parrainage

Un programme de parrainage ne vaut rien si vos clients ne le savent pas. Vous pouvez, par exemple, ajouter un widget (similaire au widget de chat) sur toutes les pages qui invite les utilisateurs à référer la marque à leurs amis. Voici quelques autres options pour une excellente UX de référence :

Annoncez le programme sur votre site Web ou votre application mobile

Pensez à ajouter des bannières à votre page d'accueil, un lien dans votre menu, des informations à ce sujet sur le compte client (cockpit), ou à écrire un article de blog ou un communiqué de presse pour faire passer le mot. Il ne devrait pas être simplement promu sur une page de destination dont personne ne connaît l'existence. Il doit faire partie de votre offre principale, visible directement depuis la page d'accueil du site Web et de l'application mobile sur toutes les pages jusqu'aux pages post-paiement et aux e-mails de remerciement post-achat.

Exemple : Pretty Little Thing a un lien vers son programme de parrainage dans le compte client.

Placements de cartes-cadeaux Pretty Little Thing

Haverdash a un lien parrainer un ami dans son menu principal sur le site Web.

Lien de parrainage Haverdash dans le menu

Trunk Club a sa page de destination du programme de parrainage dans le pied de page de son site Web.

Promotions de parrainage du Trunk Club

Annoncez votre programme de parrainage sur les réseaux sociaux

Pensez à faire la publicité de votre programme de parrainage sur les réseaux sociaux, surtout si vous y avez une grande base de followers. Cela ne vous coûtera presque rien et peut amener plus de participants.

Annoncez votre programme de parrainage par e-mail

Vous pouvez ajouter votre programme de parrainage au pied de tous vos e-mails ou sous forme de bannière pour tous les e-mails. Vous pouvez également l'ajouter à certains e-mails. Par exemple, les e-mails de réengagement, la confirmation d'achat, les e-mails de remerciement post-achat ou la newsletter.

Exemple : Away ajoute le lien "Parrainer un ami" à l'e-mail de panier abandonné.

Lien de parrainage avec e-mail par AWAY

Envoyer un message aux référents potentiels

Une autre façon de faire la publicité de votre programme de parrainage consiste à envoyer un message directement aux référents potentiels. Vous pouvez les informer de votre programme de parrainage et les encourager à y participer. Vous pouvez le faire initialement, lorsque vous lancez le programme, ainsi qu'envoyer des rappels s'ils n'y ont pas encore participé.

En ce qui concerne la conception du message, vous devez commencer par un titre concis qui explique en quoi consiste le message. Inclure les avantages directement dans le titre augmentera les taux d'ouverture et empêchera certains rapports de spam.

Ensuite, vous devez expliquer pourquoi vous les contactez (pour les informer sur le programme, pour leur rappeler le programme), en quoi consiste le programme (avantages exacts, récompenses), comment il fonctionne (quelles sont les principales règles du programme) et dirigez-les vers un court CTA, par exemple "En savoir plus" qui les dirige vers la page de destination de votre programme de parrainage. Vous pouvez également ajouter un code de parrainage ou un lien directement dans le message afin que le référent puisse le copier et l'envoyer à ses amis sans avoir à se rendre sur votre page de destination. Cela raccourcira le nombre d'étapes à franchir pour inviter des amis. N'oubliez pas de lier votre page de destination ou votre page de conditions générales quelque part dans le message, car vos clients doivent avoir accès aux conditions exactes de l'offre.

Exemple : Harry's a envoyé un e-mail annonçant son programme de parrainage qui indique clairement l'avantage pour le parrain.

Parrains potentiels et Harry's

Home Chef envoie un très court e-mail faisant la promotion de son programme de parrainage, mais ils ont un CTA très convaincant "Gagnez 35 $ de crédit" qui met l'accent sur les avantages pour les référents.

4. Créez une page de destination pour les amis référés

Vous devez décider où vous voulez que les amis référés atterrissent après avoir cliqué sur le lien/code fourni par les défenseurs. Il y a plusieurs options. Vous pouvez les diriger vers la page générale du programme de parrainage où vous expliquez les règles du programme. Vous pouvez également les diriger vers une page de programme de parrainage spécialement conçue pour les amis parrainés, expliquant les règles de leur point de vue (en vous concentrant sur la façon dont ils peuvent obtenir leur récompense) et en montrant vos produits. Vous pouvez également simplement les diriger vers votre offre, en les reliant à votre page d'accueil ou à vos pages produits.

Cette dernière est la meilleure option car elle affichera votre offre et rapprochera les arbitres de la finalisation de l'achat. Cependant, si vous choisissez ce scénario, n'oubliez pas d'ajouter les termes et conditions du programme de parrainage dans le message de parrainage que vous leur envoyez. Pour faciliter l'échange de récompenses, il est préférable que le lien vers votre offre soit un lien profond qui ajoute également le code de parrainage à leur panier afin qu'ils n'aient pas à se rappeler de le copier ou simplement de faire de votre incitation une promotion appliquée automatiquement. (s'ils suivent ce lien). Indiquez clairement dans le message de parrainage que l'offre ne sera appliquée que s'ils suivent le lien dans ce message et terminent la commande au cours de la même session.

Exemple : Pretty Little Thing propose une page de destination distincte pour les amis parrainés où ils atterrissent après avoir cliqué sur le lien dans l'e-mail. Comme la récompense de parrainage est une entrée dans le cadeau, l'ami parrainé doit le réclamer en remplissant un formulaire.

Seraphine propose une page de destination distincte pour les amis parrainés qui sont passés par le lien de parrainage. Ils demandent l'adresse e-mail de l'ami parrainé, puis ils affichent le code de réduction et quelques liens qui les mèneront au catalogue de produits.

{{EBOOK}}

{{ENDEBOOK}}

5. Concevoir des notifications de progression pour les référents

Comme pour toute campagne marketing, il est important de maintenir l'engagement et l'enthousiasme des clients tout au long de la campagne. Vous devez tenir vos défenseurs informés de l'évolution de leurs renvois. Vous pouvez le faire en leur envoyant des notifications chaque fois que quelque chose se passe dans le processus de parrainage. Par exemple, si l'ami parrainé a effectué un achat en utilisant le code ou le lien de parrainage. Vous devez également informer les défenseurs une fois qu'ils reçoivent des incitations, leur faire savoir comment les échanger et combien de temps ils sont valables.

Exemple : Haverdash a envoyé une campagne par e-mail lorsqu'ils ont introduit une entrée cadeau limitée dans le temps pour les référents et les arbitres.

Laissez les référents suivre leurs progrès

Si vous autorisez plusieurs parrainages et offrez des récompenses pour chaque parrainage, il serait très utile pour les référents de voir leurs progrès. Par exemple, quand ont-ils envoyé un lien de parrainage, à qui, a-t-il été échangé, etc. Vous pouvez également leur permettre d'envoyer un rappel à leurs amis qui n'ont pas encore échangé la récompense. De cette façon, vous les laissez gérer leurs références et évitez toute confusion sur le statut de leurs références. Ils sauront exactement qui ont-ils recommandé et qui pas encore.

Exemples : Eatsy propose une page dans son application mobile qui affiche le statut de toutes les références effectuées par un client et lui permet d'envoyer des rappels aux amis qui n'ont pas encore utilisé l'offre. Il montre également le montant des incitations qui sont à la disposition de l'avocat.

Morning Brew affiche les récompenses qu'il est possible d'obtenir en parrainant plus d'amis et jusqu'où vous en êtes dans votre parcours pour passer au niveau suivant :

Lulus fournit un simple bouton avec des statistiques sur les références sur leur page de référence (pas besoin d'être connecté, ils extraient les statistiques une fois que vous avez fourni votre adresse e-mail).

Mizzen + Main offre un suivi de la progression des parrainages une fois que vous essayez de parrainer un autre ami et insérez votre adresse e-mail sur la page de parrainage (similaire à Lulus mais sans avoir à appuyer sur aucun bouton et c'est sur la page, pas un pop-up, il donne aussi plus d'informations que Lulus).

6. Rendez les récompenses faciles à trouver

Il est préférable d'offrir un endroit où les parrains peuvent trouver leurs récompenses. Une option consiste à proposer une page de suivi des références dédiée, comme mentionné ci-dessus. Une autre consiste à proposer un cockpit client, où les clients peuvent suivre toutes leurs incitations, y compris celles qui ne sont pas liées aux références. C'est particulièrement important si les récompenses ont une date d'expiration plus longue ou si vous autorisez plusieurs parrainages et que les parrains peuvent obtenir plusieurs récompenses.

Exemple : H&M propose un cockpit client, où les clients peuvent trouver leur solde de points de fidélité, les remises disponibles, des bons uniques et un programme de parrainage.

Voici leur cockpit client dans l'application mobile :

Concevoir la vue de paiement pour les codes de parrainage

Si vous offrez un code de coupon ou une carte-cadeau comme récompense de parrainage, vous pouvez vous référer à notre guide des meilleures pratiques de l'interface utilisateur des promotions de coupon en ce qui concerne l'UX et l'interface utilisateur pour les vues du panier et de la caisse. Nous avons couvert la conception et le placement de la boîte de coupons, les messages d'erreur et de réussite pour les vues sur mobile et sur le site Web. Si vous n'utilisez que des codes de parrainage, nommez-le "code de parrainage" et si les deux, vous pouvez le nommer coupon/code de parrainage ou code de réduction.

Exemple : Ted Baker propose une case distincte pour le code promotionnel et pour le code de parrainage.

C'est ce qui s'affiche si vous cliquez sur « Été référé par un ami ? bouton:

Après avoir entré le nom du parrain, le formulaire vous demande de fournir votre adresse e-mail pour obtenir le code de réduction.

Si vous offrez une réduction de panier, vous devez l'ajouter automatiquement au panier et vous assurer qu'il est mentionné dans les messages que la réduction ne sera ajoutée que si certaines conditions sont remplies, par exemple uniquement si un client se connecte avec l'e-mail référencé ou s'ils terminent leur commande en suivant le lien qu'ils ont reçu de leur ami.

Si vous offrez un autre type de récompense, assurez-vous d'expliquer aux clients comment la réclamer à la fois dans les termes et conditions ou la FAQ du programme de parrainage et dans les notifications de récompense.

Résumé

J'espère que cette liste de bonnes pratiques UX vous aidera à démarrer la conception de votre site Web et de votre mobile pour les programmes de parrainage ou à améliorer votre conception actuelle. Nous avons également créé un guide sur la création de programmes de parrainage efficaces qui peuvent vous aider à concevoir le programme de parrainage lui-même.

{{CTA}}

Prêt à faire passer vos programmes de parrainage au niveau supérieur ?

Commencer

{{ENDCTA}}