Referral

9
An interface encouraging users or visitors to invite others in exchange for access, credit, or rewards.
Remote Referral Link Ready
false
Oku Bring Your Friends
false
Remote Referral
false

Upgrade to SaaSFrame Pro now to see 6 more Referral examples

Monthly

$18 /month

Billed $18 monthly
Browse all screens & flows
Filter and search screens & flows
Search text in screenshots
Access Figma files
Access mobile versions
Join now

Quarterly

$16 /month

Billed $48 quarterly
Browse all screens & flows
Filter and search screens & flows
Search text in screenshots
Access Figma files
Access mobile versions
Join now

Yearly

$15 /month

Billed $180 yearly
Browse all screens & flows
Filter and search screens & flows
Search text in screenshots
Access Figma files
Access mobile versions
Join now
No items found.

Upgrade to SaaSFrame Pro now to see 6 more Referral examples

Monthly

$18 /month

Billed $18 monthly
Browse all screens & flows
Filter and search screens & flows
Search text in screenshots
Access Figma files
Access mobile versions
Join now

Quarterly

$16 /month

Billed $48 quarterly
Browse all screens & flows
Filter and search screens & flows
Search text in screenshots
Access Figma files
Access mobile versions
Join now

Yearly

$15 /month

Billed $180 yearly
Browse all screens & flows
Filter and search screens & flows
Search text in screenshots
Access Figma files
Access mobile versions
Join now

Referral Design Guide

A referral experience turns a recommendation into a trackable introduction. The referrer needs to understand whom to invite, what happens after sharing, and when any reward becomes available. The recipient needs a useful reason to try the product without feeling that the recommendation hides a commercial agenda.

In SaaS, โ€œreferralโ€ covers several distinct journeys: a customer inviting friends, a creator promoting an affiliate link, or a professional partner referring clients. They can share tracking infrastructure while requiring different promises and interfaces. A clear design begins by naming the relationship rather than treating every invitation as the same growth mechanism.

Distinguish a recommendation from a workspace invitation

An invitation to join an existing team grants a role in a shared environment. A referral introduces someone to a product or offer. The difference affects the recipientโ€™s expectations, the information collected, and the language of the action. โ€œInvite a teammateโ€ should not unexpectedly create an affiliate signup journey.

A customer referral may reward both people, only the referrer, or neither. An affiliate program usually supports repeated promotion to an audience, while a partner program may involve qualification, training, and client services. Put those differences near the starting action so visitors do not apply to the wrong program.

If the product supports several models, provide separate entry points or a simple explanation of who each one serves. Existing members should be able to reach their dashboard without repeating the public recruitment journey. New applicants need a visible path to requirements and enrollment.

Base44 explains the process before asking for promotion

Base44 affiliate page with commission benefits and a four-step Sign up, Share, Track, Earn process.
Base44 separates the benefit proposition from the sequence needed to earn a reward. View the SaaSFrame screenshot.

The Base44 capture opens with an affiliate proposition and a โ€œJoin nowโ€ action. Below it, three benefit cards cover commission, unlimited referrals with fast payouts, and support. A separate four-step sequence describes signing up, sharing, tracking, and earning.

This separation answers two different questions. The benefit cards explain why someone might participate; the process explains what they must do. Without the second layer, a large reward headline can attract interest while leaving applicants unsure how it becomes payable.

The captured process also mentions approval before using the referral link and refers to paid conversions in the earning step. These are important conditions to surface. A visitor should not infer that a click, signup, or free account automatically creates a commission.

The FAQ topics include payout timing, commission, cookie window, marketing materials, and terms. Those are relevant follow-up questions for an affiliate audience. Their answers are collapsed in the screenshot, so the image establishes the information architecture, not the full program rules. Any commission figures are historical interface content rather than current commercial advice.

Wise gives newcomers and existing affiliates different routes

Wise affiliate page with Join the affiliate program and Log into Partnerize actions plus a three-step explanation.
Wise separates enrollment from access to an existing affiliate account. View the SaaSFrame screenshot.

Wiseโ€™s archived affiliate page presents two hero actions: join the affiliate program and log into Partnerize. The subsequent explanation covers becoming a partner, promoting Wise, and earning revenue. The page then distinguishes products that can be promoted and provides program-specific questions.

The paired actions avoid treating every visitor as a new lead. An existing affiliate likely wants a link, a report, or payout information; a new applicant wants to understand participation. Giving both audiences a recognizable route makes the public page useful after enrollment as well as before it.

The screenshot describes different products and a different commission arrangement for business referrals. This demonstrates why a referral interface should identify the destination offer. A single tracking link may not be appropriate for every audience or product, and the promoter needs to know what they are recommending.

Wiseโ€™s FAQ also distinguishes the affiliate program from an invite-a-friend program. That is a valuable clarification when familiar everyday language masks a more formal commercial relationship. Do not make visitors discover the distinction only after submitting an application.

Payhawk shows that a partner journey may require qualification

Payhawk partner audience cards for accounting companies, ERP integrators, and referral partners, with a join action
Payhawkโ€™s partner audience section makes participant fit explicit (cropped). View the SaaSFrame screenshot.

The Payhawk capture frames the offer as becoming a partner. It includes sections about who the company partners with, client benefits, integration capabilities, participant support, and an application form. The audience cards distinguish accounting companies, ERP integrators, and referral partners.

This differs from a casual customer sharing a link. A professional partner may need sales enablement, technical help, co-marketing, or account management. The application can therefore be more involved, provided each question has a clear qualification purpose.

