top of page
Slots UX is notoriously frustrating. Buttons are jurisdiction dependant and a system needed to be flexible enough to accommodate several buttons being invisible/deactivated dependant on local law.
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
Slots in-game UX
The problem
Redesigning the UX of the UI bar. 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.
Before
After
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, while also accounting for jurisdictional constraints - specifically, the two left buttons (auto-play and turbo mode) would be removed in regions like the UK where they are not legally permitted.
Advantages:
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.
Cons:
This solution also has drawbacks, including a heavier implementation effort and a more fixed structure limited to a maximum of four buttons, which could present challenges for future product growth and expansion, although this is somewhat mitigated by the product lifecycle considerations.
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.
Things taken into account:
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
Interaction Design
bottom of page