One Score

Every Surface

(Info)
Client
Major League Pickleball
Category
UI & UX
/
Web Application
Major League Pickleball platform hero showing the live league site across devices

Major League Pickleball was a new professional sports league building the digital foundation for team-based pickleball from the ground up. I helped turn an early marketing site into live sports infrastructure where scores, standings, brackets, rosters, schedules, and event content could operate from one connected system.

3

Seasons

2

Drafts

24

Teams

96

Players

Role

Product Designer / Systems Architect

Focus

Platform Architecture / Live Sports

Scope

Design / Build / Validate

Outcome

Live League Infrastructure

MLP homepage during a live event with scores and featured matches

The live league surface during a match weekend, rendered from connected data.

A Sport Moving at Speed

Major League Pickleball was moving from startup league to national broadcast and streaming visibility, but its digital foundation was still built more like a marketing site than a live sports platform. The league needed infrastructure that matched the pace of the sport, where one score update could ripple through standings, brackets, team records, player profiles, event pages, and live event surfaces without manual cleanup behind the scenes.

Live match surface showing team scores updating from connected data
Event page with schedule and standings rendered from the relational model

Faulting at the Baseline

The initial launch held externally, but internally it was a controlled emergency. The platform had no relational data model. Scores lived as static text fields. Players, teams, media, and events lived as parallel collections with no awareness of each other. When the league went live, operational staff had to patch scores, player profiles, brackets, and roster changes at the same time, in multiple places. Supporting that first broadcast meant staying up nearly three days to manually override failures as they happened.

Season 1: scores and records patched by hand across disconnected collections.

The Pieces Existed. The System Didn't.

A single score change required six manual updates, team record, player record, schedule, bracket, standings, and rankings, each edited by hand under broadcast pressure. Miss one, and the public site contradicted itself within minutes. Scores were just the most visible version of the problem. Every relationship on the site was a hand-typed string where a database query should have been, so the same fragility ran underneath every page.

Calling a Timeout

After the first broadcast, the natural request was to keep moving with new layouts, custom team pages, and more surfaces to manage. Those needs were real, but every new page created another place for live data to fall out of sync. The work had to move up a level first, away from adding surfaces and toward defining the structure the platform needed to understand about the sport.

System planning artifact defining the platform structure before new surfaces

The stack was a phased choice, not a permanent one. Webflow alone couldn't carry the data model, so I paired it with Airtable for the validator phase: Airtable held the relational engine and the public API, Webflow rendered the surface, and the content team, already in Airtable daily, could run it without engineering support. It was a stack chosen for the team that had to operate it, with one sunset condition: stay until the sport outgrew it.

Webflow and Airtable validator architecture with Airtable as the relational engine

The validator stack: Airtable as the relational engine, Webflow as the render surface.

Calm in the Kitchen

The pause was an investment in architecture. I replaced manual coordination with a relational engine where data primitives, not page design, governed the system. Players connect to teams, teams connect to scores, and scores cascade to standings. Media connects to players, teams, and events through real relationships instead of hand-typed text fields. Engineer those connections correctly and a single update during a live match propagates across the whole ecosystem on its own, ending the broadcast-hour scramble that defined Season 1.

Relational schema connecting players, teams, matches, scores, and media

The schema: players, teams, matches, scores, and media connected by real relationships.

The sitemap was built around how a fan actually moves through the sport, not how the CMS happened to be organized. I mapped the journeys first, a fan following a player to their team, a team to its next match, a match to the live bracket, then defined repeatable content patterns to match those paths. Because the relationships were real, one tagged clip could resolve on the player's page, the team's page, and the event gallery at once, with no duplicate entry and no manual cross-linking.

One System, Every Surface

A score, a standing, a match result, none of it lived in one place. The same data had to render as a full standings table, a three-row team card, a live "playing now" strip, a leaderboard, and a next-match module, sometimes on the same page. So I built the interface as a component system tied to the schema, where each element knew how to display the same underlying data in whatever context it appeared.

The tokens carried meaning, not just style. Color ramps mapped to states the sport actually had, success, caution, error, pending, and the type, button, and spacing scales kept every surface consistent as the platform grew. When a new page was needed, it was assembled from parts that already knew how to behave, which is what let the system scale across three seasons without fragmenting.

Designed for the Sidelines

The Matches table became the operational hub. Every fixture was pre-created with placeholder content, which kept the public site stable before outcomes were known. As teams advanced, operators updated a single record and the site updated in place. Score entry came down to two fields, and everything downstream, wins, standings, bracket progression, calculated automatically. Timezone data and operational metadata lived in the database but stayed hidden from the operator view.

Operator view: score entry is two fields. Everything downstream calculates itself.

Operator view: score entry is two fields. Everything downstream calculates itself.

None of that was a database decision. The guiding question for every configuration was never "what does the database need," it was "what does a stressed, non-technical person need at 9pm during a live match?" The complexity lived in the system so it didn't have to live with the operator. A well-designed screen is easy to recognize. A well-designed system is what you notice when nothing breaks.

Operational hub view hiding timezone and metadata complexity from operators

On the Clock

The hardest test wasn't the one we built for. Live scoring was already unforgiving, thousands of fans refreshing for the next point while franchise owners tracked their teams from court-side, from suites, and from their phones. That audience included LeBron James, Tom Brady, Kevin Durant, Mark Cuban, Naomi Osaka, and dozens more, so accuracy wasn't a UX nicety, it was a credibility floor.

Then the Season 2 draft raised the stakes again. A live draft is synchronous, public, and irreversible: when an owner makes a pick on national television, there's no correction window. Every pick aired in real time, propagating from a single operator entry across player profiles, team rosters, draft boards, and the public event surface, with zero broadcast errors and zero engineering intervention. Because the architecture was strictly relational, the draft needed no new infrastructure. The same schema that handled scoring handled the draft, unchanged.

Season 2 live draft board updating rosters in real time from one operator entry

Draft night: every pick propagated live with zero engineering intervention.

Draft night surfaces showing picks propagating to player and team pages

Performance at Every Altitude

The Webflow and Airtable validator carried Major League Pickleball for eighteen months across live drafts, scoring, standings, and content operations. As the sport scaled, tournament formats, bracket logic, memberships, and real time standings outgrew the tools. Moving to a custom full stack architecture was not a rejection of no code. It was proof that the model worked. The same schema, relationships, and workflows carried forward and shaped the next generation of pickleball platforms.

After the Whistle

The first season exposed the cost of designing around pages before the real system was understood. I built the platform within that original direction, but live scoring, player content, standings, brackets, and memberships quickly revealed a deeper problem. The product was never a set of pages. It was a connected sports model that had to be read from the league level, the event level, and the operator level before any interface could hold. Rebuilding it meant taking the work up to the right altitude first, then letting the screens follow the structure. When another team can skip the blank-page phase because the foundation is already there, the work has become infrastructure.