A web platform where players join live games against each other, from a simple coin flip to price predictions, while a community chat runs alongside. I designed the product end to end: the game modes, the player profile, the analytics, and the design system underneath them. The client and brand are anonymised here.
The problem
The platform had to support several real-time game formats while managing balances, stakes, predictions, payouts, game states, cancellations and other edge cases.
The main challenge was to make these complex systems feel predictable and easy to understand, and to keep the experience consistent from one game mode to the next. At any moment a player needs to know what is happening to their balance, their prediction and their game:
What is happening right now?
What can I put in, and what could I win?
How am I doing?
The approach
Designing every game in parallel would have produced a different interface for each. I chose two pages to carry the whole process instead: the coin flip, the simplest game on the platform, and predictions, the densest. If one system could hold both extremes, it could hold everything in between.
Each page went through the same four passes, flow, sketch, wireframe and final design, so that structure was settled before style. Only when both pages held were their parts collected into a design system and applied to the rest of the platform. The film above follows that order.
Following the money
The risk: money moves at several points in every game, and those are the moments where confusion costs the most.
The flow was mapped before any screen was drawn, and every step where money moves was marked in its own colour: a deposit, a stake being locked, a win being paid. That gave the team a short list of moments where the interface is never allowed to be vague.
The same map settled what happens when things do not go to plan. A player without enough balance is taken to deposit and brought straight back to the game. A coin flip with no opponent can wait, be cancelled, or be played against the house. A prediction that has locked stays on screen, but can only be read. These cases were decided in the flow, not discovered in development.
One frame for every game
The risk: each new game mode teaches the player a new layout, and the platform feels like several products.
The structure never moves. Game modes sit in a row of tabs at the top, the wallet with deposit and withdraw stays in the top right corner, and the community chat keeps its column on the left. Each game fills the space in the middle.
Cards, tables and buttons are shared across every mode. A player always knows where their balance is, and learning one game teaches most of the next.
Starting a game in one bar
The risk: setting up a game takes several steps, and players drop out before the first stake.
The sketch put everything needed to start a coin flip into a single bar: the side, the stake with quick amounts beside it, and the button that creates the game. Nothing opens, and nothing has to be confirmed on a second screen.
Below it, the player's own games come first, each one readable at a glance as waiting, won or lost. Open games from other players follow, with one button to join and the stake right beside it. Empty seats close the grid, a quiet sign that there is room for one more.
Making live moments readable
The risk: in a live market, a player has to work out from the numbers whether they can still act.
Predictions run as a table: one row per market, with its timeframe, the up and down payouts side by side, and a small chart of the last day. A single status button removes the guesswork. Every market is in exactly one of four states:
- Open
Can I still join?
- Bet placed
Am I in?
- Locked
Has it closed?
- Done
Is it over?
In the final design, colour does the same work for the coin flip. A win is outlined in green and a loss in red, the coin sits between the two players, and the amount gained or lost is written on the card.
One system for every page
The risk: the platform will keep growing, and every new page becomes a new design problem.
Once the two pages held, their parts were collected into a design system: one set of colours, type and components. Near-black surfaces keep long sessions easy on the eyes. Gold is the single accent, kept for actions and value. Green and red appear only for up and down, profit and loss, so colour always carries meaning.
The rest of the platform, the predictions table, the player's profile and the analytics, was built from those same parts.
The player's own picture
The risk: players lose track of how they are doing, and the tools for staying in control are buried.
The profile brings progress together: level and experience, collected items, and a profit and loss chart in which gains and losses are told apart at a glance.
Two-factor authentication and a way to take a break sit beside it as equals, not hidden in settings. In a product built on wagers, making it easy to step away was a design decision, not a legal footnote.
The result
The final system created one consistent interaction model across the platform. Shared components, clear game states, defined balance flows, and reusable feedback patterns allow different game modes to behave predictably even when their mechanics change.
The designs covered the core game experience, player profile, and analytics, and were delivered to the client’s development team. The product had not been publicly released at the time of writing, so the client and brand are presented here anonymised.