Programmi di riferimento UX e UI Best Practices

Questo post del blog raccoglie le migliori pratiche e ispirazioni per la progettazione di UX e UI del programma di riferimento per sito Web e dispositivi mobili. Copriremo l'intero percorso del cliente dai banner promozionali, alle pagine di destinazione dei referral, alla condivisione dei codici referral, alla ricezione dei premi referral e al loro riscatto. Abbiamo scritto questo post sul blog in base all'interfaccia utente delle piattaforme di e-commerce DTC con le migliori prestazioni (in termini di entrate) (che vedrai menzionata in tutto il post).

Ci auguriamo che questa guida ti aiuti a riprogettare la tua piattaforma per includere un programma di riferimento o per migliorare l'interfaccia utente esistente. Se vuoi imparare come progettare le regole del tuo programma di riferimento, ti consigliamo questo post sul blog.

Nota: in questo articolo chiamiamo la persona che indirizza un amico un "referrer" o un "avvocato" e la persona a cui si riferisce, un "arbitro" o un "amico segnalato".

Nota: tutti gli screenshot desktop sono stati realizzati su Mac, Chrome e tutti gli screenshot mobili sono stati realizzati utilizzando la risoluzione iPhone X su Chrome.

Come garantire la migliore UX in un programma di referral dei clienti?

Ecco un rapido elenco di controllo dei suggerimenti UX che puoi seguire durante la creazione della tua soluzione di riferimento. Per istruzioni più dettagliate con esempi, continua a leggere.

1. Crea una pagina di destinazione di riferimento separata.
2. Aggiungi un titolo accattivante e copia.
3. Spiega le regole e i vantaggi del programma.
4. Aggiungi immagini salva valore e brandizzate.
5. Aggiungi un modulo per consentire ai clienti di partecipare facilmente al programma di riferimento.
6. Consenti la personalizzazione del codice di riferimento in base al nome del referrer.
7. Fornisci più opzioni di condivisione.
8. Fornisci un modello di messaggio di riferimento ma consenti la personalizzazione.
9. Progetta una condivisione di messaggi di successo e di errore.
10. Rendi chiara la tua CTA.
11. Includi FAQ e T&C nella pagina di destinazione del tuo referral.
12. Aggiungi le testimonianze dei clienti.
13. Pubblicizza il tuo programma di riferimento attraverso tutti i canali e i punti di contatto disponibili.
14. Invia un messaggio direttamente ai potenziali referrer.
15. Crea una pagina di destinazione per gli amici segnalati.
16. Progetta notifiche di avanzamento per i referrer e consenti ai referrer di tenere traccia dei progressi dei referral.
17. Rendi i premi per i referral facili da trovare e ottenere.

1. Crea una pagina di destinazione di riferimento

La tua pagina di destinazione dei referral dovrebbe essere l'hub principale per le informazioni sul tuo programma di referral. Dovrebbe spiegare tutto ciò che i clienti dovrebbero sapere al riguardo e convertire potenziali sostenitori. Dovresti usarlo come hub di riferimento principale collegato nel tuo menu o banner pubblicitari. Dovresti anche collegarti ad esso nei tuoi messaggi. La pagina di destinazione dovrebbe includere un modulo che consenta ai sostenitori di acquisire e condividere i link di riferimento. Ecco alcuni suggerimenti per ottenere il meglio da una pagina di destinazione di riferimento:

Aggiungi un titolo e immagini accattivanti

Il titolo sulla tua pagina di destinazione dovrebbe essere semplice e spiegare quali sono le regole del programma. Ecco alcuni esempi di titoli accattivanti che puoi utilizzare:

• "Invita un amico e guadagna ricompense mai viste"
• "Condividi l'amore"
• "Ottieni una X gratuita per te e i tuoi amici"
• “Spargi la voce e ottieni uno sconto”
  

Esempio: il titolo della pagina del programma di riferimento di Harry è breve e accattivante e contiene il vantaggio: “Non lasciare indietro i tuoi amici. Invita gli amici e guadagna prodotto."

Spiega i vantaggi e le regole del programma

Poiché molto probabilmente i tuoi clienti parteciperanno al programma per ottenere i vantaggi che offri, inizia subito spiegando i vantaggi della partecipazione al programma sia per i referrer che per gli amici segnalati. Dovresti spiegare i tipi di premi che entrambe le parti possono ottenere e il valore dei premi, soprattutto perché gli arbitri non hanno familiarità con il tuo marchio e potrebbero non conoscere il valore dei premi, in particolare se offri i tuoi prodotti come premi.

