We use cookies to help us improve, promote, and protect our services. By continuing to use the site, you agree to our cookie policy

Accept

Get inspiration to grow

Stay up to date with the latest marketing, sales and services 
tips and news from Voucherify.

Get inspiration to grow

Join our newsletter
arrow pointing left
go to blog
Promo strategies

Referral Programs UX and UI Best Practices

Kate Banasik
Kate Banasik
August 3, 2021
Share it on Twitter
Share it on Facebook
Share it on LinkedIn
Share it on Twitter
Share it on Facebook
Share it on LinkedIn

Referral Programs UX and UI Best Practices

This blog post collects best practices and inspirations for designing referral program UX and UI for website and mobile. We will cover the whole customer journey from the promotional banners, referral landing pages, sharing the referral codes, receiving referral rewards and redeeming them. We wrote this blog post based on the best performing (in terms of revenue) DTC e-commerce platforms’ UI (that you will see mentioned throughout the post). 

We hope this guide will help you redesign your platform to include a referral program or to improve your existing UI. If you want to learn how to design your referral program rules, we recommend this blog post.

Note: Throughout this article we call the person, who refers a friend a “referrer” or “advocate” and the person, whom they refer, a “referee” or a “referred friend.” 

Note: All desktop screenshots were made on Mac, Chrome and all mobile screenshots were made using the iPhone X resolution on Chrome. 

Table of contents 

  1. Create a referral landing page
  2. Add a compelling headline
  3. Explain the program benefits
  4. Explain the program rules
  5. Add compelling images
  6. Add a form to let them participate in the referral program
  7. Allow for referral code customization
  8. Provide multiple sharing options
  9. Provide a referral message template but allow customization
  10. Design a sharing success message
  11. Design a sharing error message
  12. Make your CTA appealing
  13. Include FAQ in your referral landing page
  14. Add testimonials
  15. Advertise your referral program
  16. Advertise your referral program on your website or mobile app
  17. Advertise your referral program on social media
  18. Advertise your referral program in emails
  19. Send a message to potential referrers
  20. Create a landing page for the referred friends
  21. Design progress notifications for the referrers
  22. Let the referrers track the referrals’ progress
  23. Make the rewards easy to find
  24. Basket and checkout view

Create a referral landing page

Your referral landing page should be the main hub for your referral program information. It should explain everything one should know about it and convert potential advocates. You should use it as the main referral information hub linked in your menu or in your advertising banners, linking it in your messages to bring there referrers (advocates) and referees (referred friends).. It is a place to include a form that lets your advocates share their referral links. You will need to make it comprehensive, easy to navigate and use to get as many referrals as possible. 

Add a compelling headline

The page title should be simple, uncomplicated and explain what the page is about. Here are some examples:

  • “Refer a friend and earn rewards” 
  • “Share your love”
  •  “Get a free dinner for you and your friends”
  •  “Spread the word and grab a discount” 

Example: Harry’s referral program page headline is short and catchy and contains the benefit: “Don’t leave your friends behind. Invite friends & earn product.”

Harry's referral landing page

Explain the program benefits

As your customers will most likely participate in the program to get the perks you offer, start right off with explaining the benefits of participating in the program for both referrers and the referred friends. You should explain the types of rewards both parties can get from the program, the value of the rewards (especially as the referees are not familiar with your brand and may not know the value of the rewards, particularly if you offer your products as rewards).

Example: Omsom has a very simple referral program page which explains the benefits for both referrer and referee clearly. 

Omsom referral page with program explanation

Explain the program rules

Make the rules easy to understand. What advocates and invited friends should do to earn the incentive? If you have any exclusions or more details, place them on the page, but below the general rules, so that the basics of the program are easy to grasp.  

Example: Trunk Club explains the rules of the program shortly but clearly on their landing page. 

Nordstron referral landing page

Add compelling images

Images can help you sell the program to your customers, especially if they clearly show the benefits of the program. 

Add a form to let them participate in the referral program 

If you want to get as many referrals as possible, then make it easy to join your program. Require potential referrers only to fill out basic information, like their name and email address. Do not include too many extra questions or options you don’t really need to run your program. This will help your program convert interested customers into advocates better.

Example: Lulus offers a simple form, next to which the referral program rules are explained shortly again, for a reminder. 

Lulus referral form

Allow for referral code customization

