On our way to WIN — A Gamification UI UX Case Study 👾🎮

In this case study, I give a walkthrough of my gamification project at CRED.

This was my first project when I recently joined CRED. It started as a project that would be featuring as a reward card in our lifestyle section. Later, its scope increased to be a part of our upcoming section, CRED WIN 🥳

Tap/Click to view the Dribbble Shot

Some context about CRED

CRED is a member-only app that focuses on creating experiences. It promotes good behavior by rewarding members who pay their credit card bills.

My project was a part of creating these experiences.

Lifestyle flow

The app has two kinds of currencies, coins and gems. Members earn coins equal to the amount paid on CRED and can collect gems by successfully referring a friend to be a member. Members can spend these currencies for various goodies on the app. Currently, the Lifestyle section is a part of the app which displays a feed of exclusive rewards for CRED members where there is a good curation of rewards to choose from.

Now that the basics are clear, let’s move to the main part of this case study.

How did it start?

Before this project, our team had built a Snake game for the CRED app’s offline screen. This was also featured in our lifestyle section as a reward. It was a Proof of Concept (POC) experiment to measure members’ engagement with games on the app.

Snake game — Proof of Concept

Members would land on the reward card in the lifestyle section and spend the required number of coins to enter the game. They could play as many times till the game was live. The member with the highest score would win a prize.

This game was live for around 4.5 hrs and the results were as follows:

POC experiment results

This led to the conclusion that the games were an efficient way to engage members and coin spend. Hence this project begins!

Design Process

I did this project in 2 parts:

1. Games + Heads Up Display (HUD)
2. Multi Use-Case Leaderboard framework

1. Games + HUD

Objective

The aim was to increase engagement, measured in coin spend instances. This is being done by introducing game formats which would be a means to a reward.

Games on CRED would be an escape for players to compete to win rewards. They would keep playing since it is fun and would remind them of simpler times 😌

Types of Games

We decided to create skill-based games to engage and motivate players to improve their skills.

Intrinsic motivation would play a key role in this– the kind of motivation that comes from within us like curiosity, pride, or a sense of achievement.

The skill-based games would start with an arcade theme since it provided a nostalgic vibe and experience. The kinds of game that we could create were:

• Retro games like Galaga, Brick Breaker, Snake, Tetris.
• Quiz based games
• Thematic games by adding topical themes like Christmas, etc.

Title logo for all games

Game Mechanics

The game mechanics would be as follows:

1. Players would have to spend coins on CRED to enter the game.
2. Once in the game, certain events would trigger for stimulating extra coin spend. An example of this event would be when the player runs out of lives.
3. The game would have its own Heads Up Display (HUD) where players could see vital information. Information such as their current score, high score, lives remaining, time left, etc.
4. The prize would be the outcome of the games. The winners would be selected on the basis of particular criteria. The criteria would vary from crossing a particular score that is set as the bar or being the highest scorer.

Game Components and Visual Design

The primary components of every game were:

• Main controllable character
• Obstacles
• Score
• Theme
• Variable incrementing and/or decrementing score during gameplay
• Story or a Narrative

To maintain fair gameplay, the dimensions of the game would have to be the same for all devices, hence we maintained a ratio of 3:5 (width:height).

Gameplay and components for flappy plane

Gameplay and components for Rescuer Red (L) and Bill Breaker (R)

Games with Heads Up Display (HUD)

2. Multi Use-Case Leaderboard Framework

Objective

The aim was to create a framework that could be used for games and other constructs. This would instigate competitive behavior. Real-time visibility and social proofing would add as an intangible reward to improve engagement.

The players would also get to see real-time rankings and scores of themselves and that of the top competitors.

The leaderboard would be acting as a means to bring extrinsic motivation. It is the kind of motivation that comes from outside us like money, grades, or praises. The players would feel this when comparing themselves with others.

Leaderboard states

User flow

Players could go to the leaderboard from the Game HUD and other access points across the app. The players would also redirect back to the same point from which the leaderboard is accessed.

Games and Leaderboard flow

Use Cases

We came across multiple use cases when integrating the leaderboard with the games. These would be solved by displaying the following bottom sheets.

Bottom sheet states

The use cases were as follows:

1. The player does not have enough coins to continue playing and enters the game or leaderboard.
2. When the game is over and the player wants to go to the leaderboard to see the results — show a Call to Action button (CTA) for the results that would load the outcome bottom sheet. For the winner — it would lead to the reward, and for the losers — it would direct to the lifestyle section.
3. The player is playing and the game time ends — the game would end and an outcome bottom sheet would be displayed. A fetching score bottom sheet would be displayed in case of any delay in determining the outcome.
4. A player is on the leaderboard and game time ends — a “times up” visual change would take place on the live counter card.
5. If the player dismissed the outcome bottom sheet, they would be directed to the lifestyle section.
6. For a player who has not participated and goes to the leaderboard — they would see a CTA to spend coins.
7. The player is playing and the minimizes the app, shuts game UI, or goes to leaderboard midway — the game would pause. On returning to the game, if game time has not ended it would restart from the same place.

Copper Synth — Neumorphism

Recently we had also changed our design framework for the CRED app. Introducing the new Copper Synth framework with a Neumorphism theme, I updated the existing screens of this project as well 😋

Leaderboard and Bottom sheet states — Neo

Learnings and Takeaways

1. When the first skill game was being released, we expected an increase in engagement as compared to the experiment.

What didn’t go well?

There was a significant drop off where members who saw the game reward card did not click the CTA to enter the game.

1st skill game – less engagement

This was due to 2 primary reasons:

1. The reward cards creative didn’t make it clear that it was a game. (unlike the reward card for the snake game POC where only the snake was being showcased, and not the prize)
2. The prize had been on the app as a normal reward for some time and so it did not seem to be something exciting and new.

We rectified this by giving the reward cards a higher affordance of it being a game.

Reward card at first launch VS after the relaunch

After making the required changes and relaunching the game, we had the following improvements:

Improved results 🔥

2. During our testing phase, the gameplay speed varied for different devices. The game seemed to be running faster for some devices as compared to the other and the battery loss was high as well. This would lead to unfair competition.

The reason for this is the asynchronous behavior between the frame rate of the game and the refresh rate of the latest phones (OnePlus, Samsung phones have higher refresh rates of 90–120Hz).

This is solved by running the games at the same frame rate as that of the refresh rates of the phones, i.e, 60fps game on a phone with a 60 Hz refresh rate. You can read more about this here.

Conclusion

This was a great first project for me at CRED and I feel I couldn’t have gotten anything better. It was a great learning experience as I learned the following:

• Concepts, Design thinking and implementation of Gamification.
• Prototyping using Principle.
• I got to be a part of revamping the entire Fabrik design framework to Copper Synth — Neumorphism.

Thanks to all the members of the design team, the developers and my Product Manager. 😄

If you have any questions feel free to contact me, I would love to talk to you!

Did you know

You can give up to 50 Claps for an article? Click/Tap and hold the clap button for a few seconds and BAM! Try it out 😋

Social Media Handles

Instagram | Twitter | LinkedIn | Dribbble