Esempio: Omsom ha una pagina del programma di riferimento molto semplice che spiega chiaramente i vantaggi sia per il referrer che per l'arbitro.

Un'altra parte è rendere le regole del programma facili da capire e da seguire. Cosa dovrebbero fare i sostenitori e gli amici invitati per guadagnare l'incentivo? Se hai delle esclusioni o maggiori dettagli, inseriscili nella pagina, ma sotto le regole generali, in modo che le basi del programma siano comunque facili da capire.

Esempio: Trunk Club spiega le regole del programma in modo breve ma chiaro sulla loro pagina di destinazione.

Includi FAQ o T&C nella pagina di destinazione del tuo referral

I clienti di solito avranno alcune domande prima di iscriversi al programma di riferimento. Aggiungi una sezione per alcune domande frequenti (puoi selezionarne alcune chiave, se preferisci creare una pagina di termini e condizioni separata) per fornire risposte pronte ai tuoi potenziali sostenitori.

Esempio: Ted Baker ha un collegamento ai loro Termini e condizioni sulla pagina di destinazione del referral.

Aggiungi testimonianze

Le testimonianze sono un'ottima aggiunta a qualsiasi pagina di destinazione. Anche se non si vede spesso sulle pagine di destinazione dei referral. Se puoi mostrare ai clienti alcune prove sociali, saranno più inclini a partecipare al tuo programma o ad acquistare da te per la prima volta. Ciò è particolarmente importante se invii la pagina di destinazione del referral agli amici segnalati, che non conoscono il marchio.

2. Aggiungi un modulo di condivisione referral

Se vuoi ottenere il maggior numero possibile di referral, dovresti semplificare l'adesione e la partecipazione al tuo programma. Richiedi ai potenziali referrer solo di compilare le informazioni di base, come il loro nome e indirizzo e-mail. Non includere troppe domande o opzioni extra di cui non hai davvero bisogno per eseguire il tuo programma. Questo ti aiuterà a convertire meglio i clienti interessati in sostenitori.

Esempio: Lulus offre un semplice modulo, accanto al quale vengono spiegate di nuovo brevemente le regole del programma di riferimento, per un promemoria.

Consenti la personalizzazione del codice di riferimento

Se utilizzi codici di riferimento o link di riferimento, consenti la personalizzazione del codice o del collegamento (ad esempio, KATE-10 o www.domain.com/kate-10). Lo renderà più condivisibile, più facile da ricordare e più probabile che i tuoi referrer lo aggiungano al loro post sui social media, ad esempio. Avere questo tipo di codici o collegamenti aiuta i tuoi amici a identificare con il minimo sforzo cognitivo che si tratta di un invito di un amico..

Esempio: Pretty Little Thing crea codici di riferimento personalizzati dal nome e cognome del referrer.

Fornisci più opzioni di condivisione

Fornisci molte opzioni di condivisione in base ai dati demografici e alle preferenze del tuo pubblico. Se preferiscono utilizzare i social media rispetto alle e-mail, fornisci le opzioni per condividere il link di riferimento o il codice tramite i social media in modo nativo. Se hai il tuo programma di riferimento sull'app, utilizza la funzione di condivisione integrata per le app mobili per utilizzare tutte le opzioni fornite di solito dal cellulare. In questo modo i tuoi referrer avranno accesso alla loro rubrica telefonica, elenchi di e-mail e account di social media fin dall'inizio. Aiuterà anche con l'esperienza dell'utente poiché sanno come funziona questa funzionalità.

Ricordarsi di fornire collegamenti pertinenti per dispositivi mobili e desktop. Se invii un collegamento a un dispositivo mobile, dovrebbe aprire la tua app o app store, se sul desktop, dovrebbe guidare gli utenti al sito desktop. Puoi farlo, ad esempio, usando Branch. Scopri come Shopmark ha utilizzato Branch per creare link di riferimento pertinenti omnicanale.

Esempio: Summersalt offre più opzioni per condividere i link di riferimento – via e-mail, SMS, Facebook, Messenger, Twitter o semplicemente copiando e incollando il link.

Prepara un modello di messaggio di riferimento pronto ma consenti la personalizzazione

In alcuni casi, è meglio fornire un messaggio prescritto per incoraggiare i potenziali sostenitori a inviare inviti ai loro amici. Ciò renderà più facile per i referrer inviare i messaggi di referral. Tuttavia, dovresti lasciare che i referrer cambino o personalizzino i messaggi se non gradiscono la copia prescritta.