If you use referral codes or referral links, allow for code or link personalization (for example, KATE-10 or www.domain.com/kate-10). It will make it more shareable, easier to remember and more likely that your referrers will add it to their social media post, for example. Having these kinds of codes or links helps your friends identify with minimum cognitive effort that this is an invite from a friend..

Example: Pretty Little Thing creates customized referral code from the name and surname of the referrer. 

Pretty Little Thing referral link customization

Provide multiple sharing options 

Provide plenty of sharing options based on your audience demographics. If they prefer using  social media over emails, provide options to share the referral link or code via social media natively. If you provide your referral program on your mobile app, use the built-in sharing function for the mobile apps to use all the options the mobile usually provides. This way your referrers will have access to their phone address book, email lists, and social media accounts right off the bat. It will also help with the user experience as they know how this functionality works.

Remember to provide relevant links for mobile and desktop. If you send a link to a mobile device, it should open your app or app store, if on desktop, it should guide the users to the desktop site. You can do it, for example, using Branch. See how Shopmark used Branch to create relevant referral links omni-channel. 

Example: Summersalt provides multiple options to share referral links – via email, SMS, Facebook, Messenger, Twitter, or simply by copying and pasting the link.

Summersalt referral sharing options

Provide a referral message template but allow customization

In some cases, it’s best to provide a prewritten message to encourage potential advocates to send invites to their friends. This will make it easier for the referrers to send the referral messages. You should, however, let the referrers change or customize the messages if they don’t like the prewritten text.

When it comes to the copy of the referral message, you should make it a bit more informal and personal so that it sounds as if the referrer wrote it themselves. You should include the name of the referrer and the referred friend to personalize it a bit. For example: “Hi Nick! It’s Anna. I wanted to share with you my favourite pizza brand, Pizzalia (www.pizzalia.com). They have amazing, big, thin crust, real-italian pizzas and a huge choice of toppings (over 100!). Grab my referral code 10ANNA (simply insert it at the checkout) to get a 10% off your first order if you decide to give them a try! You can check their offer here <CTA “CHECK THE MENU”> Cheers, Anna.” It should be short, straight to the point, explaining a little bit about the brand and their product as well as explaining what’s in it for them (a discount) and how to get it (use the referral code). You should also include a visible CTA so that the referred friend does not have to think much about where to click to check the offer their friend has referred  them. 

Example: Away has a short form for referral sharing that requires only the referred friend’s email address and has a prewritten message (that can be customized). The message is short and informal and explains the product, context and the reward they can get thanks to the referral link they received. 


Away customizable referral message


This is how the email looks like once sent to the referred friend: 

Referral email from AWAY

Design a sharing success message 

Display a success message if the referral code was successfully sent or copied to clipboard. 

Example: Omsom shows a success message if a referral was sent successfully. They also encourage the referrer to refer more friends there. 

Omsom referral success message

Design a sharing error message

Display an error message, for example if the friend was already referred by the referrer or is already a customer and does not meet the program conditions(only new customers can be counted as a successful referral).

Make your CTA appealing

Your form will require some kind of CTA that will send the referral message to the referred friend(s). Everything in your referral program landing page should lead to your call to action. A referral call to action should catch the eye and invite people to click. Make the text bold, underlined, or a different color. Some designs add even more emphasis by adding arrows that point to the CTA.

When it comes to the CTA copy, the fewer words used, the better. Some ideas for the CTA text include: “Join our program,” “Start sharing now,” “Earn your first reward,” “Sign up,” “Join now,” or “Start sharing.”

Example: Lulus has a simple CTA “send email” as the primary way of sharing the referral link is via email. 

Lulus CTA example

Seraphine has a very cute CTA “Share the love” on their referral program page.

Seraphine referral CTA example

Include FAQ or T&C in your referral landing page 

Customers will usually have a few questions before signing up for your referral program. Add a section for some FAQs (you can select a few key ones, if you prefer to create a separate terms and conditions page) to provide ready answers for your potential advocates.

Example: Ted Baker has a link to their Terms and Conditions on their referral landing page.

T&C inclusion on the referral page by Ted Baker

Add testimonials

Testimonials are a great addition to any landing page. Although not often seen on referral landing pages. If you can show customers some  social proof, they’ll be more inclined to join your program or purchase from you for the first time. This is especially important if you send the referral landing page to the referred friends, who do not know the brand. It can convince them to make the first purchase from you. 

Advertise your referral program

