Dev handoffVibe codingMulti-brand design system

Bringing AI-powered sports data to publisher sites

I built customizable data widgets and a Figma-based system that help publishers surface live sports content and guide fans into a deeper AI-powered experience.

Scope: Product strategy, UX/UI design, coded prototype, multi-brand design system
Collaborators: Product, Engineering, Data, Design
Project status: Publisher demo, client pitch, engineering handoff
Timeline: 12 weeks

Context

How AI is changing the way fans consume sports content

SportsMax.AI helps publishers understand each story as it happens and surface more relevant content, creative, and monetization opportunities.

Yahoo Sports was not a client. The publisher experience shown is a conceptual showcase.

SportsMax.AI scanning article context5 entities found

Contextual sports dataSchedule

Yahoo Sports article shown inside a phone with space for a contextual SportsMax.AI widget

Business opportunity

Contextual relevance opens new revenue opportunities

SportsMax.AI combines article context with live sports data to create timely fan experiences, new publisher inventory, and more relevant moments for advertisers.

A Yahoo Sports mobile article about the Knicks and Spurs

A generic Progressive car insurance advertisement

01Broad targeting

The placement reached the audience, but missed the moment

Demographic targeting could place a generic ad near sports coverage, but it could not understand the player, matchup, or storyline driving each fan's attention.

02Contextual monetization

The same placement opens new monetization opportunities

AI-powered data widgets use article entities and live sports data to connect the story with timely tickets, predictions, streams, or merchandise.

Vibe coded with

Claude Code

Vercel

Publisher demo

We needed publisher buy-in before moving into production

Before investing in production, we built a configurable demo that let publishers experience the idea with their own article content, widget formats, and brand styling.

Concept 1/3

Turn a sample article into a reusable demo

Starting with a sample article, the prototype captured its content, entities, imagery, and publisher design tokens in a reusable structure. We could tailor the demo without rebuilding the experience each time.

Concept 2/3

Give publishers control of the look and feel

A theme tool let publishers preview the widgets inside their own product. They could apply brand colors, typography, spacing, and component styles across the experience.

Concept 3/3

Test which widgets earn publisher buy-in

Testing different formats and configurations showed us which concepts earned the strongest publisher buy-in and gave the team a clearer signal for what to prioritize next.

Contextual experiences

More relevant monetization opportunities,
built into every data widget

Across sports and game states, I created a flexible system with a monetization layer that responds to each article, sport, and moment in the game.

Yahoo Sports mobile basketball article with space for contextual merchandise

Jalen Brunson player stats with a contextual Fanatics New York Knicks merchandise feed

01MerchBasketball · Player stats

A player story can become a relevant storefront, using the athlete and team in the article to shape the products fans see next.

Player contextProduct feedSponsored inventory

What this unlocks

Turns player interest into product discovery

Creates an expandable commerce surface

Yahoo Sports baseball article with space for a contextual prediction market

St. Louis Cardinals third straight win prediction market

02BettingBaseball · Box score

League position, team performance, and the next matchup can unlock a prediction that feels native to what the fan is already following.

League contextMatchup signalsPrediction market

What this unlocks

Introduces predictions that match the score context

Turns team momentum into a timely market

Yahoo Sports mobile football article with space for contextual tickets

Buffalo Bills versus Cleveland Browns ticket widget

03TicketingFootball · Schedule

An upcoming game can pair the schedule fans came for with ticket inventory tied to the teams and venue.

Matchup contextUpcoming gameTicket inventory

What this unlocks

Keeps the next action inside the article

Connects team interest to a specific matchup

Yahoo Sports tennis article with an ATP rankings and streaming widget

04StreamingTennis · Rankings

After a result, the same contextual layer can point fans toward the next broadcast without interrupting the reading experience.

Event contextLive scheduleWatch destination

What this unlocks

Surfaces the next broadcast from the article context

Turns tournament interest into a clear watch destination

More ways to follow the game

Follow every league, team, and player. SportsMax.AI brings the NBA, WNBA, NFL, MLB, NHL, Premier League, ATP, WTA, and more directly into the story.

Keep the story going. Each data widget gives fans a natural entry point into a deeper SportsMax.AI chat experience, where they can ask follow-up questions and explore the story further.

Yahoo Sports article ready for a contextual Ask Yahoo box score card

Development handoff

A reusable component model engineering could build from

I translated the approved direction into a development-ready Figma system, with reusable components, states, and variants across four core data-widget families.

Upcoming Cubs and Orioles game widget with a Vivid Seats ticket offer

Box score

One contextual surface adapts with the game, creating relevant actions for fans and new revenue opportunities for publishers and advertisers.

Schedule

One component moves from a team-level schedule into the details of a specific game.

Standings

Standings give fans useful context at a glance and another reason to stay engaged with the story.

James Harden season stats with a contextual StubHub ticket promotion

The Cavs didn't land one James, but they can still bring back another. Harden remains at the head of the class of (technically) available facilitators, averaging 20.5 points on 47/44/84 shooting splits to go with 7.7 assists and 4.8 rebounds in 33.8 minutes per game after joining the Cavs. His performance fluctuated in the postseason, as is his wont, and as was the case for a number of his Cleveland teammates, but he did team with Donovan Mitchell to get the franchise to its first Eastern Conference finals in eight years. The Cavs outscored opponents by 2.4 points per 100 possessions in his regular- and postseason minutes.

Player career stats

Player performance becomes a contextual entry point for tickets, merchandise, and deeper team coverage.

Multi-brand design system

A shared design system that adapts to every publisher

I created one shared system that preserves each publisher's identity. A focused set of color, typography, spacing, and radius tokens adapts every widget to its host brand.

Only these values change

Primitive design tokens

color.brand.primary#E11D2E

color.brand.secondary#111317

color.brand.subtle#FDECEE

font.displayAaBarlow Condensed

font.textAaInter

radius.base: 12px
space.base: 18px

Defined once

Shared semantic layer

// shared by every publisher
{
  "semantic": {
    "color.text.brand": "{color.brand.primary}",
    "color.icon.brand": "{color.brand.primary}",
    "color.border.brand": "{color.brand.primary}",
    "color.surface.brand": "{color.brand.primary}",
    "color.surface.brand-subtle": "{color.brand.subtle}",
    "font.family.display": "{font.display}",
    "font.family.text": "{font.text}"
  }
}

Every data widget uses the same shared mapping, while publisher values change by theme.

One base, tailored to each publisher.

ClutchPoints theme applied

NBA standings widget customized for ClutchPoints

Reflections

A coded prototype became our shared language. At the start, I was still learning my way around GitHub and repos. Building alongside the team made the product tangible much earlier, giving product, design, data, and engineering one working experience to respond to together.

I could move from concept to iteration much faster. I designed most of the experience and used AI-assisted coding to iterate it directly. In twelve weeks, I covered a scope that would previously have taken me about six months, with more opportunities to test directions, respond to feedback, and refine the product along the way.

Working in code changed how I design. SportsMax.AI was shaped by live data, uncertain inputs, and technical limits. Working in code brought those conditions into design earlier and made me a stronger partner to engineering. For the first time, I felt equipped to carry an idea from strategy into a working system without stopping at the edge of Figma.