01minimised
Available
30/30 · £0.10
Minimised
Available, low footprint
- Behaviour
- Always visible, snaps to corner zone
- CTA
- Tap to expand
- aria-label
- Free Spins available, 30 spins. Double tap to expand.
Component state model
A reusable model, not a set of static screens
Each state has a message, a behaviour, a CTA and an aria label. Colour alone never carries it. There is always an icon and a word backing it up.
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
- Behaviour
- Player taps Start to begin
- CTA
- Start Free Spins
- aria-label
- Free Spins expanded. 30 spins ready. Start button.
03active
Free Spins
Active
Spins remaining17/30
Winnings so far£3.40
Active
Spins in progress, live counter
- Behaviour
- Counter updates per spin
- CTA
- Pause
- aria-label
- Free Spins active, 17 of 30 remaining.
04paused
Free Spins
Paused
You paused with 13 remaining. They'll be kept for 24 hours.
Paused
Player paused, resume available
- Behaviour
- State persists 24h
- CTA
- Resume
- aria-label
- Free Spins paused, 13 spins held.
05expiring
Free Spins
Expiring soon
Heads up, 12 ending soon. No rush, only use them if you want to.
Expiring soon
Urgency without pressure
- Behaviour
- Amber timer chip, soft tone copy
- CTA
- Use now / Remind later
- aria-label
- Free Spins expiring in 4 minutes 2 seconds.
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
- Behaviour
- Component explains rule, offers fix
- CTA
- Adjust bet
- aria-label
- Free Spins blocked. Adjust your bet to 2 pounds or less.
07completed
Free Spins
Done
You won
£12.40
Credited as cash · No wagering left
Completed
All spins used, winnings shown
- Behaviour
- Winnings credit as cash
- CTA
- Continue
- aria-label
- Free Spins complete. You won 12 pounds 40.
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
- Behaviour
- Selection step before start
- CTA
- Open game
- aria-label
- Free Spins available in 2 games. Select to start.
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 am treating them as one state with two beats: the counter sits still between spins, then ticks down the instant the reels move. Same component, the live chip and the pulse do the talking. If a future test shows players miss the moment of the spin, I would split them.
Free Spins
Active
Spins remaining17/30
Winnings so far£3.40
02 · Small phones (≈10% of base)
360 px wide, still readable
Roughly a tenth of the audience is on a 360px-wide phone. Auto Layout handles most of it: the outer frame holds at 320 min-width, the info column fills and wraps, the balance card stays fixed at 72px. Below 360px the helper line drops, the CTA sticks to the right edge, and the timer pill moves to a second row instead of squashing.
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
Try the flags in the top nav
The locale switcher up top is real. "5 Free Spins" becomes "5 Rodadas Grátis" in BR and "5 ilmaiskierrosta" in FI, which is roughly 40% wider. The number field reflows, decimal separators flip (R$ 0,50 vs. 0,10 €), and the CTA wraps to two lines before it ever truncates. That is why the info column is set to fill and the CTA to hug, not the other way around.
- UK · "Start Free Spins" · £2.00
- BR · "Iniciar Rodadas Grátis" · R$ 10,00
- FI · "Aloita ilmaiskierrokset" · 2,00 €
Minimised state · A/B test
New pill vs current balance card
The brief shows Free Spins minimised as a small square balance card in the top game bar, next to the home and balance chips. That is what players already recognise today. I want to test the new pill against that baseline before I replace something that works.
A
New pill
Status-led, sits in the overlay zone
Available
30/30 · £0.10
- + Status dot, label and count read in one glance
- + Scales to other states without changing shape
- − Wider footprint, needs its own slot in the overlay
B
Brief-style chip
Square balance-style chip, as sketched in the brief
- + Matches what players already see in-game today
- + Tiny footprint, fits next to home and balance
- − Same shape for every state, so the status is harder to read
My hunch
B probably wins on recognition, since it is already what players see today. A probably wins once spins go active, expiring or blocked, because the shape itself signals that something changed. I would test both and look at tap-through and missed expiries.Minimised across statuses
How each variant carries the state
Same component, six sub-statuses. A keeps the pill shape and lets the icon, label and dot do the work. B keeps a single square and leans on the status dot in the corner.
Available
Available
30/30 · £0.10
Active
Active
17/30 · £0.10
Paused
Paused
13/30 · £0.10
Expiring
4m 02s
12/30 · expires
Error
Action needed
30/30 · max £2.00
Completed
Done
0/30 · +£12.40
Multi-game thumbnail · A/B test
Real game art vs brand fallback
The multi-game state needs a per-game thumbnail. Two options, both honest about the trade-off. The test would check which one users decode faster when they are scanning a short list of 2 or 3 games.
A
Real cover art
Game thumbnail from BetMGM CDN
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
- + Highest recognition, players already know the art
- + Visual variety, the list feels less repetitive
- − Needs a CDN lookup per game, and a real fallback
B
Brand fallback
Gold-on-ink with initials, no asset dependency
Free Spins
Multiple games
Free Spins are ready in two games. Pick one to start.
- P4
Pirots 4
30 · £0.10
- Go
Gates of Olympus
20 · £0.10
- + No asset dependency, it ships anywhere
- + Keeps the MGM brand consistent
- − The player has to read the name to know the game
Production recommendation
Use A as the default, with B as the fallback when the thumbnail fails to load (404, slow connection, missing CDN entry). That way no player ever sees a broken image, and the brand always covers the gap.Color system
Semantic colour, not decorative colour
Every state colour is a token tied to a meaning, not a hex picked because it looked nice. One token controls dot, ring, chip, icon background and accent copy at the same time, so changing one value retones the whole component. Colour is never the only cue. Icon and text always carry the state too.
Available
#008C71--state-available
Spins ready, low-key reassurance. Used on Minimised, Expanded and Multi-game
Active
#008C71--state-active
Spins in progress. Same green as Available, the pulse and the live chip carry the difference
Warning, expiring
#E8AC59--state-warning
Urgency without alarm. Amber ring, soft tone copy, gentle pulse
Paused
#E8AC59--state-paused
Player paused. Reuses the warning amber on purpose, never red. Paused is not a failure
Error, blocked
#D33C2D--state-error
Action required. Reserved for blocking rules like bet too high or no balance
Completed
#D4A03A--state-done
Celebration. Gold accent ties the close-out back to the BetMGM brand
Why two greens and two ambers
Available and Active reuse the same green on purpose. The pulse and the "Live" chip do the work of telling you it is running, so the player only learns one colour. Paused borrows the expiring amber because paused is not a failure, it is just "needs your attention". I am keeping red for the real blocks, otherwise it stops meaning anything.Accessibility
Base on soft tint clears 4.5:1 for body copy, base on ink clears 3:1 for chips and icons. Dot, label and icon always travel together so a red/green confusion never blocks comprehension.