The design lesson is not to copy the longer form into every referral flow. Match friction to the relationship. A customer who only wants to copy a personal link should not encounter a partner application; a service company seeking a formal relationship needs more context than a one-click share button.

Define the event that makes a referral qualify

A referral can move through several states: a link is shared, a visitor arrives, an account is created, a qualifying action occurs, and a reward is approved. Name the event that matters for the program. Otherwise the referrer may interpret every signup as money owed.

Explain material eligibility conditions before the person invests effort. Examples might include new customers only, a qualifying paid plan, or a completed purchase after a review period. These are possible program choices, not universal requirements. The interface must reflect the rules actually in force.

If the reward can be reversed after cancellation or a failed payment, show that possibility where rewards are described. A dashboard should distinguish provisional earnings from payable earnings. โ€œPendingโ€ needs a reason and an expected next event rather than acting as a permanent holding label.

Handle self-referrals, repeated introductions, and already-existing accounts consistently with the program policy. Where an introduction does not qualify, provide an understandable explanation without disclosing unnecessary personal information about the recipient.

Make sharing useful without taking over the message

The simplest sharing tool is often a personal link with a clear copy action and confirmation. Provide a short explanation of the offer alongside it. If the product includes a suggested message, let the referrer edit it and review the destination before sending.

A recommendation is more credible when it fits the relationship. A prewritten promotional paragraph may suit an affiliate publication but feel unnatural in a private message. Offer concise, adaptable language rather than forcing the same copy into every channel.

A recipient-facing page should acknowledge the referral offer and explain the product on its own merits. Preserve the referral context through signup where applicable. If a link expires or the offer is unavailable, give the recipient an understandable route forward rather than an unexplained error.

Do not claim a message has been sent when the action only opens a mail client or copies text. Feedback should describe the actual result. Similarly, a copied link is not a completed referral and should not inflate progress indicators.

Show progress in terms people can act on

A referral dashboard should help someone understand the state of their introductions and rewards. Useful categories may include pending, qualified, approved, paid, and ineligible. Choose states that match the real workflow and explain what separates them.

Keep totals scoped. โ€œTen referralsโ€ could mean clicks, signups, or qualifying customers. Label the measure and the reporting period. Separate earned rewards from paid rewards so someone can reconcile the dashboard with an eventual payout.

Give people an action when one is available: finish payout details, complete an application, view approved assets, or contact support about an unexpected state. A generic progress bar provides little help if there is no way to resolve the issue.

Balance transparency with recipient privacy. Referrers may need qualification status without needing full contact information or account activity. Decide what can be shown from the actual relationship and permissions rather than displaying every tracked detail by default.

Explain payout separately from earning

Qualifying for a reward and receiving it are separate moments. The interface should state how rewards are delivered, what information is required, and whether a payout schedule or threshold applies. If the reward is account credit, explain where it appears and what it can pay for.

For affiliate programs, make payment setup discoverable before earnings become payable. Missing account details should result in a clear task, not a silent delay. If a review holds a reward, explain the state and the next step without promising a date the system cannot support.

Money amounts need a currency, and dashboard totals should distinguish different currencies if the program supports them. A credit balance also needs a unit and any material expiration condition. Avoid mixing credits and cash in a single unlabeled total.

The Base44 and Wise captures both dedicate space to earning and payout questions. Their useful lesson is the placement of those topics within the participation journey, not any assumption that another program should adopt identical terms.

Design for failed attribution and support questions

Referrers may believe a customer used their link while the system records no qualifying event. Provide a support path and explain what information helps investigate. Avoid asserting that attribution is always perfect or that every missing record is user error.

Document the attribution policy in understandable language where it affects the reward. A program may use a defined time window or an approved referral submission process. The experience should make its chosen rules visible without requiring participants to reverse-engineer tracking behavior.

When rules change, identify which version applies to existing referrals. Historical rewards should remain interpretable. A dashboard that silently recalculates old earnings using new terms can undermine trust even if the underlying accounting is correct.

Review both sides of the recommendation

Test the referrer journey from enrollment to sharing and eventual reward. Then test the recipient journey from the shared link through the qualifying action. A program can look clear on its recruitment page while losing context at signup or payment.

  • Name the participant model: customer, affiliate, or professional partner.
  • State who qualifies and which event earns the reward.
  • Separate new enrollment from existing account access.
  • Make copied links and sent messages distinguishable.
  • Show pending, approved, and paid rewards separately.
  • Explain payout requirements and material conditions.
  • Provide a route for attribution and eligibility questions.

Referral UX FAQ

How is a referral different from inviting a teammate?

A referral recommends a product or offer. A teammate invitation grants access to an existing shared environment. The journeys should use distinct wording and explain the destination.

Should every referral program use an application form?

No. Qualification may be appropriate for professional partners or affiliates. A simple customer referral often needs immediate access to a link and clear reward conditions.

What should a referral dashboard count?

Count defined events and label them. Clicks, signups, qualified customers, approved rewards, and paid rewards are different measures and should not be combined into an ambiguous total.

Compare SaaSFrameโ€™s referral examples with team invitations and success notifications to study how products distinguish a recommendation, a completed action, and a reward.

Minimalist black and white abstract logo featuring intertwined curved lines forming a diamond shape.
Get SaaSFrame Pro
Monthly
$18
Quarterly
$48
Yearly
$180
Upgrade to access this feature
Browse all screens & flows
Filter and search screens & flows
Access Figma files
Access mobile versions
Bookmark screens & flows
Join now