Fanbuilder
THE·TEAM's fan engagement platform. I led all UX and UI from the ground up.
Outcome
110 campaigns in H1 2026 for the WTA, European Tour and Nations Championship, live in five language markets. No custom integration work per client. Fanbuilder is now core IP, the platform the business sells.
Core IP
Product
110
Campaigns run in H1 2026
5
Language markets
Solo
Ground-up UX/UI
Campaign settings. Operators configure duration, locale and pages without dev
Real-time analytics. Entries, surveys, opt-ins and geo breakdown per campaign
Fan-facing preview, themed per client, data capture gated behind the prize
Theme builder. Operators restyle campaigns per client without touching code
Design decisions
Every mechanic is the same object
A screen per mechanic would have meant a new interface to design and maintain every time the business sold something new. So the campaign shell knows nothing about mechanics: name, dates, locale, data region, theme, identical every time. Everything a fan touches is a block added to a shared page builder from four families, and every block is configured through the same modal: field type, general settings, validation, locales, UI settings. That pattern holds across families, so a scoring matrix under Form and a voting carousel under Fan Engagement are built the same way despite being nothing alike for a fan. Growing the catalogue never means designing another interface.
Bespoke on the outside, shared underneath
Clients need the campaign to feel like theirs, not like a platform. Brand enters only as tokens through the theme builder: type, colour, spacing, radius, component states. Structure and interaction are fixed and shared. Operators restyle a campaign end to end without touching code, and no client can restyle their way into a broken entry flow.
Prize before form
Data capture is the point of the product, so the temptation is to ask early. That kills entries. I sequenced it so the prize and the mechanic land first and the form sits behind the moment of intent, which also gave the client a clean place to put consent and opt-ins without making the entry feel like an admin task.
Locale as configuration, not a variant
Running the Nations Championship across five language markets could have meant five campaign builds drifting apart. Locale became part of the campaign config instead, so market copy is a field rather than a fork. The layout is designed to absorb the length variance that comes with translation rather than assume English.
See it in motion
Three decisions that only make sense moving, rebuilt here in code rather than screenshotted. Hover any of them to play it again.
Four families, one of them holds the game mechanics. Pick one and the element type appears underneath rather than sending you to a different screen.
Add block
Home pageChoose the type of content you want to add.
Static
Text, media, dividers
Form
Inputs and selects
Interactive
Buttons and triggers
Fan Engagement
Voting, predictors, quizzes
Allows fans to view, scroll and vote on one of multiple content-driven selections. Best used for campaign voting such as Moment of the Season.
Add block. Every mechanic on the platform starts here.
ReplayA voting carousel and a scoring matrix are not even in the same block family. Watch the sections hold while only the last one changes.
Hovland
Rahm
Fleetwood
Field configuration. The same sections either way.
ReplayColour, radius and type all move when a client theme loads. The guides stay where they are, because layout is not something a theme is allowed to touch.
Welcome to the Giveaway
Complete the form below to take part. All fields marked * are required.
Theme preview. One campaign, two themes.
ReplayProcess
I designed the information architecture, user flows, component library and interaction patterns. Mechanics are blocks in a shared page builder rather than bespoke screens, configured through one modal pattern and themed per client with no custom dev. The hard part was holding that consistency while keeping each fan-facing campaign feeling bespoke. It is also what lets the catalogue grow: the next mechanics on the roadmap arrive as blocks, not as new interfaces. No PM, so I worked direct with strategy, data, account and engineering.
Context
Every client runs a different tech stack, wants different data and has its own brand rules. Building each enter-win campaign from scratch did not scale, so the platform had to plug into anything.