User clarity
Clear meaning in every state
Component state model
A reusable model, not a set of static screens
Each state defines what the player sees, what they can do next and how success would be measured. It gives Product, Engineering, QA and Compliance a shared model before build starts
Product logic
A flow from discovery to completion
Delivery readiness
Clear rules for build and QA
Responsible design
Urgency without pressure tactics
01minimised
Available
30/30 · £0.10
Minimised
Available, low footprint
Goal
Create awareness during play
Risk
Reward ignored in a busy game UI
Metric
Discovery rate
- Behaviour
- Always visible, snaps to corner zone
- CTA
- Tap to expand
- aria-label
- Free Spins available, 30 spins. Double tap to expand
Design decision
Keep it persistent but compact, visible enough to notice without competing with the game
02expanded
Free Spins
Available
Spins
30
of 30
Bet
£0.10
Expires
2h 14m
from now
Use on Big Bass Bonanza. Max bet £2.00. Winnings credit as cash.
Expanded · Available
Full info, ready to use
Goal
Make the next action obvious
Risk
Player sees it but does not activate
Metric
Activation rate
- Behaviour
- Player taps Start to begin
- CTA
- Start Free Spins
- aria-label
- Free Spins expanded. 30 spins ready. Start button
Design decision
Use progressive disclosure so the minimised state creates awareness and the expanded state supports action
03active
Free Spins
Active
Spins remaining17/30
Winnings so far£3.40
Active
Spins in progress, live counter
Goal
Keep progress visible
Risk
Player loses track of active spins
Metric
Completion rate
- Behaviour
- Counter updates per spin
- CTA
- Pause
- aria-label
- Free Spins active, 17 of 30 remaining
Design decision
Show progress and remaining spins clearly, without adding more noise to the slot screen
04paused
Free Spins
Paused
You paused with 13 remaining. They'll be kept for 24 hours.
Paused
Player paused, resume available
Goal
Support return to game
Risk
Player forgets to resume
Metric
Session return rate
- Behaviour
- State persists 24h
- CTA
- Resume
- aria-label
- Free Spins paused, 13 spins held
Design decision
Treat pause as recoverable, not as failure. The CTA focuses on resuming the journey
05expiring
Free Spins
Expiring soon
Heads up, 12 ending soon. No rush, only use them if you want to.
Expiring soon
Urgency without pressure
Goal
Show expiry clearly
Risk
Urgency feels too pushy
Metric
Expired bonus rate
- Behaviour
- Amber timer chip, soft tone copy
- CTA
- Use now / Remind later
- aria-label
- Free Spins expiring in 4 minutes 2 seconds
Design decision
Use factual time messaging, not pressure copy. The player should still feel in control
06error
Free Spins
Action needed
Your bet is too high
Adjust your bet to £2.00 or less to use Free Spins.
Error · Blocked
Bet too high. Instructional
Goal
Help the player recover
Risk
Confusion or support contact
Metric
Recovery rate
- Behaviour
- Component explains rule, offers fix
- CTA
- Adjust bet
- aria-label
- Free Spins blocked. Adjust your bet to 2 pounds or less
Design decision
Explain what happened and what to do next. The error should solve, not just warn
07completed
Free Spins
Done
You won
£12.40
Credited as cash · No wagering left
Completed
All spins used, winnings shown
Goal
Close the journey clearly
Risk
Winnings feel unclear
Metric
Completion clarity
- Behaviour
- Winnings credit as cash
- CTA
- Continue
- aria-label
- Free Spins complete. You won 12 pounds 40
Design decision
Show completion, winnings and next action together so the component does not simply disappear
08multi-game
Free Spins
Multiple games
Free Spins are ready in two games. Pick one to start.
Pirots 4
30 · £0.10
Gates of Olympus
20 · £0.10
Multiple games
Spins available in more than one game
Goal
Guide eligible game choice
Risk
Player cannot find where to use it
Metric
Game entry rate
- Behaviour
- Selection step before start
- CTA
- Open game
- aria-label
- Free Spins available in 2 games. Select to start
Design decision
Make eligibility visible before activation so the player does not have to guess
Edges I kept thinking about
Three things the brief asks for that do not fit in a single screen
01 · Active, two beats
Waiting for the spin vs spin in progress
The brief separates active, about to spin from spin running. I understood them as one state with two beats: the counter sits still between spins and then ticks down the instant the reels move. If player testing shows people miss the spin moment, I would split them
Free Spins
Active
Spins remaining17/30
Winnings so far£3.40
02 · Small phones
360px wide, still readable
Smaller mobile widths need to be treated as a real constraint, not a QA surprise. Auto Layout handles most of it: the info column fills and wraps, the CTA hugs content, and the timer pill moves to a second row instead of being squeezed
Free Spins
Available
Spins
30
of 30
Bet
£0.10
Expires
2h 14m
from now
Use on Big Bass Bonanza. Max bet £2.00. Winnings credit as cash.
simulated at ≈ 260px
03 · BR and FI
Localisation changes the component
Localisation is not just translation. Free Spins becomes Rodadas Grátis in BR and ilmaiskierrosta in FI, which changes width, wrapping, decimal formatting and CTA length. That is why the component needs flexible content rules from the start
- UK · Start Free Spins · £2.00
- BR · Iniciar Rodadas Grátis · R$ 10,00
- FI · Aloita ilmaiskierrokset · 2,00 €