hero image with mockups

Beyond Leaderboards

Using the principles of gamification for a leading EdTech company
2 months
Discovery and Research
Wireframing and Visual Design

Mentored and supported by 2 UX designers

Project Overview

The pandemic has pushed EdTech to the forefront of 2020. Enter our client- an e-learning app used by 400,000 +  students. The client had asked us to design and develop the web and responsive mobile experience for the product to increase student motivation in an otherwise stressful activity - test taking. I worked creating an "achievement" section, focusing on the principles of gamification to improve the UX, engagement and overall learning experience on the app.

I divided the UX process in 3 phases-
• Research on the principles of gamification and how other e-learning competitors are using it
• Defining the features, components and use cases
• Designing the leaderboard
Our Client

The client is one of India's most popular exam preparation apps. Students can attend live classes, practice through assignments, take mock tests and understand their performance, amongst a variety of other features. The client was passionate about making learning effective, accessible and smooth to ensure that students would keep morale up and continue to learn and grow despite the pandemic.

The Problem

Test preparation is stressful enough. Add a pandemic and 8 hours of staring at a tiny screen to the mix and we've got our UX challenge. How might we design a delightful learning experience for students whilst keeping morale high? After discussions with the client, we proposed an "achievement" section which elements of gamification to make an otherwise pressured situation fun. I took charge of this section, and started the process by first understanding what gamification was, how I could use it, and how other learning platforms implemented it.

What is gamification?

Simply put, gamification is the application of gaming mechanics and principles to non-gaming context, like e-learning, to drive desirable behavior. KhanAcademy and DuoLingo have been pioneers of using gamification to make learning more fun and increase student motivation and engagement. Yu-Kai Chou, in his book Actionable Gamification - beyond points, badges and leaderboards, point out that "gamification is not a cookie cutter solution; it always relies on thoughtful design based on context and the profile of the players within your system.”


User's View Point
• To reward the user for their effort to learn and get better
Product View Point
• To encourage the user to perform better and to keep using the app
• To form a common metric across all the students and build features upon it
Business View Point
• Better user engagement, better the valuation of the product

How it works
In order to understand gamification, I delved deeper into the psychology of motivation and ask the question - what drives people? Chou breaks this down through his "Octalysis Framework"

1. Epic Meaning and Calling - when someone believes they were "chosen" to perform that specific task.
2. Development and Accomplishment - our intrinsic motivation to overcome hurdles and get closer to mastery. The feeling of being challenged and working to "earn" something is crucial.
3. Empowerment of Creativity and Feedback - when users start to learn the ropes of the system and can see their growth and progress. .
4. Ownership and Possession- users are engaged because they believe they are in charge.
5.Social Influence and Relatedness - sociological and psychological factors that influence motivation such as competition, acceptance and feedback. and even competition and envy.
6. Scarcity and Impatience - desiring something that seems unattainable
7. Unpredictability - engagement because users don't know what rewards are in store for them.
8. Loss Avoidance -motivation because one does not want to lose or fall behind.
A few gamification elements -
1. Point system - Points serve as indicators of achievement and progress. Points can reward users with status (if used to rank users against each other) or they can offer tangible rewards (for example, when converted to in-app currency or free items as part of a loyalty scheme).
2. Personalized user journey - Every action the user takes is personalized for them. There are unique goals and pathways that are specifically tailored for that user.
3. Badges - Badges primarily serve to recognize a user’s accomplishments. Badge systems in many apps and games also help align users to shared goals while acting as virtual status symbols, distinguishing badge-holders from others.
4. Streaks - Popularized by snapchat, and used by Duo Lingo, streaks drive up engagement and increase motivation to practice daily.
5. Rewards - Rewards are mostly found in e-commerce products for loyalty towards the product.
6. Leaderboards- Using the principles of social comparison, leaderboards allow users to see where they rank respective to other users.
khan academy and duolingo logo
Feature analysis
The EdTech space in India is growing fast, with many new players entering the field.

First, I researched what features each competitor had in terms of the achievement and performance module and compared it to our clients features.
competitor analysis chart
Achievements Deep Feature Analysis
Next, I researched which specific elements of gamification the top competitors were using.
deep feature analysis chart
Point system

