Independent project · 2025
Match Highlights: a football highlights platform, designed and shipped solo
A free football-highlights site covering the seven big European leagues plus the 2026 World Cup: goals and extended highlights minutes after full time, organised by competition and team, with an AI match assistant that recaps any fixture and links the video. Designed in Figma and vibe-coded to production solo, now serving thousands of users.
- Role
- Sole designer & builder
- Platform
- Responsive web + installable PWA
- Timeline
- 2025 · live
- Team
- Solo: Figma to production
- Product design (Figma)
- Front-end build to production
- IA & content model
- AI match-assistant UX
Context
Football fans in this market don’t pay for a highlights subscription. They go to WhatsApp groups, YouTube search, and a chain of ad-heavy blog reuploads to find the goals from a match that finished an hour ago. The official clips exist (leagues and broadcasters post them to YouTube), but there’s no single, fast, spoiler-aware place to watch them.
Match Highlights is that place: a free site that pulls the official highlights for the seven major European leagues and the 2026 World Cup into one browse, sorted by competition and by team, with an AI assistant that will recap any fixture and hand you the video. I designed it in Figma and built it to production myself.
What I designed
- A competition-and-team content model: every clip is filed under its league and both clubs, so “just show me Arsenal” and “just show me the Champions League” are both one tap.
- A spoiler-aware browse: scores are available but never forced into a thumbnail you haven’t opted into, so you can scan the site before you’ve watched.
- The AI match assistant: ask “who won Madrid vs Inter?” and it returns a short recap plus a direct link to the highlight, instead of making you search.
- Team notifications: follow a club, get pinged when its highlights land.
- An installable PWA: “Add to home screen” so it opens like an app, no store needed.
Design to production, solo
The whole thing is one person: research and IA, the full UI in Figma, then the front-end build and deploy. Working across both roles changed the design: components were drawn to be cheap to build, states I’d normally hand off (loading, empty league, no highlight yet) got designed because I was the one who’d hit them, and the scope stayed honest because every screen had a build cost attached to it.
Stack. I built the front end with Claude Code and deploy it on Netlify. Highlights come in through the official YouTube Data API, not a scraper, and the AI match assistant is wired through OpenRouter, so one integration reaches whichever model I want to run it on.
Outcome
Live at matchhighlights.live, covering seven leagues plus the 2026 World Cup. It runs at 20,000+ monthly users and 30,000+ monthly sessions, with traffic split between Google organic search and the WhatsApp, X and Facebook channels linked on the site. The AI match assistant gets moderate use.