Rakuten Rewards – Referral experience

CASE STUDY

Rakuten Rewards: Referral experience redesign

 

The project

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.

 

Project summary: Redesign the referral experience to support company OKRs

Methods: Surveys, mockups, prototyping, usability tests

Tools: SurveyMonkey, Sketch, Figma, Invision

Role: Lead Designer, from conducting research to delivering mockups

Platform: Web – mobile + destkop (Non responsive)

Team: Worked with product managers, marketing specialists, and developers

Context

How the referral program works

    1. The referrer shares its unique referral link to a friend
    2. The referee (friend) joins Rakuten using this link
    3. 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.

 

Problem we are trying to solve

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

Research


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.

Design

 

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

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:

• Understand members lack of motivation/interest around referrals on Rakuten

• Discover member aspirations about friend referral

 

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:

Desktop – Design iteration 1

For context, the mobile web and desktop web experiences were not totally symmetric features wise. While the mobile web version offered referral link sharing via SMS, the desktop version did not. The main difference between both versions was related to the email referral component. On the mobile web version, the approach was pretty basic as tapping on the email sharing icon opens the native email smartphone client. The desktop version allows users to send email invites directly from the friend referral page. It also lets the user import Gmail email addresses.

The product manager and I did not know the rationale explaining why the email component was different. To minimize development efforts, we decided to keep this difference as our goal was to launch the redesign as soon as possible.

Following the new mobile web design and the email component constraint, I designed the Desktop version. This is what my first iteration looked like:

Design and interaction notes:

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:

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 is 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

I did not have the chance to measure myself the impact of this redesign as I left Rakuten Rewards a couple of days before the project launch. However, from the feedback I got a couple of days after the launch, it sounds the results were mixed.

As a reminder our OKRs were:

  1. Increase members sharing their referral link
  2. Increase “Refer a friend” landing page visits to share conversion

While the number of « members sharing their referral link » drops a bit on Desktop it increases significantly on Mobile.

Regarding the « Refer a friend landing page visits to share conversion », it drops a bit on both platforms.

Takeaways

While I came up with a design solution answering user paint points, I don’t think it will move the needles enough to reach our OKRs. However, offering more transparency to the referrer is an important improvement as it sets solid foundations to build trust around the referral program. I am expecting in the mid-term, a decrease in the support ticket requests related to the referral program. To me, the real game-changer will be phase 2 of this project. As mentioned it would consist to introduce a gamification system around the referral program to engage members to refer more.

Also, I think we could have done a better job by changing our strategy on this project. We should have thought about how we wanted to promote this redesign to our users. To me, we should have done it at the same time we initiated this redesign. I think we missed an opportunity which could have helped us to drive more members to the « Refer a friend » page. At that time we were focused on bringing this new experience on all our platforms. Our strategy was to then implement this new approach to our mobile application (iOS and Android) as well as the browser extension.

From a design standpoint, I wish I had more freedom to visually simplify some areas of the experience. On the mobile web version, I should have changed more drastically the component inviting users to learn more about how the referral program works. After getting feedback that my fictional character profile pictures were confusing, I should have completely changed the way I was introducing this content. Simply removing profile pictures led to a nonesthetic result. I reused for consistency reasons the profile picture icon we used elsewhere on our platform, but the end result was not satisfying enough for me. When I came up with this idea I wanted to clearly showcase this educational content and invite users to tap on the « See How It Works » link. From research, a lot of users were not clear with the referral program prior to the redesign. From similar tests where we were trying to introduce educational content, simply surfacing a link did not get enough attention. This is also the reason why I associated an illustration with this link. From a visibility perspective though, it worked well as most users during my usability tests easily find out where to tap to get more information on the referral program.

Similarly, I think we could have done a better job regarding the referral component. It feels very busy and that’s probably because we have been too much attached to the metrics of the previous design. I believe we can move the needles and reach our objectives without displaying upfront all referrals methods. Less is more, I wish I had the chance to usability test other design iterations which looked less visually busy.

Designing with data is probably the main learning for me on this project. It was one of the first projects where I have to combine metrics insights from an existing platform and qualitative data from a survey. This project makes me realize I should sometimes defend more my design over data to deliver a more engaging experience. Next time, I would try to usability test earlier, to support my decisions and present design solutions that visually stand out more.

Thanks for reading!