Creating Referral design flow for Yocket Premium user: Case Study
Let me explain you the process to creating the Referral design flow for Yocket premium user to share the referral rewards to friends and acquire more premium user.
About Yocket
Yocket is an Ed-tech company that provides a platform to help students who are interested in studying abroad. The company offers features and resources that make it easier for students to find universities, connect with fellow students, track their application progress and more. Overall, Yocket’s mission is to simplify the study abroad process and make it more accessible.
​
In this case study, I have focused on creating the simple, easy to use and intuitive referral design flow for Yocket premium user to refer the Yocket premium plans.
About Me
As a Lead product designer at Yocket, I am leading the product design team with 8+ (designers+UX writers) and working on making DIY experience of making Yocket platform for study abroad aspirants.
​
Project duration- 2 week
Project Background
Project Goal: To increase more referrals from Premium students.
​
As a company we have kept the goal of acquiring 6,000 premium user by end of the 2023 by selling them the premium yocket service in their study abroad journey. We already have multiple initiative planned to increase the premium awareness and conversion from multiple places in their journey in the platform. ​
​
This was one of the initiative to acquire more premium user by leveraging the current premium student by referring their friends and earn the cashback, gift voucher and goodies.
Referral concept design has proven to be a powerful tool for brands and companies looking to acquire more users.
Understanding Existing handling and the problem space
We had old referral design on the platform which was not performing well. It was not designed well in term of simplicity, easy to use and not intuitive at all because of it old design look, hooks, the way it was appearing to the user and information it was asking from user.
Old Yocket referral design
The problem we identified we need to solve:
-
Earlier we don't had any initiative planned to leverage the current premium user(happy user) where it require less effort to tale help from them to acquire more user.
-
Current referral design system doesn't have complete visibility on the platform and no direct hooks/nudge was provided to access the referral system.
-
It was not easy to refer from the current referral popup model because user requires their friend name, phone and email to refer which is personal and sensitive information and getting this data takes time and was difficult before knowing the product offering and services, so hardly any premium user was taking initiative to refer friends. (more time and effort required for user to refer)
-
Exact referral cashback/rewards was not clearly communicated and the process to receive it after successful referral.
-
It was not clearly mentioned that how referral system works for both group of user which lacks clarity and creating doubt and confusion for user.
-
Post-referral flow was not designed and built for user how to apply the discount and purchase the premium plan with offer.
-
UX copy was not clear and written well to motivate and convince user to refer more friends.
Understanding Persona
Since we wanted to test this ideas if it is working for us to get more referral or not so we decided to only provide the referral option to all our currently active premium user who got admit or in the process of getting admits and in the happy customer zone. After checking the metrics if we see it is going well then we are going to introduce the referral program for all the onboarded user to acquire more user.
Referral Persona
How do we measure Success
-
Number of user clicked on referral model.
-
Number of user copied the referral code from the referral model and referral page
-
Number of user applied referral code to purchase the any premium plans. ​​
Design principle behind referral design
-
Increase the referral banner/hook visibility on the platform by keeping at the place where premium user are spending their most of the time.
-
Only Promote It Inside the App When It Makes Sense- Feed on Yocket Platform and app.
-
Emphasise the Referrer’s Incentive by keeping it simple and easy to read UX copy and not using Jargon on website, PWA and apps.
-
Create a Succinct and Attractive Referral Landing Page
-
Simplify the Sharing Steps make it easy for your users to start sharing their referral links.
-
Incentivises users to make referral. This might involve offering rewards or discounts to both the referrer and the person they refer.
-
Keeping the right messaging and branding of the program while sharing with users.
Brainstorming and Wireframe
Paper wireframes
Referral User Flow and post referral flow
Exploration and Iterations
I went through the iterative approach to create the design. while exploring few ideas and brainstorming session and multiple feedback and discussion loop with the product manager, researcher, copywriter and designer, we came up with the simple, easy to use referral flow for the users.
​
-
We decided to change the referral banner in every week and provide more attractive rewards, cashback and goodies
-
A/B test with different UX copy on the offer banner and offering.
-
Different banner for Yocket pro user (more than 90% premium user are Yocket pro)
-
WhatsApp share integration on the web to directly share the referral link to user since (more than premium user are active on the web)
Figma Iteration screenshots
Design Component
We already have the Yocket design system(Crest) in place but since we were thinking of new design component which looks attractive and scalable and fit best for premium user. I have created the simple, easy to use, scalable and aesthetically pleasing UI component by taking case of Yocket brand guideline then added to the existing design system
Referral design component (Auto Layout)
High Fidelity Design
After multiple iteration of design and feedbacks from the internal stakeholders, we come to the final high-fidelity screen of the referral flow with simple, easy to use and intuitive design which will give more visibility of the referral nudge and increase the sharing referral link.
1. Keeping the referral hook/nudge at the right place(Yocket feed)
Referral banner on offer zone on Yocket Feed
To provide the user a unique and personalised experience, we decided to create the multiple offer zone banner for referral campaign with different catchy colour and illustration to give it unique feeling and trigger them to refer.
Referral banner design
2. Simple and attractive popup model to copy code and refer
referral popup model iteration (Web)
referral popup model iteration (PWA/App)
3. Simple and clear Referral page to communicate well
Referral page (Web+App)
4. whatsApp Integration to share referral link smoothly and code copied variation
Share on WhatsApp and code copied
5. Handling edge case with creative and clean design for discount code, tag design and success model.
tag, discount code applied and success screen
6. Simple and powerful message copy for sharing referral on whatsapp and text message.
WhatsApp message design
7. A/B Testing different UX copy and design for better conversion
