Project

HOFr: Live Sports Prediction Platform

Role:

Lead Designer

Company:

HOFr (thoughtbot)

HOFr Live Sports Prediction Platform

HOFr's interactive sports prediction platform

Understanding the Challenge

Analyzing the sports engagement landscape

Understanding the Challenge

When the HOFr team first came to thoughtbot, they had a concept they'd been developing for two years. They were excited, passionate, and absolutely convinced they had the next big thing in sports gaming. There was just one problem - their solution wasn't really solving anyone's actual problems.

We ran a design sprint with them, and it quickly became clear that we needed to pivot. The existing fantasy sports landscape required way too much time and knowledge for casual fans. You either needed to be a stats nerd who understood player efficiency ratings or willing to manage a roster for an entire season. Neither option worked for most people who just enjoy watching games.

Meanwhile, HQ Trivia was blowing up with their live interactive mobile game format. Everyone was stopping what they were doing at 3pm to play along. It was a phenomenon. But nobody had translated that experience to sports.

Here's where things got interesting: the 2018 World Cup was starting in just eight weeks. We had a narrow window to develop something that could ride that global sports wave, but we'd need to move extraordinarily fast and be willing to throw out most of the client's original concept.

Identifying Core User Needs

Understanding user needs through rapid prototyping

Identifying Core User Needs

During our design sprint, we got creative with testing. We didn't have time to build even a basic app prototype, so we created something wild: a Google Sheets-based prototype delivered via video calls.

Yes, a spreadsheet. We'd share our screen showing a spreadsheet interface with users, and behind the scenes, our team members would manually update a linked spreadsheet to simulate the app responding to user choices. It was scrappy but brilliant for quick validation.

What we learned was genuinely surprising. People wanted:

Accessibility - Not everyone is a sports expert, and they didn't want to feel dumb for not knowing obscure stats.

Real-time engagement - They wanted something that enhanced watching the game, not distracted from it.

Social competition - Beating friends was more motivating than beating strangers.

Clear rewards - They needed to understand what they were playing for, even if it was just bragging rights.

Watching people get excited about making predictions on a spreadsheet gave the HOFr team the confidence to pivot from their original concept. Sometimes seeing real people engage with even the most basic version of an idea provides more clarity than months of discussion.

Project Constraints

Navigating tight timelines and technical complexity

Project Constraints

This project redefined my understanding of "time pressure." Eight weeks to design and launch a product is tight under normal circumstances. Eight weeks to design and launch a product for the World Cup - one of the biggest sporting events on the planet - that's another level entirely.

We couldn't build everything, so we had to make tough calls about what constituted a viable product. The live streaming component added serious technical complexity - we needed a custom game engine for presenters to manage the experience. Think about it: hosts needed to be able to control the flow of questions, see aggregate responses, and highlight interesting stats all while presenting a live show.

As a new platform, we also had to consider how to attract users in a space dominated by established fantasy sports apps. Our onboarding needed to be frictionless - nobody was going to spend 20 minutes setting up their profile for an unproven game.

And then there was retention. The World Cup would give us a natural user acquisition opportunity, but what would keep people coming back after it ended? The design needed to consider this longer horizon while still focusing on our immediate launch.

These constraints forced us to be ruthless about priorities. What absolutely had to be there for launch day, and what could wait for version 2.0?

Rapid Prototyping Approach

Innovative prototyping using spreadsheets

Rapid Prototyping Approach

Our spreadsheet prototype deserves a deeper explanation because it was so unorthodox yet so effective.

We set up a Google Sheets document with tabs representing different screens in the app. We'd share this view with testers via video call, telling them to imagine it was their phone screen. As they made selections, I would manually update cells in a separate "database" sheet that was linked to their view. This made it appear as though the app was responding to their choices.

For example, if they predicted France would score the next goal, I'd update the database to show their pick, update the scores for all users if they got it right, and change their rank on the leaderboard. All in real-time while moderating the test.

It was exhausting but incredibly insightful. We could test game mechanics without writing a single line of code. Does this scoring system make sense? Do people understand how to make predictions under time pressure? Are the leaderboards motivating?

Watching users get genuinely excited about a spreadsheet game was validating. One tester even asked when they could download it, not realizing they were looking at a glorified Excel document.

This approach saved us weeks of development time and gave us confidence in our direction before investing in actual production. It's a reminder that prototypes don't need to be sophisticated to be useful - they just need to test the right questions.

Core Interface Design

Designing for real-time engagement

Core Interface Design

