Khelgully -Designing an Engaging Experience to Drive Quiz -UI/UX Case Study!

In this article, I will discuss one of my favorite projects I have worked on.

Quizzes are popular games or tests that challenge a person’s knowledge on a particular topic. They can be designed to be educational, entertaining, or both. From playful Buzzfeed quizzes to more serious ones, quizzes have become ubiquitous in our lives. They can be used for various purposes, such as educating, entertaining, or both. Additionally, quizzes can be fun and interactive to increase engagement and drive traffic.

But quizzes are more than just a fun distraction; they can be a potent tool for businesses and organizations to engage their audiences, drive traffic, generate leads, or even conduct market research. In this case study, we’ll explore how I designed a “quiz program” that not only captured the attention of our target audience but also drove meaningful engagement and delivered valuable insights.

About the project

A quiz is a new feature introduced to the Khelgully app. It’s considered one of the star features. I was the sole designer who owned this project and worked on it from start to finish. But I did collaborate with other people for this project.

About the company

Khelgully is an online gaming platform that organizes tournaments of various games like Free-Fire Max, Pubg New State, BGMI, Ludo, etc. It is making gaming more accessible and enjoyable for everyone.

The current mobile application has more than a million downloads.

Objectives and project requirements

1. Create an engaging quiz experience that drives excitement and challenges users.
2. Foster familiarity and confidence in answering most quiz questions.
3. Design the quiz to be perceived as easy to participate in and provide a time-based gaming experience.
4. Encourage users to maximize their quiz scores through multiple attempts, driving multiple daily sessions.
5. Offer users unlimited chances to improve their performance.
6. Ensure users feel rewarded for their time spent on the engagement quiz.
7. Motivate users to come back and play the quiz again the next day.

Success metrics

1. Increasing D1 retention
2. Increasing average session time

At first, I conducted research on quizzes to gain knowledge about the different types and levels of difficulty. I then tested several quiz applications to improve my understanding of their functionality. As the competing apps lacked a quiz feature, I examined other apps that included quizzes as one of their features.

Final Visuals

(I will begin with the final screens and then show the iterations to better explain the various elements.)

Quiz page

Let me explain my thought process behind the design:

1. Banners: The banners give information about the ongoing prize pool and quiz feature.

2. How to play: For users who are new to the app or playing a quiz for the first time, the “how to play” section will provide a brief explanation of the quiz feature.(I’ll be adding this screen in the next section.)

Why Leaderboard? Users can keep track of the top score, as well as each player’s score and rank, as the quiz winners will receive their rewards after a week.

Prize pool: Users can find the rank list and prize information here.

The prize pool, leaderboard, and instructions on how to play should be prominently displayed and easily accessible. Therefore, they are located in the top section. The prize pool, leaderboard and how to play should be easily visible and accessible; hence, they are in the top section

3. Ticket: The quiz has an entry fee. When the user spends Rs. 5 and buys the ticket for the quiz, he can enjoy unlimited attempts. Why show it as a ticket instead of a small buy now CTA?
When you carefully look into the ticket, you can find the prize pool, the ticket’s validity, and the total number of winners getting the rewards. So the user journey is To participate in the quiz, users must pay an entry fee of Rs.5 to purchase a ticket. This ticket allows for unlimited attempts at the quiz. Rather than a simple buy now button, the ticket format provides additional information such as the prize pool, validity, and number of reward winners. This gives the user a more comprehensive and engaging experience and creates a journey similar to purchasing a ticket.

4. Practice questions: When the word “quiz” comes to mind, you may immediately think of challenging questions like those on KBC (just kidding). Before attempting the quiz, you may assume that the questions will be difficult. To convince users that the questions are actually easy, I have included a section with three sample questions that are very similar to the quiz questions. Users will receive feedback on the answers they select. Once they have completed the three sample questions, what comes next? (Will get back to this question too in next section.)

5. Why play a quiz? You might have questioned why one should play a quiz. This question will be answered in this section, highlighting the advantages of engaging in quiz activities.

Let’s see what happens when users click on how to play, leaderboard and prize pool

1. In the “How to Play” section, users can learn how to play the quiz. They will find a “Play Now” button. By clicking on this button, they will either be taken to the ticket purchasing process or the quiz will start.
2. On the leaderboard, users can view their own rank as well as the ranks of other players. If a user has never played the quiz before, they will see a CTA prompting them to join the leaderboard. The leaderboard should showcase the user’s highest score to encourage them to try and achieve a new high score.
3. The prize pool contains information on the specific ranks and their corresponding amounts

1. We have added a timer that shows when the quiz will end. This creates a sense of urgency for users, making them afraid of missing out on the rewards. As a result, it encourages them to participate in the quiz.
2. Let’s say a user has purchased a ticket but hasn’t played the quiz yet. To solve this, I have included a “play now” call-to-action button. Additionally, a visual indication has been included to confirm the successful purchase of the ticket.
3. After playing the quiz, users will be able to view their overall score and their best score. Because they have unlimited attempts within a week, a “play again” call-to-action will encourage them to try again and achieve their highest score.

1. As the quiz has a 10-second timer for each question, it would be helpful to have a visual cue or alarm clock moving backward to emphasize the importance of time during the quiz.
2. Each question has two options, and if a user selects the wrong answer, they will receive feedback indicating the correct answer.
3. After each answer, the scores are displayed visibly. To enhance the experience, we have included a rocket that moves from left to right whenever the user earns a point.

The fastest fingers first mean the user must answer questions rapidly in order to earn more points. The score is determined by both the accuracy of the answer and the speed at which it is given.

What’s next after attempting 10 questions?

1. On the score page, users can view their current score, as well as their best score and overall high score. If they wish to beat the high score, they can play the quiz again. Additionally, they have the option to access the leaderboard or share the quizzes with their friends.
2. We have three different scenarios to consider: when the user scores lower than the highest score, when the user scores the highest score out of all attempts, and when the user breaks a new record. I have created separate pages for each scenario to showcase their achievements in a unique way.

Once the user clicks on “buy ticket,” they will be directed to the payment page. If the user has enough funds in their Khelgully wallet, they will see a payment success screen. After 3 seconds, the quiz will automatically start. However, users have the option to either play or close the quiz.

There will be a three-second gap before the quiz begins and an additional three-second gap for proceeding to the subsequent question.(Please note that when users click on an answer, there will be a 3 second buffer time before the next question is loaded.)

Iterations after user feedback

1. Previously, users were allowed unlimited attempts and a week to claim rewards for the weekly quiz. However, due to user demand for a daily quiz and the ability to claim rewards on a daily basis, the weekly quiz has been transformed into a daily quiz with a limited number of attempts
2. Designed a new question format for alphanumeric answers to avoid bot traffic

Observation

• Immediate uptick in D1 retention (from 45% to 60%)
• 20% uptick in average session time per user

Challenges and learning

1. Repetitive winners in daily quizzes
2. Regular content development for questions
3. Bot detection and avoiding fraud traffic

Thanks for reading!♥️

Thank you for reading until the end. If you found this case study enjoyable, please show your support by dropping a few claps.

P.S. I am currently seeking opportunities as a Product Designer. If you believe that I could contribute to your team and organization, or if you have any feedback regarding my work, please do not hesitate to contact me through LinkedIn.

Don’t forget to check my other case studies on shreyar.webflow.io