Part of the final result.
I chose to design a leaderboard for an outdoor running club. This club has a weekly group run, but the leaderboard can also include data from any independent runs by the members.
Inspire improved athletic performance and passion for all by encouraging friendly competition and group support.
Since the activity is outdoors, the TV-based leaderboard cannot give runners realtime data during their run. For this, they must rely on phones and wearables which must be easily read while running.
Although running with the full club is preferable, members with difficult schedules can also make up the runs whenever works best for them. For those who run alone, how can we best reproduce the feeling of friendly competition and support? How can ensure they stay on route?
I started looking at the effect of leaderboards by reading Gamification in Fitness Apps: How do Leaderboards Influence Exercise? and found:
This study shows that leaderboards are more effective when:
Insight 1: Social status is tied to performance.
Insight 2: Users see available avenues to improve.
Insight 3: Users have a positive attitude.
I also read https://www.quora.com/Gamification-What-leaderboard-design-motivates-players-the-most and gleaned the following:
Insight 4: Focusing on comparison with users at a similar level keeps the leaderboard more relevant for all.
Insight 5: Timeboxing comparisons can keep competition more consistently interesting.
Insight 6: Leaderboards can be more motivational if they focus on behaviors instead of results.
Excerpts from a graduate thesis by Dan Way:
“Males appear to be more ego driven and tend to compete with others: “I want to be the first guy [from the group] to finish. I want to be the one to chase”… Women on the other hand tend to set personal goals and are less concerned with competing against others: “It has nothing to do with others, or being patted on the back. It has to do with my competitiveness and my challenging myself and actually being quite successful and that’s important to me.”
“I can’t run as fast as some but can run faster than someone else, it’s all kinda relative that way.”
“I am also highly competitive with myself, the clock and others.”
Other documents:
https://www.behance.net/gallery/25660121/Ethnographic-Running-Research-Study-Report
Ethnographies in Sport and Exercise Research
Joan, 44
Regional director, parent
Reasons for running:
Reasons for joining club:
Greg, 27
Sales rep, single
Reasons for running:
Reasons for joining club:
Some of the most popular running apps.
As my research generated ideas, I quickly sketched or jotted them down shorthand style. Cleaner versions of these sketches below.
As running is an outdoor activity, phones and watches are the window to the full leaderboard and must also serve to motivate. Considering Insight 4 (focusing on comparison with users at a similar level keeps the leaderboard more relevant for all), can a screen with less – but more focused – data be a more effective motivator? What if we only compared with the closest runners ahead of and behind you?
With this goal of a super focused screen, unnecessary elements like user photos are left out. Icons are used instead of text labels when possible as they add less visual weight.
Based on how phones and watches are conventionally held, the top of the screen naturally corresponds with “ahead” and the bottom with “behind.” So this is where we place info about the user’s closest competitors. This screen is usually seen while users are running, so fields of shifting colors are the absolute fastest way to show competitive info at a glance in a way that backs up the numerical data.
If the user is in the regular group run, then the competitive data is pulled from other live runners. If the user is running off-schedule, then the data is pulled from other recent runs by the club, say over the past week (Insight 5). For users like Joan who only want to compete with themselves, the competitive data could be pulled from the user’s own previous runs on that route.
Unique audio and haptic cues occur when
Even though the club members generally won’t see the full board while running, they still need a place to see info for the whole club. This could appear on a widescreen TV or in any desktop browser window. The goal here isn’t fast comparison to just a couple similar runners, but rather finding other avenues or lenses to view the competition for further sources of motivation (Insights 2 and 6). The timeframe is more flexible and chance for interaction greater.
Even within a single club, there can be a huge range in runner speed. Even for highly competitive runners like Greg, a board that always has the same names at the top quickly becomes boring and forgotten.
Keeping Insight 5 in mind, the board has more potential to stay fresh if the default ranking is by change in performance – “Most improved pace % this week” for example. This lets runners of disparate levels compete through growth instead of raw ability.
Focusing on behavior can also be effective (Insight 6), but ranking the board by number of runs will lead to a lot of ties. Info on all of a member’s runs over the past week can still be surfaced in a relatively quiet visual fashion and give more context to the summarized numerical data.
The first pass...
Though users generally won’t see this screen during activity, the board entries should still have a visible “active” state for the benefit of users not currently running. In addition to basic live performance data, the active entries gain CTAs to both see the runner’s current location as well as to “cheer on” the runner with our goal of Group Support in mind.
The club should be a friendly environment, supportive even in the face of poor performance. Insight 1 (Leaderboards are more effective when social status is tied to performance) could be taken too seriously to the point of damaging morale. Still, rewards of real value that don’t undermine personal support could sharpen motivation. We propose that the runner in the #1 spot at the end of each week gets to select the route for the upcoming week.
Following the precedent set on mobile where the top of the screen corresponds to “ahead” and the bottom corresponds to “behind”, the leaderboard could be reorganized in more unique and memorable layout.
Next, I brought the leaderboard into visual design. As the more complex piece, it was my preferred starting point to figure out visual style for all the needed elements.
At this point, it felt quite generic and uninteresting, so I began searching online for some inspiration ideas for visual style. Here's a representative sample of what I liked for this particular project. More inviting and energetic and potentially appealing to a broad multi-gender audience:
This palette and a fair amount of typography work to create a stronger hierarchy focusing on the one piece of data used to organize the leaderboard. This aligns with our original goal of a leaderboard that can stay competitive and interesting for runners of all athletic abilities.
Now with an interim visual style, I created some of the focused mobile screens in the same style. The leftmost screen shows that a runner (live or ghost) is running closely behind you while you are more than a minute behind the next runner ahead of you. The middle screen has shifted colors showing the opposite scenario. Finally, the right screen shows how the app could give quick directions to keep runners on the route.
Finally, a simple sign up screen as part of the list of requested deliverables:
As a member of a group running club in real life, I would be very curious to see how the focused mobile view of the leaderboard in particular might affect my behavior or performance during the runs. Would it help? Would it create undue anxiety and ruin my pacing? Real world user testing would be a great next step here.
I must admit that I got involved in some of the tangential ideas related to the leaderboard and ended up spending probably closer to 15-20 hours on the exercise. This design is really limited by the amount of time available to spend on it. The most obvious next steps to continue to improve include: