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.
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.
Now that you have the basics, let's jump into the nitty-gritty.
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:
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.
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:
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.
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.
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.
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.
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).
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:
Add a clear CTA so recipients know exactly where to click.
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.
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:
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:
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.
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.
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.
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:
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.
Decide where referred friends will land after clicking a referral link or code. You have a few options:
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.
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.
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.
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.
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.
.svg){kind=small}
.svg){kind=icon}
