Case Study · Product Design · AI Engineering · IBM June Challenge · 2026

Kickoff Buddy

An AI-powered World Cup companion for first-time fans — six Granite-powered features that explain the match, the rules, the referee, and the matchday experience, without ever making a newcomer feel like they should already know.

IBM Granite / watsonx.ai · Hybrid AI Pipeline · Live Match Data · Responsible AI · Live Product

Kickoff Buddy banner showing the robot mascot kicking a soccer ball beside the tagline: AI-powered World Cup companion for first-time fans

Problem
World Cup 2026 will reach an estimated 5 billion viewers, and for hundreds of millions it will be their first soccer match ever. Existing resources assume you already know the basics — nothing is designed for the confused newcomer watching live.
Built
A live, deployed companion with six AI features — match guides, "what just happened?", decision explainer, momentum & tactics, team matching, and a matchday checklist — powered by a two-stage hybrid AI pipeline on IBM watsonx.ai.
My Role
I defined the concept, user experience, feature set, and AI honesty rules, then directed a three-stage AI build workflow — ChatGPT for ideation, IBM Bob for architecture and build, Claude Code for review, debugging, and security.
6AI-powered features
2AI models per answer
3Live APIs, keys server-side
0Fabricated live facts

Two minutes, whole match.

The demo walks through the full experience — setting your context, generating a match guide, asking what just happened, and building a matchday checklist.

Want to dig into the details? The full source is on GitHub.


Designed for the person who has never watched soccer.

The 2026 World Cup comes to North America for the first time — 48 teams, 3 host countries, and enormous audiences of casual viewers who will watch because their country is hosting or their friends are watching. They are not soccer fans. Yet.

For them, the barrier is real: offside and VAR feel impossible to follow in real time, referee decisions cause frustration, and asking "wait, why was that not a goal?" out loud feels embarrassing. Every design decision started from that emotional reality.

  • No question is too basic — quick-tap situation buttons ("Goal canceled", "VAR review") remove the burden of even phrasing the question.
  • Never condescending — the tone assumes zero background without ever implying the user "should" already know.
  • Show, don't lecture — offside is taught with a draggable interactive pitch diagram, and momentum with a tap-to-stack tactical board, not paragraphs of rules text.
  • Context shapes everything — knowledge level, match, venue, and goal are set once and personalize every AI answer.

Directing a three-stage AI build workflow.

Built for the IBM June Challenge, this project was as much about how to work with AI tools as what to ship. I did not write it line by line — I directed three AI collaborators through distinct stages while owning every product decision.

  1. 01

    Brainstorm — ChatGPT

    Explored the problem space, identified first-time-fan pain points, and pressure-tested feature concepts before any code existed.

  2. 02

    Architect & build — IBM Bob

    IBM's coding assistant wrote the site architecture, front-end structure, UI, feature logic, and the initial API integration framework.

  3. 03

    Review, debug & secure — Claude Code

    Reviewed the codebase, fixed bugs, connected the live APIs, refined the UX, and performed a security audit before deployment.

My constant role across all three stages: product owner and quality gate — defining what mattered, rejecting what drifted, and deciding when "working" was actually "right".


The architecture: a scout and a commentator.

A single LLM answering live-match questions has a fatal flaw: it will confidently invent scores and events. Kickoff Buddy splits the job in two, the way a broadcast does — a scout gathers verified facts, and a commentator explains them.

Two-stage hybrid AI pipeline

Input

Fan's question

Plus their context: knowledge level, selected match, venue — and confirmed events from football-data.org injected as ground truth.

Stage 1 · The Scout

Fact-checker

OpenAI GPT-4o · /api/ai-search

GPT-4o with live web search gathers verified, current 2026-tournament facts with sources — form, what just happened, the live state.

Stage 2 · The Commentator

Explainer

IBM Granite · watsonx.ai · /api/ai

IBM Granite writes the final beginner-friendly answer, grounded in the verified facts it is given. Granite is the single on-screen voice for all six features.

Output

One clear answer

