Comp Leaderboard

A leaderboard for fitness competitions

Product name still pending...

Role

Product designer & developer

Tools

Figma, Bolt.new, Supabase, ChatGPT

Timeline

1 month

Outcome

A mobile-friendly leaderboard that can support hundreds of scores.

people skipping in a gym.

1. The Problem

We needed a way to keep score for our in-house competition.

The Context

I coach at a 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 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

We needed an internal "Shadow Leaderboard"—a free, low-stakes platform where every member could log scores, see their friends' results, and feel part of the event, regardless of their budget or skill level.

2. The Approach

I used an AI-first workflow to meet a tight timeline.

The "AI-First" Workflow

I skipped the research, discovery, and initial design phases entirely and moved straight to code using Bolt.new.

  • The bulk of the design work was done through iterations. AI designed work only looks good if you don't look to closely.
  • I acted as the Product Director, guiding the AI to handle most of the UI while I focused on the logic and the database structure.

Going Full Stack With Supabase

A leaderboard is useless without data. I integrated Supabase to manage the backend. Despite having no prior SQL experience, I used LLMs to help me architect the schema:

  • Users (Athletes) linked to Workouts.
  • Row-Level Security (ensuring users can only edit their own scores).‍
  • Real-time updates for the live leaderboard view.
homepage for leaderboard appsign in page for leaderboard appsubmit score page for leaderboard app
homepage for leaderboard appsign in page for leaderboard appsubmit score page for leaderboard appsubmit score page for leaderboard app

3. Testing

I gathered 10 athletes and set up a workout for us to do. Then I observed them inputting scores in real-time.

The Usability Gaps (and my fixes):

The "Heuristic" Fail: Users didn't know how to get back to the main page. I assumed the logo was a good enough"Home" button.

  • The Fix: I implemented a standard hamburger menu with explicit navigation labels.

The "Content Design" Fail: When a user tried to overwrite a score, the app threw a generic error: “Failed to submit.”

  • The Fix: I rewrote the error handling logic to provide specific guidance: “You already have a score. Please delete your previous entry to submit a new one.”

The "Responsive" Fail: On smaller iPhone screens, the keyboard overlapped the "Save" button in the profile editor.

  • The Fix: I manually adjusted the CSS breakpoints and padding—a detail the AI overlooked.

The "Builder Privilege" Fail: I had built the scoring system to automatically place me in first place no matter what I scored. My ungreatful users did not like this, saying things like "that's cheating," or "unfair".

  • The Fix: I corrected the scoring logic to be fair to everyone. It was up to me to beat them the old fashioned way.

4. Conclusion

The app successfully hosted our competition data, allowing members to engage with the event without the financial barrier.

The Takeaway

This project challenged my view of the "Design Process." In the past, this would have been a much longer undertaking. With AI tools and a "Maker" mindset, it took a fraction of the time.

  • It proved that Product Thinking > Pixel Pushing.
  • The value wasn't in the UI (which is standard); the value was in identifying the user need, managing the data structure, and shipping a working solution.

Next Steps

The CrossFit Open is coming up again. We are making a bigger push this year to get people to participate through the leaderboard.

‍

Next Project