Increasing player engagement is crucial that every gaming company wants to improve. PokerBaazi, too, strives to achieve high player engagement. So, the mission I had set for myself was to create a gamified, immersive experience for users in leaderboards that engages them in the game and encourages them to chase a goal by playing more Poker. Let's find out how we managed to re-imagine the desktop experience for leaderboards and improve upon what the mobile app offered already.
What was the challenge?
Create an adequate leaderboard flow for PokerBaazi players.
Increase player engagement by making it easier to track progress through leaderboards.
As most pro players play on desktop, we needed a comparable and more efficient flow for the desktop app.
What was happening in the market?
Almost every gaming app incorporates leaderboards in some form or the other. We sought to find the best examples and build our version.
In terms of Poker, our most significant source of inspiration was WSOP leaderboards which have the list of players performing well in live poker tournaments.
However, poker apps like PokerUp, PPPoker managed to gamify the leaderboards for poker players online and see a significant rise in engagement and retention rates.
When we looked past Poker to some casual games, we found leaderboards in every multiplayer video game where a player competes with others globally.
Leaderboards even help create a social connection among players and develop game level relationships and connections with their best opponents.
Targeted user story 🤔
As a seasoned poker player, I want to track my leaderboard winnings, so that I can maintain a high rank and win more leaderboard promotions.
Journey of a Leader 🚗
PokerBaazi provides multiple cash game types and promotions. So, the challenge was to create a scalable, reusable template or module for leaderboards that can be modified and fitted in any context whatsoever.
There are various points in a user's journey where quick access to leaderboards or the relevancy of leaderboards increases drastically. The starting point of solving this problem was identifying possible user journeys in the PokerBaazi app and then defining an intuitive structure that doesn't feel unnatural to end-users.
Refer to Fig. 3. for the aspirational journey map that I wanted to achieve.
Refer to Fig. 4. for the feature prioritisation.
Home screen
We realised that the home screen of the PokerBaazi app would serve as the most crucial ingress point for a new user who has no idea what this platform offers. So, to make it accessible and assist its discovery, we chose two positions for the leaderboard ingress. One is the big interactive card falling in the natural thumb position for both left and right-hand users.
This card has a big inviting banner with relevant copy that motivates users and informs them about the Leaderboard offered in the PokerBaazi app. We incorporated the learnings from Fitt's Law in this particular solution. The size of this banner and the proximity of similar buttons ensured that we got enough conversions on this.
While Users are on the home screen itself, we provide another ingress point to the Leaderboard in the form of small tabs on top of the screen, which fall in the usual content flow direction.
Refer to Fig. 5. below.
Game table
While the home screen is a great entry point and helps new users to discover leaderboards, we realised that pro players playing actively on the game table also needed some different ingress points to check their standing in leaderboards. So, we added another entry point in the form of an icon on the game table itself, which would help pro players playing on the table keep an eye on the Leaderboard they are chasing.
Refer to Fig. 6. below.
This or That? 🤷
After deciding the significant screens in the user flows, we invested some time to figure out one of the primary screens in Leaderboard flow for any user. Enter the Leaderboard winnings screen! Which would show the summary of each user's leaderboards winnings until now.
We thought this screen would be significant (apart from the actual leaderboard ranking screen) because it would motivate the users and give them a sense of achievement by showing their collective winnings in leaderboards they had participated in the PokerBaazi app. So, there were two different approaches in offering information which I am discussing here.
Daily Monthly Weekly in the same card as individual winnings info
If we refer to the figure, we can see the first approach was to put all three data points along with the respective Leaderboard winnings. However, we quickly realised that it gave a sense that these data points belonged to the separate Leaderboards, whereas we intended it to be the data point related to the overall winning shown just on top.
Daily Monthly Weekly outside the individual winnings info card
This approach felt more intuitive as it didn't include the data points in the same card instead grouped them with the overall winnings. Keeping them nearby could achieve what we originally intended, which shows that the data points connect to the overall winnings. This approach is a clear example of using Gestalt's Law of Proximity, where elements placed close to each other can be perceived as one unit.
Refer to Fig. 7. below.
Oh! the Top, Desktop 🖥
Although most users are on a mobile platform, pro players on PokerBaazi mostly play high stakes games on desktop/laptop. So, it was pretty evident that I had to actively think about catering for them and develop an equivalent solution for the desktop.
One significant difference that I realised early on while designing the solution for a desktop was that information has to be structured differently for widescreen devices like a laptop or a desktop. Enter the master-detail flow!
I managed to achieve this pretty simply by dividing the screen into two halves and using one as the primary selection section and the other as the reactive section that changes info based on user selection, effectively creating the master-detail sort of flow.
Refer to Fig. 8. below.
This or That? (yet again) 💁♂️
One major decision that required an A/B test for desktop design was showing the ranking screen embedded in the main window itself or creating it in a new window. Here I discuss both approaches and why we preferred one over the other.
Embedding User Ranking in the same window in the detail section
My first approach was to embed the user ranking for easy access in the detail view. However, for this to happen, the user would lose access to the list of all leaderboards and have to shift back or navigate back to the other state/list.
Opening a new window for showing ranks
The second approach I tried was to open a new window and show the ranks there. This approach means users would have an extra window on the screen, but they can easily keep other leaderboards in view.
However, we realised a significant flaw in player experience with this approach. When pro players play, they have multiple tables open, and each table opens up as a separate window. So, opening one more window to show ranking didn't feel necessary, and it also added an extra window that players would have to cycle through if they watched to switch tables.
So, considering all these factors, I decided to go with the other approach where the ranking screen would work embedded in the same window.
Refer to Fig. 9. below.
Refer to Fig. 2. on top for a better understanding of flow, if you skipped the line!
For the Leaders 🏆
Finally, it was time to celebrate a big win.
This journey finally ends when a user wins the Leaderboard. So, we wanted to reward that achievement by showing an incredible, interactive pop-up that would first congratulate the user and even help them withdraw their winnings. The idea was to give them a strong sense of achievement for defeating all other players participating in that Leaderboard on the PokerBaazi app.
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 provide a good user experience to the players participating in Leaderboards.
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
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. However, system status has been taken care of in the Leaderboard listing screen where the information of Leaderboard start time or different stage is visible in design. For, e.g. the system tells the users that a particular leaderboard ends in X hours or starts in X minutes and users can then further create informed decisions.
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 can find hints of this scattered across all screens in the flow. However, one particular example is the Lottie animation of money sliding in and out of the wallet in the Leaderboard winnings screen. The idea here was to help users understand through visuals that money is going in their online wallet for winning in a particular leaderboard.
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. Users are not bound to click or start playing on any leaderboard, and they have complete control over every step and can choose which Leaderboard they want to chase.
SCORE: 1/1
4. Consistency and Standards
Call to Actions and fonts are used per design guidelines to keep users' familiarity with the overall app intact. Even the bottom sheet showing the Leaderboard winning ledger maintains platform standards, whether the interaction or the corner radius of the sheet.
SCORE: 1/1
5. Error Prevention
As this module is a part of the overall app, usual error preventions incorporated in the app also safeguard it, including being accessible in case of no 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. A significant example of this will be the icon used to denote leaderboards across the app. Using the same icon on the game table also ensures that users are never forced to think about it and can easily recall the entry point to the leaderboards rank and winnings screen.
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.
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. We have put extra effort to ensure that the content used in text placeholders, heading and Call to Actions is very precise and completely relevant. There is no additional information that doesn't go with the flow. To make the UI elements used in this particular module a little more aesthetic, we even explored different colour and gradient options for highlighting most import UI cards and Call to Actions. Also, there is minimal use of borders throughout the app. Elements grouped smartly create virtual boundaries that make the whole design minimal and clean.
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
An essential part of this flow is the help provided to new users who do not understand Poker leaderboards in general. At the start of the flow, we redirect them to another explanatory site that explains how leaderboards work on PokerBaazi. Every screen further has info buttons that show tips and other detailed descriptions explaining various aspects of the user interface.
SCORE: 1/1
Conclusion 🎯
FINAL SCORE: 10/10