Based on our prototype testing, I designed the experience around three key moments that every user would encounter.

First, the pre-game waiting room. This became crucial for teaching people how to play before the pressure was on. We used this time to explain the rules, show example questions, and build anticipation. It was like the lobby before a Zoom meeting starts, but actually useful and engaging.

The in-game experience was where the real magic happened. We designed it so users could make predictions about what would happen next in the sporting event. Will someone score in the next 5 minutes? Which team will get the next corner kick? We kept the interface ultra-simple because users would be splitting attention between our app and the actual game they were watching.

After each prediction round, we needed to show users how they did and where they stood compared to others. The post-game tracking and leaderboards became a critical part of the experience. People wanted to know not just if they were right, but how they performed relative to friends and the broader community.

The challenge was designing all this to work under time pressure, on small screens, possibly while users had been drinking (let's be honest about how people watch sports), and with enough clarity that new users could jump in without extensive tutorials. Every element needed to be instantly understandable.

Expanding Functionality

Building sophisticated features for engagement

Expanding Functionality

Once we had the core experience nailed down, we started layering in more sophisticated features.

The scoring system was particularly tricky. We needed to reward correct predictions, obviously, but we wanted to give extra points for bold picks. If 95% of users predict Brazil will beat Costa Rica, you shouldn't get many points for joining the majority. But if you correctly predict an upset, you should be rewarded handsomely. Creating this balanced scoring system that felt fair while encouraging risk-taking took several iterations.

Social features became our acquisition strategy. By connecting with Facebook, users could see how they ranked against friends specifically, not just the global leaderboard. This created natural virality as people dragged friends in to compete.

The host tools were a fascinating design challenge. The people running the live show needed a completely different interface that gave them control over the game while providing insights about user behavior. This was essentially a separate product designed for a handful of power users who controlled the experience for everyone else.

While the World Cup was our immediate focus, we designed with multi-sport expansion in mind. We needed a framework flexible enough to handle soccer, basketball, football, baseball - each with their own unique events and prediction types. This informed many of our architectural decisions even in the initial release.

Launch and Impact

Successful launch during the 2018 World Cup

Launch and Impact

Against all odds, we hit our deadline. HOFr launched just before the 2018 World Cup kicked off, and the response exceeded our expectations.

Within days, tens of thousands of players worldwide were engaging with the platform daily during the tournament. The accessible format resonated especially well with casual fans - exactly the audience we'd been targeting. People who'd never consider traditional fantasy sports were making predictions and having fun without needing to know the xG stats of every forward in the tournament.

The real validation came when users started coming back day after day for different matches. This wasn't just novelty interest; people were making the app part of their World Cup routine.

Following that initial success, the platform expanded beyond soccer into multiple sports leagues including NFL, NBA, NHL, and MLB. Each sport brought its own prediction types and user preferences, but the core mechanics we designed proved flexible enough to adapt.

Over time, the team added more features: trivia components for testing sports knowledge, improved prize mechanics beyond just leaderboard status, and enhanced social features for competing with friends. The platform evolved well beyond our initial MVP while maintaining the core experience we designed during those intense eight weeks.

Outcomes and Lessons

Key learnings and project success

Outcomes and Lessons

Looking back on the HOFr project, a few key lessons stand out that I've carried into other work.

First, never underestimate the power of crude prototypes. Our spreadsheet approach would make most product teams laugh, but it gave us actionable insights faster and cheaper than building even a basic app prototype. Sometimes the right testing tool isn't the most sophisticated one - it's whatever gets you answers to your critical questions fastest.

Second, designing for casual fans opened up a much larger market. The sports engagement space is saturated with products for hardcore fans who understand every statistic and rule nuance. By making accessibility a priority, we reached people who enjoy sports but get intimidated by traditional fantasy games.

The balance between live components and asynchronous features proved crucial for different engagement styles. Some users wanted the excitement of playing along live, while others preferred to make predictions and check results on their own schedule. Supporting both created a more flexible experience.

Finally, the tight timeline reinforced something I already believed: ruthless prioritization is essential when facing hard deadlines. We could have spent months perfecting features that weren't critical for launch. Instead, we focused on nailing the core experience and getting real user feedback as quickly as possible.

The success of HOFr showed that even with extreme time pressure and a needed pivot from the client's original vision, a user-centered design process can produce something genuinely engaging. By starting with user needs rather than predefined solutions, we created a product that found its audience despite entering a crowded market. And we did it all in eight weeks with a spreadsheet prototype - a reminder that sometimes the best design solutions emerge from the strangest circumstances.