How to Design Great Referral Program UX and UI?

Designing a great referral program UX and UI is key to driving conversions and creating a smooth customer journey. In this guide, we collect the best practices and real-life inspirations for building referral flows on both websites and mobile apps.

We’ll walk through each stage of the referral experience – from promotional banners and referral landing pages to sharing codes, receiving rewards, and redeeming them. To ground our recommendations, we analyzed the top-performing DTC e-commerce platforms and their revenue-driven referral program designs.

Whether you’re adding a referral program to your platform or optimizing an existing one, this guide will give you actionable insights to improve your UI and boost participation.

Note: Throughout this article we use the terms “referrer” (or “advocate”) for the person sending the invite, and “referee” (or “referred friend”) for the person receiving it. Note: All desktop screenshots were taken on Mac/Chrome, and mobile screenshots were made using iPhone X resolution on Chrome.

How to ensure the best referral program UX?

Designing the right referral program UX can make the difference between a campaign that customers ignore and one that drives consistent growth. Here’s a quick checklist of referral UX best practices to follow when building your referral solution.

1. Referral landing page essentials

• Create a dedicated referral landing page – don’t hide your program.
• Add a catchy headline & clear copy to explain value right away.
• Explain the program rules and benefits in simple language.
• Include branded, share-worthy visuals to boost trust.
• Add a short participation form so customers can join instantly.

2. Personalization & sharing

• Allow referral code customization (e.g., based on the referrer’s name).
• Provide multiple sharing options (email, SMS, WhatsApp, social).
• Offer a referral message template but allow customers to edit it.
• Design clear success & error messages after sharing.

3. Calls to action & transparency

• Make your CTA clear and consistent across the flow.
• Add FAQ and Terms & Conditions directly on the landing page.
• Show customer testimonials to build credibility.

4. Promotion & reach

• Promote your referral program across all touchpoints (email, banners, social media).
• Send direct messages to potential referrers to encourage sign-ups.
• Create a landing page for referred friends so they know the benefits too.

5. Engagement & rewards

• Design progress notifications for referrers (e.g., “You’re 1 invite away from your reward”).
• Let referrers track referral status easily in their account.
• Make referral rewards easy to find, claim, and redeem.

Now that you have the basics, let's jump into the nitty-gritty.

1. Create a referral landing page

Your referral landing page should be the central hub of your program, the place where customers learn everything they need and where potential advocates convert. It’s the page you’ll link to from your main navigation, promotional banners, and referral messages.

At minimum, your landing page should include:

• A clear program explanation (rules, rewards, benefits).
• A simple form or widget to generate and share referral links.
• Visuals and copy that make the program feel trustworthy and exciting.

Add a compelling headline and visuals

Keep your headline short, clear, and benefit-driven. Pair it with strong visuals (product images, branded graphics, or lifestyle shots) to make the program feel worth joining.

• “Refer a friend and earn never-before-seen rewards” 
• “Share the love”
•  “Get a free X for you and your friends”
•  “Spread the word and grab a discount” 
  

Explain the program benefits and rules

Since most customers join a referral program to earn rewards, your landing page should start with a clear explanation of the benefits for both parties:

• Referrers (advocates): What they earn for inviting friends.
• Referees (new customers): What they receive when joining through a referral.

Make sure to highlight not only the type of reward (discount, gift card, free product, store credit) but also the actual value. This is especially important for referred friends who may not know your brand yet. If your product itself is the reward, explain its value in simple, relatable terms.

Include FAQ or T&C on 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.

2. Add a referral sharing form

If you want to get as many referrals as possible, you should make it easy to join and participate in 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 you convert interested customers into advocates better.

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.

Provide multiple sharing options 

Offer sharing options tailored to your audience. If they prefer social media over email, let them share referral links natively on those platforms. For apps, use built-in sharing so users can access their contacts, email, and social media instantly. Always provide device-appropriate links, mobile should open the app or app store, while desktop should go to your website (tools like Branch can help).

Prepare a ready referral message template but allow for customization

Make it easy for advocates by offering a prewritten referral message. This lowers the barrier to sharing while still allowing them to edit the copy. Keep the tone informal and personal, like it was written by the referrer themselves. Personalize with both the referrer’s and friend’s names, keep it short and clear, and highlight three essentials:

1. What the brand/product is.
2. What’s in it for the friend (e.g., a discount).
3. How to claim it (referral code or link).

Add a clear CTA so recipients know exactly where to click.

Design a sharing success and error messages

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

You should also display an error message if things go wrong. For example, if the friend was already referred by the referrer or is already a customer and does not meet the program conditions.

Make the referral CTA clear

Your referral form needs a strong call to action (CTA) to send invites to friends. Design your landing page so every element leads users toward this action. The CTA should be eye-catching, use bold, underlined, or colored text, and consider arrows or other visual cues for emphasis.

Keep the copy short and direct. Effective options include:

• “Join our program”
• “Start sharing now”
• “Earn your first reward”
• “Sign up”
• “Join now”
• “Send invite”

3. Promote your referral program

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. Here are some other options for great referral UX:

Advertise the program on your website or mobile app 

Think of adding banners to your home page, a link in your menu, information about it to the customer account (cockpit), or 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 part of your 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. 

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 via emails 

You can add your referral program to the footer of all 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. 

Send a message to potential referrers 

Promote your referral program by reaching out directly to potential referrers. Send an initial message at launch, then follow up with reminders for those who haven’t joined yet.

Start with a clear, benefit-driven headline to boost open rates and avoid being flagged as spam. In the body, explain:

• Why you’re contacting them (program launch or reminder).
• What the program offers (rewards, benefits).
• How it works (main rules, steps).

Finish with a short, compelling CTA such as “Learn more” that links to your referral landing page. To reduce friction, include the referral code or link directly in the message so referrers can start sharing immediately. Still, make sure to link to your landing page or terms and conditions for full transparency.

4. Create a landing page for the referred friends 

Decide where referred friends will land after clicking a referral link or code. You have a few options:

• General referral page – explains the overall program rules.
• Dedicated referee page – tailored to referred friends, showing their benefits and product highlights.
• Product or homepage – the most effective choice, as it displays your offer and moves referees closer to purchase.

If you send them straight to your offer, make sure to include program terms in the referral message. To simplify redemption, use deep links that auto-apply the referral code to their basket, or enable auto-applied promotions. Clearly state that the reward is valid only if they follow the link and complete the order in the same session.

5. Design progress notifications for the referrers

Like any marketing campaign, it’s crucial to keep customers excited and motivated throughout the referral journey. Keep advocates informed of their progress by sending timely updates, for example, when a friend signs up or makes a purchase using their link or code.

Notify them as soon as they’ve earned a reward, explain how to redeem it, and highlight any validity period. Regular, transparent communication not only keeps them engaged but also encourages them to share more.

Let the referrers track their progress 

If you allow for multiple referrals and offer rewards for each referral, it would be very useful for the referrers to see their progress. 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. 

6. 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 wallet, where customers can track all their incentives, also the ones not related to referrals. 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.

Design the checkout view for referral codes

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 for 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. 

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. 

I hope these UX best practices give you a strong starting point for designing or improving your referral program across web and mobile.

{{CTA}}

Ready to bring your referral programs to the next level? 

Get started 

{{ENDCTA}}