Leaderboard Design for a DAU Spike of 1000%
One day the website had 500 users (from 20-30 average) and that highlighted what the existing leaderboard was missing.
Everyday I check my backend analytics, to see how many visitors we have, page views and bounce rates. One fine day I opened the dashboard and saw a spike of around 500 active users. That should have felt great but for the reveal of how disastrous my leaderboard setup was.
What the leaderboard used to be
The original leaderboard was a simple list by rank.
- Seven people per page, ranked top to bottom.
- Every player got a random detective name stitched from two arrays.
- Fine at 20–30 players, disaster at 500 players.
You had to scroll through 50+ pages, clicking right and left, to see where you stood on the leaderboard. Nobody was going to do that since it was adding zero value to your life.
What people want from a leaderboard
I stopped and asked myself what someone genuinely wants from a leaderboard. In my understanding its three basic questions:
- How do I stack up against everyone else?
- How did I do compared to myself?
- How fast was I versus other detectives?
I rebuilt the whole thing to answer those three questions. The centerpiece is now a bar chart which has five bars, one for each clue count, with the height of each bar showing how many detectives solved it in that many clues. Your own group is highlighted in green. In one glance you can see the shape of the whole group of people who attempted it and where you rank.
No more endless scrolling
Underneath the chart I show a small spotlight of rows instead of every player. If you're in a clue group, you see the fastest solver, the person just above you, you, the person just below you, and the slowest. This way you always have knowledge of where you sit in the overall distribution.
Leaderboard learning
It's difficult to know how to design for scale until you reach that scale. That's how features are constantly updating. The look and feel of websites is constantly changing because you can't and shouldn't start off with 100 features for 10 users. Growth is a good stress tester for your product and your design, and you should be ready to rethink and rebuild when the time comes.
Play today's ClueDay to see Leaderboard — Play the game and show up on the Leaderboard.