Product Design
Improving accessibility, stake change metrics & user satisfaction of our slots products
Designing a configurable and size optimised button system with a point of difference. I had a lot of independence on this project, and took initiative in a number of disciplines including UI, UX, Interaction Design and research
Brand: Ladbrokes/Coral
Format: iOS, Android & Web
Timescales: 6+ months
My Involvement: UX, Interaction Design
Scope: end-to-end implementation
The problem
The challenge is to create animating items on screen where the parameters extend beyond placement and positioning, into time, trajectory and inertia. Developing and implementing this in a UX space was technically complex and required hands-on collaboration with developers.
The Solution
I defined start and end parameters and defined a system on Figma to help translate speed, rotation and positional indices easily. The result was defined interaction design which used the screen as a full canvas for exploration.
After Effects | Figma
Poker Spins
The problem
Most poker clients use slots machines to present this mechanic. We wanted to position ourselves away from this, but also present the other multiplier figures to increase anticipation of winning a large prize pool
The Solution
Using the facets of a hexagon you can see adjacent multiplier figures while keeping the winning facet highlighted and in view. The table colour was configured to correspond with winning prize pool. Adding a unique colour scheme each time you play.
Strategize ways of presenting a spins mechanic without relying on generic or typical representations
The problem
The challenge is to create animating items on screen where the parameters extend beyond placement and positioning, into time, trajectory and inertia. Developing and implementing this in a UX space was technically complex and required hands-on collaboration with developers.
The Solution
I defined start and end parameters and defined a system on Figma to help translate speed, rotation and positional indices easily. The result was defined interaction design which used the screen as a full canvas for exploration.
After Effects | Figma
Poker Spins
The problem
Most poker clients use slots machines to present this mechanic. We wanted to position ourselves away from this, but also present the other multiplier figures to increase anticipation of winning a large prize pool
The Solution
Using the facets of a hexagon you can see adjacent multiplier figures while keeping the winning facet highlighted and in view. The table colour was configured to correspond with winning prize pool. Adding a unique colour scheme each time you play.
Strategize ways of presenting a spins mechanic without relying on generic or typical representations
Before
After
Problem 1.
No stake change buttons, resulting in low stake changes. Users need to easily customise this based on wins and losses and increase stake as they get to know the game.
There are several issues with the existing system. Usability is a key concern, with buttons that are too small and tightly padded, resulting in poor hit areas. Primary actions are also placed within a menu, which creates unnecessary friction when adjusting the stake. Additionally, there are no extra modes such as turbo or autoplay available for the US jurisdiction. The interface itself appears visually cluttered, with stacked text that looks messy and misaligned. Finally, there is duplication of text at the bottom of the screen across both the gameplay area and the UI bar, which adds to the overall lack of clarity.
Problem 2.
As well as buttons and text falling outside of accessibility guidelines, we receive complaints in usability due to tight padding between the spin button and hamburger menu.
Problem 3.
Built in safety features. Buttons disable for up to 5s with poor visibility of system status between spins, especially in jurisdictions with low spin speeds such as Germany (5s).
Slots studios need a system of buttons to trigger broad gameplay functions. The spin button is the the most important button, along with stake change buttons. Our previous system, had many issues. The three below outline the problem our data shows.
The solution
The solution presented was a more radical UX redesign. A dedicated toolbar was created to house the buttons and maximise space within the bottom bar. I designed the UI with gamification in mind, and with contrast to compete with the saturated aesthetic of slots games. Various states were designed, along with interaction motion design to improve visibility of system status. The solution had balanced various benefits.
The problem
The challenge is to create animating items on screen where the parameters extend beyond placement and positioning, into time, trajectory and inertia. Developing and implementing this in a UX space was technically complex and required hands-on collaboration with developers.
The Solution
I defined start and end parameters and defined a system on Figma to help translate speed, rotation and positional indices easily. The result was defined interaction design which used the screen as a full canvas for exploration.
After Effects | Figma
Poker Spins
The problem
Most poker clients use slots machines to present this mechanic. We wanted to position ourselves away from this, but also present the other multiplier figures to increase anticipation of winning a large prize pool
The Solution
Using the facets of a hexagon you can see adjacent multiplier figures while keeping the winning facet highlighted and in view. The table colour was configured to correspond with winning prize pool. Adding a unique colour scheme each time you play.
Strategize ways of presenting a spins mechanic without relying on generic or typical representations
Process
Scalable and adaptable to various jurisdictions, regulatory laws.
The solution establishes a clear button hierarchy, with all buttons approximately 50% larger than in the current system, and the spin button uniquely placed within a circular container to distinguish it as the primary action. The design introduces clear button states, using red to indicate active status. Stake adjustment buttons are positioned close to the bet amount for improved usability, and the layout maintains visual balance even when certain buttons are removed due to legal requirements. Additionally, the bar is designed to be scalable, adapting its width across different device sizes.
Iteration comparisons
The design was optimised for vertical space, preserving real estate for game elements. The final solution introduced a clearer visual hierarchy by prioritising the spin button over a set of secondary controls. Accessibility was enhanced by using the full device width to create larger, easier-to-hit touch targets, and the layout also offers a more distinctive configuration that helps establish a recognisable identity for our in-house releases.
Trade-offs
These benefits come with trade-offs. The final solution is more fixed and therefore less flexible than earlier iterations, we consciously chose hierarchy, clarity, and space efficiency as priority. This was prioritised over need for additional buttons in the toolbar - however established that these buttons have historically remained consistent. This fixed design, was also discussed with developers during implementation, with scalable options considered in build.
Which option do you prefer?
Which option has buttons with the clearest actions?
Which option feels more familiar?
Which option gives you more confidence?
Testing
The design was optimised for vertical space, preserving real estate for game elements. The final solution introduced a clearer visual hierarchy by prioritising the spin button over a set of secondary controls. Accessibility was enhanced by using the full device width to create larger, easier-to-hit touch targets, and the layout also offers a more distinctive configuration that helps establish a recognisable identity for our in-house releases.
I tested our favoured version against a contrasting design solution. Solution A, is a common go to in slots games, circular buttons arranged in this style and configuration. Where as B was optimised and tore up the rule book. I structured my questions around familiarity vs confidence.
Testing against contrasting versions
Tested against V1 and V4
V1
V4
Final comps + UI
• Stylised to compete with slot game aesthetic
• Adaptable and customisable against in-house studios umbrella brand
• Explored several colour variations and button states.
.png)
Improving visibility of system status
Many jurisdictions enforce spin speed limits (typically 1–5 seconds) to promote safer gameplay, which introduces pauses between spins where buttons are disabled. This can make gameplay feel slow and frustrating. Most competitors handle this by greying out buttons or offering no interaction during the pause, but this often results in distracting “flashing” effects, especially in faster modes. To address this, motion design can be used to create smoother, less jarring transitions during these pauses. Further considerations were:
1. The solution needs to work across 3 speeds, 1s, 2.5s and 5s however weighted more to quicker speeds as 5s is a rare requirement
2. Subtly is key. This is to support the feeling of progression and to ensure this doesn't add to frustration
The results
"Mega Increase in stake changes” Head of Studio Performance, Entain.
Improved correlative data to improve insights into game release performance metrics.
Improved brand perception.
An increase in our rapport with key stakeholders.
End - to - end process
End-to-end process
