Building a Leaderboard For a Fitness Competition

Product Design & Development

The Problem

I work at a Cross-training gym called Academy Of Lions. Every year many of us compete in the CrossFit Open.

In the CrossFit Open, participants pay a fee to sign sign up and compete in a worldwide fitness competition.

Many of our members don't want to pay the fee to sign up for the Open—but still want to have fun and compete against each other.

The Solution

Build a leaderboard for our members to compete against each other.
A collection of banking logos. Scotiabank, RBC, Nationwide, HSBC, National Bank Of Canada, Bank Of America, US Bank, Wells Fargo, CIBC, MT Bank, BMO, Peoples United Bank.

Approach

Bolt.new is a prompt based AI development tool created to quickly build and publish web apps. It uses a design system—so anything I prompt it to build looks pretty decent right off the bat.

I discovered Bolt.new and used it to build a live, functioning gym leaderboard—it only took about an hour to get the basic features up and running. However, Bolt.new doesn’t do everything, so I integrated Supabase to handle the backend.

I’d never worked with databases before, but between Supabase’s documentation and a bit of help from ChatGPT, I was able to set up a system to store and manage data.

The Outcome

I began by booking an appointment with a M&T representative through the mobile website, It is easier to teach something if you have done it yourself. I also gathered screen shots along the way of essential steps.

At Horizn, we use an internal tool called the SBT (Simulator Builder Tool) to build the demos. I threw all my screenshots into the SBT and began writing.

sign in page for leaderboard app
Login
homepage for leaderboard app
Homepage / leaderboard
Homepage / leaderboard with menu expanded
submit score page for leaderboard app
Submit score page
profile page for leaderboard app
Profile page
profile page for leaderboard app displaying a lift ratio calculator
Profile Feature: lift ratio analysis

Testing

I brought together a group of athlete participants one Sunday in December 2024 to complete three workouts I had added to the leaderboard. After the session, they tested the app and provided feedback.

Key Issues Identified

I also ran a quick walkthrough with two additional participants, and one of them found it unclear how to return to the homepage. I had assumed the logo was an obvious navigation cue, which proved not to be the case.

‍

Improvements Implemented

  1. Clear Error Messaging: Revised the generic “Failed to submit score” message to a more explicit prompt guiding users to delete their old score first.
  2. Breakpoint Fix: Resolved the mobile display issue so the save button remains visible during profile edits.
  3. Enhanced Navigation: Added a menu with a dedicated “Home” button, ensuring users can easily return to the homepage.

Conclusion

Not as many people opted to compete in the CrossFit Open this year (officially or unofficially), but I had enough athletes sign up and use the leaderboard for me to consider it a success.
‍
I didn’t follow a traditional design process while building this solution—it was initially sparked by another coach’s comment that a leaderboard would be cool, and I decided to see if it could be done quickly.

This experience makes me question the future of design processes. Typically, product development demands lots of time and resources, so the current design methodology was needed to ensure we built the right thing. But now, using platforms like Bolt.new and Supabase, I can prototype and test ideas fast—faster than a typical design cycle might allow.

Next Project