A referral email can look polished and still create a support problem. “Give $20, get $20” leaves unanswered questions: when is the reward earned, who qualifies, what happens after a refund, and where can a customer see progress?
Referral programs are stateful. The design workflow must cover the invitation, the referred person’s experience, progress updates, successful rewards, expiry, and exceptions—not just one launch announcement.
Model the program before designing the sequence
Ask growth, product, legal, support, and lifecycle owners to agree on the rules in plain language. At minimum, define:
- who may refer and who may be referred;
- what event qualifies as a successful referral;
- whether rewards are cash, credit, discount, points, or another benefit;
- when rewards become available and when they expire;
- limits per person, household, region, or period;
- what happens after cancellation, return, fraud review, or duplicate accounts;
- where customers can see status and get help.
Turn those rules into a state table. This is more useful to a designer than a vague request for “three referral emails.”
| Trigger | Recipient state | Primary message | Required detail |
|---|---|---|---|
| Program invitation | Eligible, no referrals | Share a personal link | Benefit and qualification rule |
| Friend signs up | Referral pending | Progress acknowledged | What must happen next |
| Qualification completes | Reward earned | Reward is available | Value, location, expiry |
| Qualification fails | Referral ineligible | Explain outcome | Reason and support route |
| Reward nearing expiry | Unused reward | Use before date | Exact deadline and conditions |
Design the highest-risk state first
Teams naturally start with the celebratory invitation. Start instead with the message most likely to generate confusion—usually “pending,” “ineligible,” or “reward expired.” If the component system can explain that state clearly on mobile, the happy path will be easier.
Write a one-sentence job for each email. A pending email might need to say: “Your friend joined, and your credit will arrive after their first paid month.” The design should prioritize that condition above decorative referral artwork.
Use consistent terminology. Do not alternate between “credit,” “cash,” “bonus,” and “reward” unless they mean different things. Put the personal referral link or code in a selectable text treatment as well as a button when the ESP supports it. State the sender identity and why the recipient is receiving the email.
Build a reusable state system in Figma
Create shared modules for the logo, greeting, state heading, progress indicator, reward summary, primary action, rules summary, support link, and legal footer. Keep locked legal or program copy separate from campaign-specific headlines.
Emailify supports designing responsive emails in Figma, previewing mobile layouts, building with reusable components, and exporting production-ready HTML for major email clients and platforms. Use the component library to keep structure consistent, but allow state-specific hierarchy. An ineligible message should not look like a success email with one sentence swapped.
The modular email template workflow is a useful foundation. For referrals, name modules by job—reward-summary, qualification-status, expiry-warning—rather than vague layout labels such as two-column-2.
Connect design states to real data
Before export, map every variable to its system source and fallback:
- referrer first name;
- friend name, if privacy rules allow it;
- referral link or code;
- reward type and value;
- qualification event;
- status date;
- expiry date and timezone;
- account or reward-center URL;
- program terms URL;
- support route.
Use realistic test data. A two-digit credit in the mockup proves nothing if production rewards may include long currency formats, points balances, or translated dates. Never place an invented friend name into an email when the production event may not safely expose that identity.
Create fallback copy for missing personalization. “Your referral is progressing” is preferable to “undefined has joined.” Decide what happens when a referral link cannot be generated or a reward value is temporarily unavailable; those may require suppressing the send rather than displaying a generic placeholder.
Review both sides of the referral
The referrer and the referred friend have different contexts. The referrer knows the brand; the friend may only know the person who shared the link. Review acquisition emails for clear sender identity, consent, regional requirements, and a destination that matches the promise.
Check continuity across email and product:
- Does the CTA open the correct signed-in or public state?
- Does the landing page repeat the same qualification rule?
- Does the account reward center use the same status names?
- Can support see enough information to explain a failed qualification?
- Will a delayed event produce duplicate or contradictory emails?
This is distinct from a broad lifecycle email workflow: referral communication links two people, a qualification event, and a reward ledger, so state accuracy matters as much as campaign cadence.
QA the sequence, not isolated HTML
Export test emails and review them in the clients that matter to the audience. Check mobile wrapping, dark mode, button behavior, plain-text content, alt text, and the footer. Then run a state-transition test in the staging referral system.
Trigger a pending referral, a successful qualification, an ineligible case, and an expiry warning. Confirm values, timing, and links—not only rendering. Make sure transactional and promotional classifications match the organization’s legal and ESP guidance rather than assuming every referral message belongs in one category.
Launch checklist
- Program eligibility, qualification, reward, reversal, and expiry rules are approved.
- Every email maps to a documented trigger and recipient state.
- Pending and exception states are as clear as the success state.
- Terms, product UI, landing pages, and support language use the same terminology.
- Personalization fields have real sources, test values, and safe fallbacks.
- Referral links, reward-center links, terms, unsubscribe behavior, and support routes work.
- Mobile, dark mode, major client, and plain-text reviews are complete.
- Staging tests confirm the actual trigger order and values.
- Monitoring can detect duplicate sends, broken links, and unusual failure rates.
The best referral sequence makes progress feel visible without pretending the rules are simpler than they are. Clear states protect customer trust while giving the growth team a reusable system for new offers and markets.
Read as Markdown Related resource index Site index for AI agents
Pro Bundle