Plain English, no jargon, honest about anything that cannot be confirmed.

Graceful fallback: if the fact-checker is unavailable, Granite still answers from confirmed football-data.org events and its own knowledge — the feature degrades, it never dies.

Honesty rule: every prompt instructs the AI to say so plainly when something cannot be confirmed — never to fabricate live scores or official rulings.

System architecture — keys never touch the browser

Frontend

Browser · pure static · no framework, no build step
index.htmlSingle-page UI — all six features
app.jsTwo-stage AI orchestration · fetch('/api/*')
styles.cssFull design system, hand-tuned
fetch('/api/*') — zero keys exposed client-side

Backend

Vercel serverless functions · local dev via proxy.js
api/ai.jsThe Commentator — Granite chat via watsonx.ai
api/ai-search.jsThe Scout — GPT-4o web search
api/matches.jsWorld Cup fixtures
api/match/[id].jsPer-match events
lib/ratelimit.js30 req/hr per IP — production only
lib/cors.jsOrigin allowlist for paid endpoints
API keys loaded from server environment variables only

External services

Live data & AI
IBM watsonx.aiGranite foundation models — the core IBM technology
OpenAIGPT-4o web_search — live fact verification
football-data.orgFixtures, results, goals, cards, substitutions

What I chose — and what I rejected.

Honesty over the illusion of live data

The free match-data tier has no minute-by-minute scores. Instead of faking it, the app tells users exactly where official answers live — and uses web search to get as close to real time as it honestly can.

Two models over one

Early single-model tests produced confident hallucinations about live matches. Splitting fact-gathering from explanation fixed accuracy without sacrificing Granite's warm, consistent voice.

Interaction over explanation

Offside became a draggable pitch diagram with a play-the-pass animation; momentum became a tap-to-stack control meter with a live tactical board. Rules stick when you can move the players yourself.

Friendly failure states

When watsonx's free-tier rate limit hits, users see "Buddy is catching up" with an automatic retry — a deliberate voice choice that keeps an infrastructure hiccup from feeling like a broken product.

Hardest debugging moment: intermittent 429 errors looked like an app bug but were IBM watsonx's per-minute concurrency limit. Diagnosing it meant isolating the layer — app, proxy, or provider — and led to the retry logic and the de-throttled local dev proxy.


Security for a public app spending paid API calls.

A deployed app with paid AI endpoints is an abuse target. Claude Code's security audit and my review hardened the public surface before launch:

  • All keys server-side — every external call routes through /api/*; nothing sensitive ever ships to the browser or the public repo.
  • Per-IP rate limiting — 30 requests/hour across both AI endpoints in production, deliberately skipped in local dev so testing is never throttled.
  • Origin allowlist — CORS rules block other websites from spending the paid endpoints from their own front-ends.
  • Prompt-level guardrails — confirmed match events injected as ground truth, off-topic questions filtered, and explicit instructions never to fabricate.

How I used AI in this project

This project is my clearest statement of how I like to build with AI: three specialized tools, each doing what it does best, with me as the constant product owner.

  • AI did — ideation sparring (ChatGPT), architecture and feature code (IBM Bob), code review, API integration, debugging, and the security audit (Claude Code).
  • I did — the concept, the persona, the feature set, the honesty rules, the tone, the visual direction, every accept/reject decision, and the final quality bar.
  • What I learned — handoffs between AI tools are where quality is won or lost. Bob's architecture was solid but its API integrations needed real debugging; knowing which layer was failing (app vs. proxy vs. provider) was human judgment no tool supplied.

A live product, not a prototype.

Kickoff Buddy shipped as a deployed, rate-limited, security-hardened product before the IBM June Challenge deadline — live during the actual World Cup it was designed for, answering real questions from real first-time fans.

What makes it meaningful to me: it treats a newcomer's confusion as a design problem, not a knowledge problem. The AI never says "as everyone knows" — it says "great question, here's what happened." That single stance shaped the pipeline, the prompts, the failure states, and the tone.

See it on the pitch.

Watch the demo or read the code.