Besides creating a referral landing page for your referral program and inviting your current customers to refer their friends, you should make the program easily accessible for any existing or potential customers. A referral program is worthless if your customers are unaware of it. You can, for example, add a widget (similar to chat widget) on all the pages that prompts users to refer the brand to their friends. 

Advertise on your website or mobile app 

Think of adding banners to your home page, adding a link in your menu, adding information about it to the customer account (cockpit), writing a blog post or a press release to get the word out. It should not just be promoted  on one landing page that nobody knows about. It should be a core offering, visible straight from the home page on the website and mobile app throughout all pages up to the post-checkout pages and thank-you post-purchase emails. 

Example: VividSeats referral program is advertised straight in the account settings, even for not signed-in customers on their app.

VividSeats referral program promo on the mobile app

Pretty Little Thing has a link to their referral program in the customer account.

Pretty Little Thing gift card placements

Haverdash has a refer a friend link in their main menu on the website. 

Haverdash referral link in the menu

Trunk Club has their referral program landing page in the footer of their website.

Trunk Club referrals promotions

Advertise your referral program on social media

Think of advertising your referral program on social media, especially if you have a big followers’ base there. It will cost you almost nothing and can bring more participants in. 

Advertise your referral program in emails 

You can add your referral program to the footer of all of your emails or as a banner for all the emails. You can add it to certain emails as well. For example, re-engagement emails, purchase confirmation, post-purchase thank you emails, or newsletter. 

Example: Away adds “Refer a friend” link to abandoned cart email. 

Referral link with email by AWAY

Send a message to potential referrers 

Another way of advertising your referral program is sending a message (email, social media, cockpit message, push notification etc.) directly to potential referrers. You can inform them about your referral program and encourage them to take part in it. You can do it initially, when you launch the program, as well as send reminders if they have not taken part in it yet. 

As for the message design, you should start with a concise headline that explains what the message is about. For example, “Refer your friends and earn up to $500” or “Refer a friend and get $30 off for both of you” or “Get a free product for referring your friends.” Including benefits straight in the headline will increase the open rate of your email (or other messages). 

Then, you should explain why you are contacting them (to inform them about the program, to remind them about the program), what the program is about (exact benefits, rewards), how it works (what are the main program rules) and lead them to a short CTA, for example “Learn more” that directs them to your referral program landing page, “Start referring” that takes them straight to the referral form etc. You can also add a referral code or link directly in the message so that the referrer can copy it and send it over to their friends without having to go to your landing page. This will shorten the number of steps they need to take to invite friends. Do not forget to link your landing page or terms and conditions page somewhere in the message still, because your customers need to have access to the exact conditions of the offer. 

Example: Harry’s sent an email advertising their referral program that clearly states the benefit for the referrer, how to get the reward, includes the referral link that can be shared immediately and contains a link to the referral program page with terms and conditions. 

Potential referrers y Harry's

Morning Brew adds a newsletter section promoting the referral program, which displays which level you currently are and what you can still reach:

Home Chef sends a very short email promoting their referral program but they have a very convincing CTA “Earn $35 credit” that emphasizes the benefit for the referrers. 

Create a landing page for the referred friends 

You should decide where you want the referred friends to land after clicking on the CTA in the message the referrers (advocates) sent to them. There are a couple of options. You can direct them to the general referral program page where you explain the rules of the program. You can also direct them to a referral program page specifically designed for the referred friends, explaining the rules from their perspective (focusing on how they can get their reward) and showing your products.. You can also just direct them to your offer, by linking to your home page or your product pages. The latter is the best option out of all because it will display your offer and bring referees  one step closer to completing a purchase. However, if you choose that scenario, remember to add the referral program terms and conditions in the referral message you send to them. To make the reward redemption easier, it is best if the link to your offer is a deeplink that also adds the referral code to their basket so that they do not have to remember to copy it or to simply make your incentive a auto-applied promotion (if they follow that link). Make it clear then in the referral message that the offer will be applied only if they follow the link in that message and complete the order in the same session. 

Example: Pretty Little Thing offers a separate landing page for the referred friends where they land after clicking on the link in the email. As the referral reward is an entry in the giveaway, the referred friend has to claim it by filling out a participation form. 

Seraphine offers a separate landing page for the referred friends who came through the referral link. They ask for the referred friend’s email address, then they display the discount code and a couple of links that will get them to the products catalog. 

Design progress notifications for the referrers

