For exercises that generate real-time performance data (e.g. distance, calories burned, repetitions), many fitness classes encourage friendly competition through a digital leaderboard visible to their students for the duration of a session. Design a two-screen experience including a large television display for the leaderboard and a simple smartphone app for agreeing to participate and choosing a public identity. Provide high-fidelity mocks for each of these screens.

Based on interview with someone that goes to spin classes, the majority of people are 25 -35 years old, young professional, roughly even split between male and female. For this exercise I specifically want to target more casual / beginner students that goes with friends.

Emily is a 25 years old young professional who wants to exercise more. She just joined a spin class at FlyWheel Fitness with her boyfriend. In the session, she saw that there is a big TV leaderboard that shows people’s real-time performance. She found that she can join the leaderboard via the FlyWheel phone app she already downloaded.

For the main screen

• User be able to see real-time performance data
• User feels encouraged engaging in friendly competition
• Screen is visible for user from a distance

For the app

• Simple and easy for user to join leaderboard
• User can quickly set public identity for the leaderboard
• User can leave the board anytime

I looked online for reference to similar experiences. I could not find established examples for classroom-based big-screen experience. However, there are many examples of virtual class experiences as this is gaining popularity. There are two types of popular existing examples, one is the screen is part of the actual exercise hardware (Peloton is most prominent example), and another is where user uses their smartphone to join and participate in virtual classes (example is CycleCast). I also looked at examples of existing leaderboards design as they often feature infographics.

Motivation through reflection: My strategy is to create an experience that motivates you to exercise through delightful visuals and infographics that brings a sense of energy into the design.

Light & Energy: I was looking to incorporate feeling of light and energy into the experience

Infographics: My goal is to get a balanced design for displaying information in simple and delightful ways

I explored several different directions before I chose one to flesh out in more detail. They include layout options for the main leaderboard view, and also different ways to select identity for the phone app.

• Overall shapes
  I used rounded shapes so the experience is more friendly and welcoming, suited for the target user.
• Color theme
  I used a dark color theme because I want to express the feeling of light and energy. I also think that the dark theme is less distracting for user to focus on workout.
• Leader section / status
  Top performer gets a highlighted section with more detailed infographic about user’s real-time performance over time, such as calories burned, heart rate, distance, etc. This acts as a reward to motivate other users so they too can be shown up here.
• Position arrow
  Shows user’s momentum in the leaderboard. This act as a mini-reward to motivate users as a group.
• Session remaining time indicator
  Shows time remaining for the class, and also displays motivational messages for the user. This can be either sent by instructor, or from in-box content.

• Color theme
  The phone app uses consistent color theme, and look & feel to the TV experience.
• Prominent Call-to-action button
• Identity creation
  Here user can quickly pick from in-box avatars, or they can import/take pictures. User can also customize their display name.
• Confirmation
  User is able to leave the leaderboard easily.