Quando si tratta della copia del messaggio di riferimento, dovresti renderlo un po' più informale e personale in modo che sembri come se il referrer lo abbia scritto da solo. Dovresti includere il nome del referrer e dell'amico segnalato per personalizzarlo un po'. Dovrebbe essere breve, dritto al punto, spiegare un po' del marchio e del loro prodotto, oltre a spiegare cosa c'è per loro (uno sconto) e come ottenerlo (usa il codice di riferimento). Dovresti anche includere un CTA visibile in modo che l'amico segnalato non debba pensare molto a dove fare clic per controllare l'offerta.

Esempio: Away ha un breve modulo di segnalazione che richiede solo l'indirizzo email dell'amico segnalato e ha un messaggio prescritto (che può essere personalizzato). Il messaggio è breve e informale e spiega il valore del prodotto, il contesto e la ricompensa che possono ottenere grazie al link di riferimento che hanno ricevuto.

Ecco come appare l'e-mail di riferimento una volta inviata all'amico segnalato:

Progetta una condivisione di messaggi di successo e di errore

Visualizza un messaggio di successo se il codice di riferimento è stato inviato o copiato correttamente negli appunti.

Esempio: Omsom mostra un messaggio di successo se un referral è stato inviato correttamente. Incoraggiano anche il referrer a fare riferimento a più amici lì.

D'altra parte, dovresti anche visualizzare un messaggio di errore se le cose vanno storte. Ad esempio, se l'amico è già stato segnalato dal referrer o è già un cliente e non soddisfa le condizioni del programma.

Rendi chiara la CTA

Il tuo modulo richiederà una sorta di CTA che invierà il messaggio di riferimento agli amici segnalati. Tutto nella pagina di destinazione del tuo programma di riferimento dovrebbe portare all'invito all'azione. Un invito all'azione di riferimento dovrebbe attirare l'attenzione e invitare le persone a fare clic. Rendi il testo in grassetto, sottolineato o di un colore diverso. Alcuni design aggiungono ancora più enfasi aggiungendo frecce che puntano all'invito all'azione.

Quando si tratta della copia CTA, meno parole usate, meglio è. Alcune idee per il testo CTA includono: "Unisciti al nostro programma", "Inizia a condividere ora", "Guadagna il tuo primo premio", "Iscriviti", "Unisciti ora" o "Inizia a condividere".

Esempio: Lulus ha un semplice CTA "invia e-mail" poiché il modo principale per condividere il link di riferimento è tramite e-mail.

Seraphine ha un simpatico CTA "Condividi l'amore" sulla pagina del programma di riferimento.

3. Promuovi il tuo programma di riferimento

Un programma di riferimento non ha valore se i tuoi clienti non ne sono a conoscenza. Puoi, ad esempio, aggiungere un widget (simile al widget di chat) su tutte le pagine che richiede agli utenti di segnalare il marchio ai propri amici. Ecco alcune altre opzioni per un'ottima UX di riferimento:

Pubblicizza il programma sul tuo sito web o app mobile

Pensa ad aggiungere banner alla tua home page, un link nel tuo menu, informazioni a riguardo sull'account cliente (cockpit) o ​​scrivere un post sul blog o un comunicato stampa per spargere la voce. Non dovrebbe essere promosso solo su una pagina di destinazione che nessuno conosce. Dovrebbe far parte della tua offerta principale, visibile direttamente dalla home page del sito Web e dall'app mobile in tutte le pagine fino alle pagine successive al pagamento e alle e-mail di ringraziamento post-acquisto.

Esempio: Pretty Little Thing ha un collegamento al loro programma di riferimento nell'account cliente.

Haverdash ha un link per invitare un amico nel menu principale del sito web.

Trunk Club ha la pagina di destinazione del programma di riferimento nel piè di pagina del loro sito web.

Pubblicizza il tuo programma di riferimento sui social media

Pensa a pubblicizzare il tuo programma di riferimento sui social media, soprattutto se hai una grande base di follower lì. Non ti costerà quasi nulla e può portare più partecipanti.

Pubblicizza il tuo programma di riferimento tramite e-mail

Puoi aggiungere il tuo programma di riferimento al footer di tutte le tue e-mail o come banner per tutte le e-mail. Puoi aggiungerlo anche a determinate e-mail. Ad esempio, e-mail di reimpegno, conferma di acquisto, e-mail di ringraziamento post-acquisto o newsletter.

Esempio: Away aggiunge il link "Invita un amico" all'e-mail del carrello abbandonato.

Invia un messaggio a potenziali referrer

Un altro modo per pubblicizzare il tuo programma di referral è inviare un messaggio direttamente ai potenziali referrer. Puoi informarli sul tuo programma di riferimento e incoraggiarli a prendervi parte. Puoi farlo inizialmente, quando avvii il programma, così come inviare promemoria se non hanno ancora preso parte ad esso.

Per quanto riguarda il design del messaggio, dovresti iniziare con un titolo conciso che spieghi di cosa tratta il messaggio. Includere i vantaggi direttamente nel titolo aumenterà i tassi di apertura e preverrà alcune segnalazioni di spam.

Quindi, dovresti spiegare perché li stai contattando (per informarli sul programma, per ricordare loro il programma), di cosa tratta il programma (vantaggi esatti, premi), come funziona (quali sono le regole principali del programma) e portali a un breve CTA, ad esempio "Ulteriori informazioni" che li indirizza alla pagina di destinazione del tuo programma di riferimento. Puoi anche aggiungere un codice referral o un link direttamente nel messaggio in modo che il referrer possa copiarlo e inviarlo ai suoi amici senza dover andare alla tua landing page. Ciò ridurrà il numero di passaggi necessari per invitare gli amici. Non dimenticare di collegare la tua pagina di destinazione o la pagina dei termini e condizioni da qualche parte nel messaggio, perché i tuoi clienti devono avere accesso alle condizioni esatte dell'offerta.

Esempio: Harry ha inviato un'e-mail in cui pubblicizzava il proprio programma di referral che indica chiaramente il vantaggio per il referrer.

Home Chef invia una brevissima e-mail per promuovere il loro programma di referral, ma hanno un CTA molto convincente "Guadagna $ 35 di credito" che sottolinea il vantaggio per i referrer.

4. Crea una pagina di destinazione per gli amici segnalati

Dovresti decidere dove vuoi far atterrare gli amici segnalati dopo aver cliccato sul link/codice fornito dagli avvocati. Ci sono un paio di opzioni. Puoi indirizzarli alla pagina generale del programma di riferimento dove spieghi le regole del programma. Puoi anche indirizzarli a una pagina del programma di riferimento appositamente progettata per gli amici segnalati, spiegando le regole dal loro punto di vista (concentrandosi su come possono ottenere la loro ricompensa) e mostrando i tuoi prodotti. Puoi anche semplicemente indirizzarli alla tua offerta, collegandoti alla tua home page o alle pagine dei tuoi prodotti.

Quest'ultima è l'opzione migliore perché mostrerà la tua offerta e avvicinerà gli arbitri al completamento dell'acquisto. Tuttavia, se scegli quello scenario, ricorda di aggiungere i termini e le condizioni del programma di riferimento nel messaggio di riferimento che invii loro. Per rendere più facile il riscatto del premio, è meglio se il link alla tua offerta è un deeplink che aggiunge anche il codice di riferimento al carrello in modo che non debbano ricordarsi di copiarlo o semplicemente trasformare il tuo incentivo in una promozione applicata automaticamente (se seguono quel link). Chiarisci quindi nel messaggio di riferimento che l'offerta verrà applicata solo se seguono il link in quel messaggio e completano l'ordine nella stessa sessione.

Esempio: Pretty Little Thing offre una pagina di destinazione separata per gli amici segnalati a cui atterrano dopo aver fatto clic sul collegamento nell'e-mail. Poiché la ricompensa per il referral è una voce nel giveaway, l'amico segnalato deve richiederla compilando un modulo.

Seraphine offre una pagina di destinazione separata per gli amici segnalati che sono arrivati ​​tramite il link di riferimento. Chiedono l'indirizzo email dell'amico segnalato, poi visualizzano il codice sconto e un paio di link che li porteranno al catalogo prodotti.

{{EBOOK}}

{{ENDEBOOK}}

5. Notifiche sullo stato di avanzamento della progettazione per i referrer

Proprio come qualsiasi campagna di marketing, è importante mantenere i clienti coinvolti ed entusiasti durante l'intera campagna. Dovresti tenere informati i tuoi sostenitori sullo stato di avanzamento dei loro rinvii. Puoi farlo inviando loro notifiche ogni volta che accade qualcosa nel processo di referral. Ad esempio, se l'amico segnalato ha effettuato un acquisto utilizzando il codice di riferimento o il collegamento. Dovresti anche informare gli avvocati una volta che ricevono gli incentivi, far loro sapere come riscattarli e per quanto tempo sono validi.

