Every business aspires to acquire customers by spending as little as possible, i.e. reducing average Customer Acquisition Cost (CAC). PokerBaazi wanted to overhaul its referral model to give users a better experience and increase revenue by lowering CAC and increasing the Life Time Value (LTV) of all referred users on the platform. An excellent solution would be scalable, accessible, and sustainable when used with other customer acquisition channels. Here I discuss this exact problem and how design solved it to achieve this goal.
What was the challenge?
Old refer a friend flow in PokerBaazi was not easily discoverable by new users. Hence, it wasn't providing good results.
PokerBaazi didn't put much effort into leveraging this cost-effective customer acquisition model previously. So, we had to start fresh to make it a success.
The foremost goal of this module was to acquire new recreational players and then encourage them to be the silent ambassadors of the brand.
What was happening in the market?
I started by looking at different examples from the industry which were already using referral channels effectively. It became pretty clear at the beginning that I had to design it such that it's not just a one-off thing but instead becomes a habit.
Competitors were utilising techniques like loyalty tiers for customers for making their customer acquisition exercise a success.
Brands that gave a one-off reward for referring someone on the platform were utilising another setup to create a habit to maintain a reasonable retention rate.
A referral program is a highly cost-effective way to acquire customers as it becomes a word-of-mouth tactic of spreading good reviews about the platform by making users advocate the brand.
Targeted user story 🤔
As a PokerBaazi user, I want to refer more friends, so that I can earn a maximum referral bonus.
Journey of a Referrer 🚗
Three main channels through which first-time users could come to the PokerBaazi that we considered while devising a solution were as follows.
Installing it off the play store
Downloading it from the official PokerBaazi website
Installing it directly from someone else's referral link
In all of the above cases, one thing in common, i.e. all the users coming over, would be new. A considerable percentage of them would be recreational players who don't even have enough idea about the poker game itself. So, it was vital that discovering - the refer a friend feature or module of PokerBaazi is very easy for such users, or we would lose them. We won't turn them into our brand advocates who would further refer more users to the platform.
Refer to Fig. 3. for the aspirational journey map that I wanted to achieve.
Refer to Fig. 4. for the feature prioritisation.
So, we made sure that refer a friend module was easily discoverable on the home screen itself. In the current PokerBaazi home screen design, which was live on play-sore when we started this module, the most probable discovery position was the bottom navbar. However, we tried different approaches to make it work, and I have discussed both of those approaches below.
Pretty aggressive button placement in Navbar centre
My very first approach was to place the button more aggressively, right in the centre of the bottom navbar. This approach would mean that according to Fitt's law, the probability of clicking on the button would increase a lot. But the question was, do we even need that much increase in the likelihood of clicking this button?
This button placement would almost certainly undermine the importance of other navigation routes in the bottom navbar, and for PokerBaazi, all of them have equal priority. Also, this placement would mean that we are pushing the refer and earn module, even though the idea was not to stretch it so much and only try to make the user aware of its existence.
Refer to Fig. 5. below.
Button placement with more inline and blended
Of course, the second-best option was to make it sit in line with other icons or remove the one least lose and make room for it.
This placement would give refer a friend module the same priority as different navigation routes, and we would still be able to push it across to all users in a more subtle manner.
In the end, we decided to take this approach only. But then it was a challenge to make it visible and stand out slightly so that usually trained users can spot it, who had been trained by now to expect some other icon or navigation route at its position.
Refer to Fig. 6. below.
This or That? 🤷
After deciding the position of the icon, I tackled the next challenge. We wanted to make sure that the user never misses the icon.
To solve this, I looked into animation and micro-interaction usage. In general, I have used micro-interactions all over the app. We successfully crafted a robust framework that utilises the Lottie files format beautifully.
So, I created two variants of the icon. One approach used an animated version in the form of Lottie. The other was a static icon but slightly different visual design and language than other icons in the bottom navbar. We chose to go with static icon considering the following points:
Implementing a looping Lottie was resource-heavy and would degrade the performance in low-end devices.
We did try to eliminate the loop and made sure that the animation plays only once. But that didn't solve the issue either. We realised other interactions on the screens sharing the same system resources. So, finally, it all came down to deciding whether we even needed an animated icon. It turns out we didn't! Just a different looking static icon, too, solved the issue.
Refer to Fig. 7. and the Lottie below.
Nudge 'em up 🥶
After working on the discovery section of referring a friend module, our next focus was on maintaining and generating the interest and desire to be active in that module. We tried to achieve this by making sure that the journey of each referral doesn't end just after signing up on the platform.
So, to accomplish this, a few tasks were decided to be finished before everyone could reap the actual rewards of this program. The idea here was to create a constant nudge for the users so that their friends could push them to play more on the platform. This nudge further helped increase their understanding and liking for the PokerBaazi app, which also improved the retention rate of such users.
An essential part of this journey was the prominent nudge bottom sheet that popped up when the user visited the main module screen. Another vital screen where we used nudge effectively was the progress tracking screen which showed where the friend stands in their journey on the PokerBaazi app.
A small yet insignificant part of creating interest was the effective use of micro-interaction in one of the main call to action buttons on the main refer and earn screen. As we figured out in our preliminary tests, WhatsApp is the most used method of sharing such content, and we made sure that users can quickly figure out where the button is.
Refer to Fig. 8. below.
This or That? (yet again) 💁♂️
Another central UI element that needed much thought was the one showing the milestone.
I originally designed it to offer three milestones to achieve (including the starting point). But we later realised that few users might feel too lazy to go past the first milestone, as fulfilling it alone was a big task. Users had to play for a reasonable amount of time on the platform to reap the benefits of the first milestone.
This milestone alone could exhaust them to the point that they chose not to carry on and be content for a long time and ultimately lose interest in going past that. So, we ended up removing it, so there was just one milestone visible. This change felt more achievable to users!
Refer to Fig. 9. below.
Refer to Fig. 2. on top for a better understanding of flow, if you skipped the line!
Refer below to mocks of micro-interactions discussed above.
For the Leaders 🏆
However, We didn't stop here. More to come to enhance the experience further and create a sense of accomplishment for the users.
That's when we introduced the concept of referral leaderboards, and it additionally helped generate a sense of triumph for the users. The idea here was quite simple. We showed the top three rank holders on the main refer and earn screen, and a button redirected users to the more detailed view of leaderboard rankings where players could see other players' profiles.
One thing that wasn't that simple was showing the top three players. I had to choose the best approach among the two available, yet again. One was a horizontal layout showing all three players together at once, and another one was showing them vertically from rank one being at the top.
After a few A/B tests with the placement of the ranks, we decided to go for the vertical layout for two significant reasons.
We realised that cognitive load on an average user's mind to judge which player achieved rank 1 and which one achieved rank 3 was much less when seeing them top to bottom; it felt more intuitive than others by default.
Another primary reason was the behaviour of horizontal layouts on small screen (width) devices. The content felt a lot cluttered, and there were even chances to lose important information at times.
Refer to Fig. 11. below.
Heuristic Audit 🧐
Now let's discuss how well our design solution holds its ground during a heuristics audit. For simplification, I will only discuss this audit in the context of the PokerBaazi app.
Aim:
Get a high score that solidifies that the solution works. It will be a long-lasting solution that feels very intuitive to the users and works well for the company, helping it achieve its user acquisition goals.
Scoring Method:
The design is scored based on 10 usability heuristics put forward by the Nielsen Norman Group. The score could be 0 or 1 for each, which means the highest score could be 10, and the lowest would be 0.
1. Visibility of System Status
Like every other flow in the app, system status visibility has much importance in this user journey. In general, the flow is pretty linear, so it helps users see where they stand in the flow. When users first land on the home screen, they see a distinctive icon that feels active and invites them to click. The same pattern follows in other inner screens of the flow. E.g. in friends invited to screen, users, track the progress of their invited friends, colour shows clearly which step the friend has finished. The green colour indicates the completed stage, red shows where the user is currently, while the grey shows which step is yet to be unlocked.
SCORE: 1/1
2. Match Between System and the Real World
Designing the app honouring the real world match is crucial, as it connects the application with the players well. We have tried to achieve this by using appropriate graphics and illustrations in-app that show. The first indication is in the icon used in the bottom navbar, which resembles a rupee coin.
SCORE: 1/1
3. User control and Freedom
No flow is mandatory and provides a clear exit at any point if users don't want to continue. However, there seems like a bit of push and restriction inflow. Rewards or bonus money is released to users only when referred users play on the platform, which some might feel a bit restrictive. So, I would not say this flow passes this.
SCORE: 0/1
4. Consistency and Standards
Call to Actions and fonts are used per design guidelines to keep users' familiarity with the overall app intact. Be it bottom sheets or banners, everything is kept strictly consistent with the rest of the app.
SCORE: 1/1
5. Error Prevention
As part of the overall app, the usual in-app error prevention methods were safeguarding this module, including being accessible without the internet. There are no input text fields in this module, and hence no such validation error can occur. There's virtually no such state or interaction where it would be required to give any specific error message apart from when the internet drops off, and the app has to reconnect. In that case, the default system message that tells that app is trying to reconnect does the job. Every action starts a new flow that initiates a new task. So, discussing error handling in those flows will be out of scope as here we are only considering the holistic view of the new user journey loop.
SCORE: 1/1
6. Recognition Rather Than Recall
The idea here is to create an easily recognisable experience, reducing the overall cognitive load on the user's brain. I ensured that our UI elements were as simple and easy to understand as possible to achieve this. One particular example that I want to discuss here is the friend progress tracking screen (friend invited screen). It uses colour and motion to create a visual story that feels intuitive, and something users can recall easily. The colour green, in general, means something done, so that's what it means there as well. A connected dotted line guides the user through the chronological order of steps to be performed.
SCORE: 1/1
7. Flexibility and Efficiency of Use
Making this flow flexible and efficient for all levels of players was important. So, I have made sure that no user feels bound to perform a particular action at any stage and can quickly choose and decide a different activity to complete. Linear and natural flow of information ensure that no one gets confused or feels lost anywhere at any point in time. The success of PokerBaazi's Refer and earn module also depended upon how efficient and flexible the whole flow was for the users.
SCORE: 1/1
8. Aesthetic and Minimalist Design
Aesthetic and Minimalistic design is prevalent in the overall application by default, and there's no reason not to create this flow similarly. I took extra care to instruct the graphic design team to follow the same minimalistic design for banners.
SCORE: 1/1
9. Recognise, Diagnose, and Recover from Errors
As mentioned before, all error messages handled in this flow are the same as the main app. These messages have been used at multiple places already, and they convey the error to the user clearly without confusing them.
SCORE: 1/1
10. Help and Documentation
We provided a separate mobile site with documentation and other program details, which users could refer to understand better. Info buttons with tooltips and info popups also serve the same purpose, and in case of something more critical, users had an option to contact the PokerBaazi support.
SCORE: 1/1
Conclusion 🎯
FINAL SCORE: 9/10