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:
- The activity is an 1-hour spin class
- There are participants of various demographics, experience levels, etc.
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.
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:
- Clarity. It should be clear where everyone stands, and the user should always be able to see themselves.
- Attainability. Users should feel like they can always improve and not feel like they’ll never catch up. Users should be compared to similar users at about the same level.
- Motivation. The leaderboard should endorse the right behavior, i.e. meeting goals and having fun. It shouldn’t endorse overexertion or discouragement.
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.
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:
- Refine the problem statement with data
- Conduct usability testing to validate the design
- Further define the Legends, Pros, and Athletes segments for the user
Thank for reading!