Esempio: Haverdash ha inviato una campagna e-mail quando ha introdotto una voce omaggio a tempo limitato per i referrer e gli arbitri.

Lascia che i referrer tengano traccia dei loro progressi

Se consenti più referral e offri premi per ogni referral, sarebbe molto utile per i referrer vedere i loro progressi. Ad esempio, quando hanno inviato un link di riferimento, a chi è stato riscattato, ecc. Puoi anche consentire loro di inviare un promemoria ai loro amici che non hanno ancora riscattato il premio. In questo modo, consenti loro di gestire i loro referral ed evitare confusione sullo stato dei loro referral. Sapranno esattamente chi hanno raccomandato e chi non ancora.

Esempi: Eatsy offre una pagina nella propria app mobile che mostra lo stato di tutti i referral effettuati da un cliente e consente loro di inviare promemoria agli amici che non hanno ancora utilizzato l'offerta. Mostra anche la quantità di incentivi a disposizione dell'avvocato.

Morning Brew mostra quali ricompense è possibile ottenere invitando più amici e quanto sei lontano nel tuo viaggio per arrivare al livello successivo:

Lulus fornisce un semplice pulsante con le statistiche dei referral sulla loro pagina di referral (non è necessario essere registrati, estraggono le statistiche una volta fornito il tuo indirizzo e-mail).

Mizzen+Main offre il monitoraggio dell'avanzamento dei referral una volta che provi a segnalare un altro amico e inserisci il tuo indirizzo e-mail nella pagina di referral (in modo simile a Lulus ma senza dover premere alcun pulsante ed è sulla pagina, non un pop-up, fornisce anche più informazioni di Lulus).

6. Rendi le ricompense facili da trovare

È meglio offrire un luogo in cui i referrer possano trovare i loro premi. Un'opzione è quella di offrire una pagina di monitoraggio dei referral dedicata, come menzionato sopra. Un altro è offrire una cabina di pilotaggio del cliente, in cui i clienti possono tenere traccia di tutti i loro incentivi, anche quelli non relativi ai referral. È particolarmente importante se i premi hanno una data di scadenza più lunga o se consenti più referral e i referrer possono ottenere più premi.

Esempio: H&M offre un cockpit per i clienti, in cui i clienti possono trovare il saldo dei punti fedeltà, gli sconti disponibili, i voucher unici e un programma di riferimento.

Ecco il loro cockpit per i clienti nell'app mobile:

Progetta la vista di pagamento per i codici di riferimento

Se offri un codice coupon o una carta regalo come premio per il referral, puoi fare riferimento alla nostra guida alle migliori pratiche dell'interfaccia utente delle promozioni coupon quando si tratta dell'esperienza utente e dell'interfaccia utente per le visualizzazioni del carrello e del pagamento. Abbiamo trattato il design e il posizionamento della casella dei coupon, i messaggi di errore e di successo sia per le visualizzazioni da dispositivi mobili che per siti Web. Se utilizzi solo codici di riferimento, chiamalo "codice di riferimento" e, se entrambi, puoi denominarlo coupon/codice di riferimento o un codice sconto.

Esempio: Ted Baker offre una casella separata per il codice promozionale e per il codice di riferimento.

Questo è ciò che appare se fai clic su "Sei stato invitato da un amico?" pulsante:

Dopo aver inserito il nome del referrer, il modulo ti chiede di fornire il tuo indirizzo email per ottenere il codice sconto.

Se offri uno sconto sul carrello, dovresti aggiungerlo automaticamente al carrello e assicurarti che sia menzionato nei messaggi che lo sconto verrà aggiunto solo se vengono soddisfatte determinate condizioni, ad esempio solo se un cliente accede con l'e-mail di riferimento o se completano l'ordine seguendo il link ricevuto dal loro amico.

Se offri un altro tipo di premio, assicurati di spiegare ai clienti come richiederlo sia nei termini e condizioni o nelle FAQ del programma referral sia nelle notifiche sui premi.

Sommario

Spero che questo elenco di best practice per l'esperienza utente ti aiuti a iniziare a progettare il tuo sito Web e il tuo dispositivo mobile per i programmi di riferimento o a migliorare il tuo design attuale. Abbiamo anche creato una guida sulla creazione di programmi di riferimento efficaci che possono aiutarti nella progettazione del programma di riferimento stesso.

{{CTA}}

Pronto a portare i tuoi programmi di riferimento al livello successivo?

Iniziare

{{ENDCTA}}