Just like any marketing campaign, it’s important to keep people engaged and excited. You should keep your advocates informed on the progress of their referrals. You can do so by sending them notifications every time something happens in the referral process.For example, if the referred friend made a purchase using the referral code or link. You should also inform the advocates once they receive incentives, let them know how to redeem them and how long they are valid. 

Note: You can also send notifications to your advocates about any new rewards they can earn, limited-time contests, and any other news about your referral program.

Example: Haverdash sent an email campaign when they introduced a time-limited giveaway entry for the referrers and referees. 

Let the referrers track the referrals’ progress 

If you allow for multiple referrals and offer rewards for each referral, it would be very useful for the referrers to see the progress of their referrals and to have it always accessible (not just receiving a bunch of notifications that are hard to follow). For example, when did they send a referral link, to whom, was it redeemed etc. You can also allow them to send a reminder to their friends who have not redeemed the reward yet. This way, you let them manage their referrals and avoid confusion on the status of their referrals. They will know exactly whom did they recommend and whom not yet. 

Examples: Eatsy offers a page in their mobile app that displays the status of all referrals made by a customer and lets them send reminders to the friends who have not used the offer yet. It also shows the amount of incentives that are available to the advocate. 

Morning Brew displays which rewards are possible to get for referring more friends and how far you are on your journey to getting to the next leve:


Lulus provides a simple button with statistics of the referrals on their referral page (no need to be logged in, they pull the statistics once you provide your email address). 

Mizzen+Main offers tracking of the referrals’ progress once you try to refer another friend and you again insert your email address on the referral page (similarly to Lulus but without having to press any buttons and it is on-page, not a pop-up, it also gives more information than Lulus).

If you are logged in, you can also see it under the “referrals” tab in your customer account.

Make the rewards easy to find

It is best to offer a place where the referrers can find their rewards. One option is to offer a dedicated referral tracking page, as mentioned above. Another is to offer a customer cockpit, where customers can track all their incentives, also the ones not related to referrals. You can add there, for example, coupon discounts, cart discounts, gift cards, free products, or product upgrades or loyalty points. It is especially important if the rewards have a longer expiration date or if you allow multiple referrals and the referrers may get multiple rewards. You can also mention in the customer cockpit what are the ways to gain more rewards, for example by referring more friends. 

Example: H&M offers a customer cockpit, where customers can find their loyalty points balance, available discounts, unique vouchers, and a referral program.

Customer cockpit on mobile resolution: 

Basket and checkout view 

If you offer a coupon code or gift card as a referral reward, you can refer to our Coupon Promotions UI best practices guide when it comes to the UX and UI in the basket and checkout views. We have covered the coupon box design and placement, error and success messages for both mobile and website views. If you only use referral codes, name it “referral code” and if both, you can name it coupon/referral code or a discount code. 

Example: Pumpables offer an affiliate program that works like a double-sided referral program. They offer just one box, for gift card and discount codes (that contains also the referral codes). 

Ted Baker offers a separate box for promotional code and for the referral code. 

This is what appears if you click on “Been referred by a friend?” button: 


After entering the referrer’s name, the form asks you to provide your email address to get the discount code. It is a little bit unnecessary in our opinion, the journey could finish here and just apply the discount code to the order. 



Beurre et Baguette sends a gift card code via email to the referred friend. The gift card comes as a promo code that can be applied to the order at the checkout. 

If you offer a cart discount, you should add it to the basket automatically and make sure it is mentioned in the messages that the discount will be added only if certain conditions are met, for example only if a customer logs in with the referred email or  if they complete their order following the link they got from their friend. 

If you offer another type of reward, make sure you explain to the customers how to claim it both in the terms and conditions or FAQ of the referral program and in the reward notifications. 

Summary

We hope this list of best practices will help you to get started with designing your website and mobile for referral programs or improving your current design. We have also created a guide on creating effective referral programs that can help you with designing the referral program itself. 

{{CTA}}

Ready to bring your referral programs to the next level? 

Get started 

{{ENDCTA}}

Share it on Twitter
Share it on Facebook
Share it on LinkedIn

Join our newsletter

By registering, you confirm you have read and agree to the Subscription Agreement, and to the storing and processing of your personal data by Voucherify as described in the Privacy Policy.
Before you send us your data, you must become acquainted with the Privacy Policy where you will find information on the personal data controller, your rights and our obligations, the purpose for which your data are processed and any other information which relates to the protection and security of your personal data.
Thank you for subscribing to our newsletter!
Something went wrong while submitting the form.
Close

Are you wasting time and money on digital promotions?

It’s time for a change.