Design Challenge: Leaderboards

In a recent UX interview I was given a design challenge, aka the new-normal for most design jobs. The ask?

Design a leaderboard experience including a television display and simple smartphone app to enroll.

Thats it. No specifics, no constraints, just “design a leaderboard”… 🤔

Framing the problem.

It helps to take a step back and ask 1) what’s the problem we’re trying to solve and 2) why are we solving it? To frame the design challenge, I made some assumptions came up with the following problem statement:

People enjoy healthy competition, and when it comes to exercise competition can provide extra motivation to achieve a goal and make the experience more fun.

In athletic competition, people may feel intimidated to compete against others above their physical level, especially in public. Similarly, high performers may not feel motivated competing against others below their level.

Challenge: Design a leaderboard experience that motivates users at various physical performance levels to exercise more and have fun.

My assumptions included:

Now, let’s design a leaderboard.

Research

I had 2 days to complete this challenge, so my research consisted mainly of scouring the internet to steal ideas (a.k.a. competitive analysis).

To start, I studied similar examples of leaderboards, such as ESPN’s March Madness Bracket and Peloton Cycle’s UI. Positive reinforcement in exercise apps is also common, so I referenced those examples as well.

Examples of leaderboards and positive reinforcement

To get a sense of who might use this product, I put together some quick proto-personas:

The purpose of the proto-personas was to remind myself that there would be users with a range of physical performance levels and goals using this product. I wanted to make sure the product would work for all audiences.

Design Principles

In my design process, I usually come up with a few principles to keep in mind:

Design Explorations

TV Display

I decided on a multi-column layout to optimize real-estate and ensure the user will always be able to see him or herself. Instead of having one leaderboard for the entire class, I created segments to even the playing field. I explored segmenting based on age, gender, etc., and landed on performance (i.e. distance, power, calories burned) being the best method.

Wireframe of TV Display

In this iteration, users would be split into two groups based on their performance. If the user is in the top half of performing riders, he or she would move into Heat 1. Users can move between Heat 1 and 2 throughout the class.

In the next iteration, I decided to add an third heat and rename the groups to Legends, Pros, and Athletes to add playfulness to the design and descriptiveness to the segments. I also removed the user image, since the user would be viewing the screen at a distance and the image would not add much value.

Finally, in my competitive analysis I found that spin classes sometimes take place in dark physical settings, so I explored a dark-scale version of the design.

App Designs

For the app, I wanted to make enrolling as simple as possible. In this first iteration, the first screen explains what the leaderboard is and why the user should enroll. The second screen collects the user data, and the third confirms enrollment and gets the user excited about the class.

In the case users are sensitive about sharing their total calories burned publicly, I wanted to make displaying that data point optional.

In this later iteration, I removed the height and gender fields, since height is not required to calculate calories burned and users may not want to identify by gender.

Retro

In a future iteration, I’d like to explore allowing users to select which group they would like to compete in.

I’d also like to:

Thank for reading!

Interaction designer @Google | Previously @Priceline.com and @UnitedAirlines