Role: Product Designer, self-initiated solo project. Framing, flows, interaction and motion design, copy, odds engine logic, build and deployment.

Context

I practice Brazilian jiu-jitsu. Around me, many people enjoy MMA but lose track of the fight as soon as it hits the mat. In live betting, that moment matters most: ground phases are where values move fastest and where bettors understand the least.

The project statement: reduce the gap between how readable the fight is and how readable the odds are.

The user: an occasional live bettor, watching an MMA fight on their phone, with a single bet already placed. They know what a Cash Out is. They don't know what a guard pass is.

A deliberately narrow scope

• One fight, one bet, one market. A narrow scope is a choice, not a limitation of the prototype: it let me go deep on states and edge cases instead of wide on features.

• No betting advice, ever. The prototype explains what is happening. It never suggests placing a bet or cashing out. This was the hardest constraint to hold, and the most important one on a regulated product.

• No existing brand. The interface follows live betting conventions (sports navigation on the left, betslip on the right on desktop, edge-to-edge video on mobile, dark theme) without borrowing any operator's identity.

• A real fight, anonymised. A full UFC BJJ match, two rounds, ending with a rear choke. Fighters are named Blue and Red after their gear. Grappling removes stand-up exchanges, so the ground phases stay readable as a study case for MMA.

Three decisions

1. Explain the position when the value moves, not all the time

The problem. A live commentary layer would bury the bettor in text. A "who's winning" gauge would be worse: it turns an explanation into a prediction.

The call. The explanation only appears when the value changes. A single position line names what happened ("Red passed Blue's legs"), paired with one of four pictograms. On three key moments, a short note adds context for ten seconds ("Being on the bottom doesn't mean losing."). The table that maps each position to an advantage exists, but it stays inside the engine. It is never shown to the bettor.

The principle. Explaining the past is pedagogy. Scoring the present is a betting tool. The line between the two is a design decision, not a legal footnote.

One wording detail shows the stakes. My first labels described positions as "on top". I removed every occurrence: in grappling, on top does not mean ahead, and the label was teaching the bettor exactly the wrong reading.

2. Suspend on uncertainty, and freeze the whole market

The problem. In the first version, only the Cash Out button paused during a submission attempt. A senior product designer from the betting industry reviewed the prototype and pointed out that real operators suspend the entire offer, odds included. Leaving the odds live while the Cash Out is locked sends two contradictory signals.

The call. The market now freezes as a whole, on the last value before the event. Suspension is triggered by uncertainty, not by direction: a locked submission in favour of the bet and one against it produce the same state. Only locked or critical submissions suspend. A setup moves the value but keeps the market open. Major position changes (guard pass, mount, back control) pause the offer for three seconds while odds are recalculated.

The result. An early automated annotation suspended the market for about 25% of the fight, which would have felt broken. After recalibration: 26 seconds out of 7 min 57 s, around 5%, concentrated on the moments where the outcome really can change in a second.

3. A Cash Out that never hides what you give up

The problem. A Cash Out decision happens under stress, on a value that keeps moving. A one-tap button hides both the trade-off and the risk of confirming a value that no longer exists.

The call. A two-step confirmation that states both sides symmetrically: "You secure 14,91 €. You give up 38,09 €." Then every edge case gets its own honest state:

• Value changed during the request: old and new values shown side by side, the user confirms again.

• Suspension during the request: the request is cancelled, nothing is validated, and the screen says so.

• Fight ends during a suspension: the bet settles directly. The Cash Out never reopens.

• Market resumes: the button comes back with the last fight event attached, so the user knows what changed while it was locked.

The principle. Emotional design on a betting product is mostly restraint. No exclamation marks, no flashing red, no countdown. When the bet is lost, the result is one neutral line, and the interface never reminds the user what the Cash Out used to be worth. Staging regret is a nudge.

Motion with a job

Three motion tokens (150, 250, 400 ms), ease-out for entrances, ease-in-out for state changes. Values count up or down instead of jumping, with a brief green or red tint to signal direction without shouting. A lock icon and a thin progress line mark the suspension. Everything respects the system's reduced motion setting: with it on, changes are instant.

Method

Real footage over a scripted fight. I started with a fictional, scripted round. It demonstrated the states but felt fake, and a fake fight makes it impossible to judge whether the explanations actually help. I switched to a real match, embedded from YouTube, with the video time driving the feed, the odds and every state.

Annotation is the real work. Gemini produced a first pass of positions and submissions with timestamps. It was confidently wrong on several key moments. I re-timed the whole fight second by second myself, cross-checked with the commentary, and went through nine annotation versions: 18 position changes and 6 submission sequences, each with a user-facing label and a technical subtitle. A 5-second leg lock was left out on purpose: too brief to explain without creating noise.

The feed follows the image. In real life, the stream often lags behind the data. I inverted it on purpose: the feed reacts two seconds after the image, so a first-time viewer sees the move, then reads what it means.

A credible engine. Odds derive from an implied probability, with an 8% margin calibrated against real UFC odds on the market. Red opens as favourite (1,42 against 2,65), based on pre-fight records shown in a match center card. Position effects build up gradually, submission threats hit instantly.

Bugs became decisions. Odds could fall below 1,01: now floored, as real markets do. Two overlapping suspensions made odds jump mid-pause: suspensions now merge into one continuous window, frozen on the value before the first event. The engine first pulled every position back towards 50/50 instead of towards the pre-fight favourite: fixed at the model level, not patched on screen.

AI as a build partner, not a designer. Figma upstream, Claude to write specs and challenge decisions, Lovable to build and deploy. Around 25 build cycles, each one scoped to a single concern, with explicit "change only this, don't touch that" guardrails to protect the video sync from regressions. One configuration file holds every value of the engine, so tuning never requires touching components.

How I would measure it

Hypothesis: explaining the position at the moment the value moves should reduce surprise-driven Cash Outs right after the market resumes.

Test: two versions, with and without the explanation. Primary metric: share of bettors who cash out within 10 seconds after a suspension ends. Secondary signal: how often users open the position explanation.

Limitations

This is a design exploration, not a product. It has not been tested with real bettors yet, which is the obvious next step. The engine is a simplified model, not a trading model. Feed latency and feed loss states are specified in the state machine but not exercised in the demo, since the feed follows a recorded video. And grappling is a proxy: a full MMA version would need to handle strikes, knockdowns and referee stoppages.

Result

A live, playable prototype: one real fight, a full live betting screen on desktop and mobile, an odds engine, two state machines, and every Cash Out edge case I could find. All five points from the expert review were shipped. A hidden demo mode jumps straight to five key moments, and a 2 min 40 walkthrough video shows the full flow.

Try the demo: sweep.ibnoudiop.com