top of page
The Problem
To redesign the UI bar. There are several problems with the existing system.
1. Usability. Buttons are very small and padding tight, presenting issues with hit area
2. Primary buttons are in menu creating friction when adjusting stake
3. No additional modes (turbo/autoplay) present for US jurisdiction
4. Stacked text appears messy and out of alignment.
5. Duplication of text at bottom of screen in both gameplay and bar
UX | IxD | Motion
UX/IXD redesign of our slots products
Animation
Figma
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 first solution presented was a more radical UX remodel. I created a dedicated toolbar to house the buttons and maximise space within the bottom bar. Balancing the fact that certain jurisdictions would legally not comply with the two left buttons (autoplay and turbo mode). These icons would disappear in the UK.
Pros:
1. Appropriate button hierarchy. All buttons are approximately 50% bigger than the current system and spin is the only button in a circular container creating differentiation between primary and secondary buttons.
2. UI still pending but clear states for buttons using red as an indicator of active state
3. Stake change buttons present and close to bet amount information
4. Retains balance even in absence of buttons according to jurisdiction and local law.
5. Scalability. The bar can scale and adjust width according to device
Cons:
1. Heavier implementation.
2. More fixed system. 4 buttons max. May present issues with product growth and expansion, this is balanced against product lifecycle.
Before
After
Solution 1
Interaction Design and Animation
Many jurisdictions have local laws dictating spin speed to keep players safe during gameplay which ranges from 1s to 5s, therefore during gameplay there is a pause between spins where buttons are disabled. This can make gameplay feel slower and sluggish, and be frustrating for users
In most competitor clients, this is usually displayed as either buttons disabled/greyed out, or there isn't an interaction to buffer this configuration.
The problem with greying out the buttons temporarily is that this will often present as flashing buttons and can be jarring in quicker modes - here are some solutions leveraging motion design to create a more seamless transition between 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 buffer static gameplay rather than an engagement piece of motion design
This option leverages scale and the time period before rescaling back configured to each timing span.
bottom of page