# Scaling Referrals with Better UX
Growth · 2020 · Lead Designer
Streamlined the referral flow to support growth and engagement.
**Methods** : surveys, competition analysis, mockups, prototyping, usability tests
Source : https://albancarmet.com/case-study/rakuten-referral
## Problem
Teaming up with product managers, we looked at referral metrics and noticed a large portion of members who visited the referral landing page did not share their unique referral links.
Why is it a problem?
By not offering an optimal referral experience, we are missing a chance to increase our member database and ultimately generate more business.
Who are we designing for?
Authenticated Rakuten members
Design we wanted to improve
Constraints
1. Work with the Rakuten Design System
2. Provide a design solution allowing the marketing team to quickly update the bonus referral amount without creating new visuals.
3. Reuse the email referral component to reduce development efforts as much as possible
4. Reuse as much as possible existing referral email templates to reduce development implementation
What metrics will we use to measure the impact?
1. Increase members sharing their referral link
2. Increase "Refer a friend" landing page visits to share conversion
## Context
• 📊 Mobile referral sharing increased — on mobile, the number of members sharing their referral link grew after launch; desktop dropped slightly
• 📉 Landing-page-to-share conversion dropped — on both platforms, the ratio of page visits to referral shares declined post-launch
• 🔄 Phase 1 shipped; Phase 2 never launched — the gamification layer that would have addressed growth was deferred and ultimately cancelled
• ⚠️ Redesign rolled back — the old referral page was restored a few weeks after launch due to mixed results
Rakuten Rewards is a cash-back and shopping rewards company. Members of the site click through affiliate links before shopping at a retailer's site. Once the member makes a purchase, Rakuten Rewards receives an affiliate commission from the retailer which is then shared with the member.
How the referral program works
The referrer shares its unique referral link to a friend
1. The referee (friend) joins Rakuten using this link
2. Once the referee clicks on an affiliate link (from Rakuten Rewards) and spent $25+ on a partner store, the referrer gets $25, the referee $10.
## Process
Discovering rationales
Kicking off this project, I did not have any customer insights to help me out designing a solution matching members' expectations. That's why I designed a survey.
Method:
• 3 questions survey via SurveyMonkey
• Email open rate: 16.7%
• Survey ran for 4 days
Participants:
• Sent out to 44k Rakuten Rewards authenticated users
• Visited the Referral page at least once since 1/1/2019 on Desktop
• Did not send any referrals since 1/1/2019 on Desktop
• 654 responses, 141 open-ended responses
Goals:
• Understand members lack of motivation/interest around referrals on Rakuten Rewards
• Discover member aspirations about friend referral
Analyzing results here is what stood out and how I was envisioning to tackle those insights:
Competition analysis
In addition to those user insights, I completed my research phase with a competition analysis. As most of our competitors did not offer innovative ideas regarding their referral experience, I enlarged my analysis to all types of businesses.
## Solution
Refining the project scope
At this point of the design journey, we had a clear idea of features/components we wanted to include in the redesign. Compiling user insights and relevant ideas from other referral programs, we prioritized features in 2 phases based on the effort vs impact model.
Phase 1 will include:
– a storytelling component explaining how the referral program works
– edit/add new referral methods (including a QR unique to each member)
– a dashboard indicating referees statuses in their referral journal
– a FAQ related to the referral program
Phase 2 will include:
– social proof/leaderboard (a gamification mechanic)
Mobile design iteration 1
Following a mobile-first approach, I designed a flow reflecting the action items I surfaced during my research. To land on the « Refer a friend » page the user has to tap on the « Refer & earn $25 » button from the header.
How I integrated my research insights:
Improve the way we explain the referral program
On the current design, the component explaining how the referral program work, was very low in the page information architecture. One of our assumptions was that not necessarily all users scrolled the page and read the content explaining how it works. This is why I surfaced above the fold, a call to action driving users to a page explaining the program in detail.
In this « How it works » page I decided to develop a storytelling around 2 fictional characters, Sarah and Gary. My goal was to clearly differentiate bonuses earned by both parts. Indeed the referrer earned $25 while the referee $10.
Limited link sharing methods
I introduced new ways to refer friends via QR code and Facebook messenger. Those new methods were on the top of existing ones: SMS and the referral link copy.
To identify which ones I would put more emphasis on, I teamed up with my product manager and looked at the most used referral methods on the current design. It appeared the 2 most used were the « SMS » and the copy feature (copying the referral link). To reflect this hierarchy in my design I made the SMS and copy link methods larger than the other ones. To reinforce the emphasis on the SMS method (the most popular one) I also used our pink accent color to make it more visible.
Answers questions users could have about the referral program
I introduced in the « Refer a friend » page, a FAQ section dedicated to the referral program.
In addition to answering questions related to this topic, the goal was also to avoid to see users leaving this page to find their answers. That's why I used an accordion system to display answers. As a reminder one of the metrics I was trying to improve was to *Increase members sharing their referral link*.
Follow referees in their referral journey
As a reminder referees have to follow 3 steps to earn their referral bonus:
1. Click on the referral link they received
2. Sign up to Rakuten Rewards
3. Make a $25+ purchase from a Rakuten Rewards partner stores
To improve communication around where referrer friends are in their referral journey, I listed them as cards. Each card indicates in which of those 3 steps the referee is: « Invited », « Joined » and « Spend $25+ ». When a referee is at the « Invited » or « Joined » step, the card also includes a « Send reminder » link. Clicking on it sends an email reminder that encourages the referee to either join or complete a $25+ eligible purchase to earn a bonus.
Develop users engagement
To create excitement and encourage Rakuten members to get back to their referral section, I surfaced how much bonuses they could earn, if friends they invited, join Rakuten Rewards and make a $25+ eligible purchase. Those potential earnings live in the « Pending » tab of the « Referral activity » page.
This total is calculated by multiplying $25 (the bonus referral reward) by the number of invited friends who joined our platform but not made yet a $25+ eligible purchase.
Mobile design iteration 1.5
After sharing my first iteration in a design critic meeting I made some edits on the sections where I explain « How the referral program works ».
On the « Refer a friend » page I removed the photos of the fictional characters. From the feedback I got, adding photos made unclear who were those users. The unclarity also came from the fact I was also using a profile picture down below to surface the user profile picture (Mandy Jones).
Following this comment, I also removed the character photos associated with each step in the « How it works » page. I kept the step by step approach but made it more generic.
Mobile – Usability test 1
From the 1.5 version, I built a prototype and ran a usability test to evaluate my design solution.
Method:
• Remote unmoderated via UserTesting
Participants:
• 10 users
• 5 female – 5 male
• 25-55 y.o., $40k – $150k+
• Rakuten users
Goals:
• Evaluate if users understand how the referral program works
• Evaluate if users understand how to refer friends
• Evaluate if users understand the friend referrals tracking system
Here were the pain points revealed by the test:
Mobile design iteration 2
Following my action items, I edited my previous design and made those adjustments:
• I removed the QR feature and the share button to give more room to the other referral methods.
• I removed the profile picture and surfaced the « earned » and « pending » bonuses on the « Refer a friend » page. It avoids doing an extra tap to get that information. Users will have access to « earned » and « pending » bonuses breakdown by tapping on the « See details » and « See invited friends » links.
• On the « Referral activity » page, I turned the top background-color in grey to create a higher contrast and make the « Pending » and « Earned » tabs more visible. The goal was to facilitate internal navigation and avoid having to get back the « Refer a friend » page to know how much bonuses are pending or earned.
Mobile – Usability test 2
Following the same setup as the previous one, I ran a second usability test to evaluate this new design iteration.
Here was the synthesis of this second test:
[TEST2_SYNTHESIS_TABLE:rakuten]
Desktop design iteration 1
Once mobile was validated through two rounds of usability testing, I turned to the desktop version — adapting the same design principles to a wider canvas while working around one key constraint.
The mobile and desktop experiences were not symmetrical feature-wise. On mobile, sharing via SMS was the primary method (and most used). On desktop, that wasn't available — instead, users could send email invites directly from the referral page and import Gmail contacts. Neither the product manager nor I could find the original rationale for this split. Rather than unify them and risk delays, we decided to preserve the difference and move fast.
The desktop design followed the same structure as mobile — surfacing the referral mechanics up front, introducing the new sharing methods, and building the referral activity dashboard — adapted for the wider layout. This is what the first iteration looked like:
Email referral component
While I did not change the core feature of the email sender component, I wanted to improve some elements of the experience.
The first element I improved was the interaction around the button allowing users to send email invites. In the current design, the email component does not provide any visual feedback to indicate whenever the user can click on the « Send email » button to invite friends.
This is why I introduced states on this button. An inactive one to indicate the button is not clickable and active one to indicate it is clickable, meaning that the component is now ready to send invitation(s).
From my research, I also learned users care about not spaming their friends. That's why I took care of not to overflooding users with too many emails as they already received a lot from other companies.
In the current design, once a friend received an email invite and did not sign up for Rakuten Rewards, another email will be automatically sent out 3 days later after the initial one. Similarly to other brands using an email referral component, I chose to give more control to the referrer. This is why after entering friend email(s) in the email field, the referrer will see a checkbox to automatically send or not an email reminder.
Desktop – Usability test 1
Following the same setup as my Mobile web ones, I usability tested to evaluate my design.
Here were the pain points revealed by the test:
Desktop design iteration 2
Following my action items, I edited my previous design and made those adjustments:
• I moved the referral methods upper on the page to make sure they will be displayed above the fold. Because of that, some users did not see at all the referral methods during my first test.
• I moved the « How referrals work » section on the right side of the page. My intention was to still keep it at the top of the page to maintain a logical information architecture. Indeed, as a new Rakuten Rewards member, I want to understand first how the referral program works before inviting friends.
• I changed the visuals associated with each step of the « how referrals work » section. From a figurative style that created confusion on step 1, I switch to an abstract style to clearly indicates visuals are not clickable. For visual consistency, I have not only redesigned the visual associated with step 1 but all of them.
• Regarding the checkbox allowing users to send an automatic reminder after 3 days, the product manager and I finally decided to remove it to reduce development efforts.
• As far as it concerns the inactive and active states of the « Send » invitations button, after sharing this idea with the Product Design team, it has been decided to not introduce this type of interaction. It would have broken the UX consistency with other buttons across the Rakuten Rewards experience.
Desktop – Usability test 2
Following the same setup as my Mobile web ones, I usability tested to evaluate my new design.
Here were the results after the second test:
[DESKTOP_TEST2_SYNTHESIS_TABLE:rakuten]
Refining design screens
At this stage production, I was close to delivering the mobile and desktop screens to developers. However, I did some minor refinements to my design:
• On the mobile version, I replaced the initial visuals illustrating the « How referrals work » section by the abstract one I created for the Desktop version. The goal was to reinforce the UX consistency between both platforms.
• As far as it concerns the Gmail email importer feature, after carefully looking at the metrics, we decided to remove it as it was barely used by users.
• Lastly, the product manager and I teamed up with a copyrighter to shorten a bit the copy as it was pretty heavy.
Adjusting emails
To complete the redesign of the Referral experience, the last piece I had to design was email referrals. As a reminder, those emails are the ones that referees will receive to either join Rakuten Rewards or complete a $25+ purchase to earn their bonus.
Here are the emails referees will receive during their referral journey:
For the most part, it was about adjusting the messaging of already existing emails. As for other areas of the experience, our goal was to save time and test our ideas in production as soon as possible. On top of that, I also had to be mindful of the communication pressure we are sending to referees. The last thing we want to do is to spam the referees. As described in the timeline, referees will receive emails that will be automatically or manually sent. To avoid « spamming » a referee, a referrer won't be able to send an email reminder (« invitation » or « shop reminder ») within the next 7 days after the last one.
With this new tracking experience, I introduced an email reminder whenever a referee joined Rakuten Rewards but did not complete yet a $25+ purchase. The goal was to encourage referees to make this eligible purchase and earn their bonus. To create the « Shop » email reminder I took the « invitation » email template and created a variation of it. This is what email templates look like:
Final design
Here are what the final design looks like:
## Results
• 📊 Mobile referral sharing increased — on mobile, the number of members sharing their referral link grew after launch. Desktop dropped slightly.
• 📉 Landing-page-to-share conversion dropped — on both platforms, the ratio of page visits to referral shares declined post-launch.
• 🔄 Phase 1 shipped; Phase 2 never launched — the gamification layer that would have addressed the growth objective was deferred and ultimately cancelled.
• ⚠️ Redesign rolled back — the old referral page was restored a few weeks after launch due to mixed results.
I left Rakuten Rewards a couple of days before the project launch, so I wasn't able to measure the impact myself. From the feedback I gathered shortly after, results were mixed. On mobile, the number of members sharing their referral link increased — which aligned with one of our key metrics. On desktop, that same metric dropped slightly. The "landing page visits to share" conversion declined on both platforms.
A few weeks after launch, the redesign was rolled back and the old referral page was restored. This was disappointing — but important context: this was Phase 1, intentionally scoped to rebuild foundations and restore trust, not to drive immediate conversion growth. The gamification layer that would have addressed the growth objective was deferred to Phase 2, which never launched.
My takeaways
This project taught me two hard lessons that still shape how I work.
Don't let user feedback override your design judgment.
I over-indexed on usability test findings and ended up with components — especially the referral activity section — that were more complex than they needed to be. The right balance is using user feedback as signal, not as a spec.
Phase framing needs to be made explicit — early and often.
This redesign was never meant to move conversion metrics in the short term; it was about laying new foundations. But that intent wasn't clearly communicated to stakeholders or visible to users. When results came in mixed, there was no shared frame to interpret them correctly. I should have pushed harder to align on what success looked like for Phase 1 specifically — and made sure that definition was documented and visible.
## Impact
Streamlined Referral Experience