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
- Create a referral landing page
- Add a compelling headline
- Explain the program benefits
- Explain the program rules
- Add compelling images
- Add a form to let them participate in the referral program
- Allow for referral code customization
- Provide multiple sharing options
- Provide a referral message template but allow customization
- Design a sharing success message
- Design a sharing error message
- Make your CTA appealing
- Include FAQ in your referral landing page
- Add testimonials
- Advertise your referral program
- Advertise your referral program on your website or mobile app
- Advertise your referral program on social media
- Advertise your referral program in emails
- Send a message to potential referrers
- Create a landing page for the referred friends
- Design progress notifications for the referrers
- Let the referrers track the referrals’ progress
- Make the rewards easy to find
- 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.”
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.
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.
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.
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.
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.
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.
This is how the email looks like once sent to the referred friend:
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.
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.
Seraphine has a very cute CTA “Share the love” on their referral program page.
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.
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.
Pretty Little Thing has a link to their referral program in the customer account.
Haverdash has a refer a friend link in their main menu on the website.
Trunk Club has their referral program landing page in the footer of their website.
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.
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.
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.
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.
Ready to bring your referral programs to the next level?