Flywheel Fitness
Leaderboard & App Design
DESIGN BRIEF

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.

DESIGN Process
Target audience

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.

SCENARIO

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.

USER GOALS & REQUIREMENTS

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
RESEARCH

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.

DESIGN STRATEGY

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.

Mood Board

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

SKETCHES

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.

DESIGN PROPOSAL
Large television display for leaderboard
  • 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.
Phone app to join leaderboard and select identity
  • 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.
Grid and alignments
Color and typography
On-device mockup