Live Gaming · Product / UX Design · Bonus System

Bonus Color Game

Designing a live-game interaction system that moves cleanly from betting to draw, multiplier reveal, settlement and payout.

RoleProduct / UX Design
FocusBetting states · Draw transition · Result feedback
FormatLocal interactive prototype
01 · Interactive prototype

Follow the round, not just the screens.

The demo reconstructs the intended product rhythm as a local web interaction. It shows how the same mobile surface changes responsibility over time: first it helps the player act, then it helps the player understand what just happened.

Place Your BetBet SuccessfulWait For Next GameElectronic multiplier cards500× highlightedBetting panel collapsedYOU WIN
Step 1 / 7 · Betting open

Place Your Bet

The betting panel is fully expanded so players can scan color, double, and triple options while the live table remains visible.

02 · Experience logic

The UI changes role across the game cycle.

The interaction model is not one static betting panel. Its hierarchy, messaging and available actions change deliberately as the live game moves through betting, physical draw and settlement.

Action phase

Make betting legible

Bet options, chip values and confirmation feedback stay visible while the player can still act.

Observation phase

Reduce interaction noise

When betting closes, new actions are blocked and the interface shifts attention toward the physical draw and multiplier reveal.

Resolution phase

Clarify what won

Winning regions remain active, non-winning areas recede, and the final payout receives its own unmistakable feedback state.

Betting→ Bet confirmation→ Betting locked→ Multiplier reveal→ Winning highlight→ Video focus→ Payout
Complexity stayed in the game logic. The player saw only what mattered at that moment.

This portfolio version is fully self-contained: all screen captures are embedded in the HTML itself, with no Figma iframe, no external prototype link and no login requirement.