Next we had to decide which game element we would use for our client, After consulting with the client, we decided to settle on a point system as well as a leaderboard, streaks and badges.

The "desirable actions" that the user takes (both from a business and user perspective) would result in points being rewarded. These points will accumulate and form the overall user ranking, which can be used as a base for other gamification elements like badges, streaks, and leaderboard. The client decided to start with these elements with plans to expand further in the next version.
Formulating the point system

We listed the primary desirable user actions that users should continue doing on a daily basis. In order of priority:

1. Take online tests
2. Learn online
3. Submit assignments
4. Ask questions on the platform

Terminology for points:
• Stars

user action item chart
The purpose of badges is to give intermittent rewards for their progress and performance. Yu-kai Chou argues that badges shouldn't be given out easily. Instead, they should be given at "major win-states" - when users actually feel proud about what they've accomplished. In most games, some items can only be obtained once the user has reached a difficult milestone, such as defeating a champion. Achievement signals must therefore be used carefully.
Categories and Levels
Each category will have its own set of badges with 3 levels.

Categories and badges -
1. Learn videos
• 120 minutes watched - Rookie badge
• 240 minutes watched - Learner badge
• 400 minutes watched - Agile badge

2. Practice
•Attempted 25 questions - Beginner badge
•Attempted 50 questions - Skilled badge
• Attempted 100 questions overall - Master badge

3. Test
• Taken 5 tests - Amateur badge
• Taken 10 tests - Geek badge
• Taken 20 tests - Scholar badge

4. Learning streak (visited the app)
• 2 days continuously - Steady badge
• 4 days continuously - Persistent badge
• 7 days continuously - Passionate badge

The students current streak as well as highest streak can be displayed. When they surpass a streak, a notification should be shown to celebrate this achievement.
explorations of badges
The purpose of the leaderboard is to enable students to view their progress and performance compared to other students. I once again turned to Yu-kai Chou's "Actionable Gamification" to understand how to design an effective leaderboard.

Use Cases

1) The student should be able to view their position amongst their peers = other users of their class + course
2) The student should be displayed in the middle of the leader board so they can see at least one student above them and below them.
3) The leaderboard can be refreshed every week/month, where every week/month the data would refresh and the leaderboard will start tracking progress anew;
4) We could suggest the implementation of micro-leaderboards, where only the students’ friends or very similar people are compared.
5) The student should be able to share their position on social media.
6) 10 rows in the leader board should be displayed - If the student is top 10 ranked point wise, they can only see top 10. If the student is not top 10, (say, rank is x, then they can see Rank 1 to Rank 5 rows and Rank x-2, Rank x-1, Rank x, Rank x+1 and Rank x+2 rows)
7) Lastly, the student should be able to filter the leaderboard by date (today, last week, last month)

leaderboard explorations
Achievement Section
Feature specifications -
• Should be accessible through the side nav as a separate page
• Total Points Card - in the header or in the side menu
• First time points earned popups
• Leaderboard
• Badges

There were 2 options for selecting and designing the UI -

1. Active interface - After every desirable action the student takes, a pop-up overlay shows the user has earned points for taking that action.

Would this get repetitive? Would the points lose their meaning and diminish the sense of accomplishment students feel after solving a tough problem?

2. Passive interface - The student won't know how many points they have earned after each action they take. Instead, they can see their progress in a separate section (perhaps the side nav where they can see their points beneath their profile icon) The points for these actions will get calculated in the background but not displayed to the students at every step.

Would this keep students motivated? Will they drop off when things get especially challenging because they can't see their hard work pay off?

Solution -
A mix of an active and passive interface. When a student first logs in and watches their first video/takes their first test etc., an active interface can be used to spark motivation, engagement and excitement. After the student has been onboarded, we can use a passive interface. "Level ups" in the form of badges should have an active interface, since these are important milestones for the student.

active versus passive interface
Visual elements
We iterated on how the badges, leaderboard and rank cards would look, and how they would be arranged on the screen all together.
rank card explorationsbadge explorefinal mockups
Benefits & future scope

Overall, gamification, if used effectively, can help boost user engagement and student motivation. Further elements can be used as the product develops and new features are added.

In the future, the client can consider implementing performance based points, customized learning paths with accompanying badges and direct material rewards for loyal users. or high achievers.