Jiaqi Wu | UI/UX Designer
Revolutionize the Spin Button
Give the most important button a modern spin
About the Spin Button
The spin button has always been among the most important UI elements for any slots game, digital or physical.
The majority of mobile slots games (ours included), imitate the layout of traditional physical machines, as the familiarity lowers learning curve for our older target market. However, this legacy UI structure presents many challenges when attempting to add new features and results in an unfriendly product experience due to a cluttered UI.
Gameplay Loading screens
Design Challenge
Consolidate all core functionality into simple and approachable components while retaining their original appeal
It is critical to remember that the spin button is what our user experience often centers around and is the button users interact with the most. Therefore, we need to take great care in not steering too far off the beaten path, as that could be intimidating to users who could find a major change jarring. Deciding the tradeoffs between familiarity and simplification required a lot of research, user testing, and aligning cross functional product partners.
Design Process
End Game Flow Motion Mock
Research & Insights
Understanding Our Users and Their Habits
1. Most of our players are middle aged from 30-50.
While traditional physical casino advertises with younger faces, our data shows that the majority of our players lies in the middle aged group, while males are slightly more than females.
2. Players are most active in the evening, presumably after work.
According to Google Analytics, there is a trend showing that our player group is mostly active in the evening. Which means our user scenarios are most likely during commute, after dinner, or while watching TV.
3. Players play our game while doing other things simultaneously.
Since our game doesn’t take a lot of active thinking, it is not surprising to find out that a large number of people are not 100% invested in playing the game at all times. A lot of them put on auto play and go do other things.
4. Majority of our players don’t really adjust their bet levels as often.
While in traditional land based casino games it is a common practice to adjust your bet amount strategically, in mobile slots games the players don’t really have the primary drive to bet more since the game currency doesn’t actually mean anything like real money. It explains the trend that the majority of our players stick to a relatively lower bet level so they can prolong the game time.
5. There are decent amount of people who don’t understand the interface at a very basic level.
Our older player base might not be super tech-savvy and it is not entirely shocking to find out that some players have trouble understanding our interface.
"This game is fun, I just don't understand where I see how much I am betting."
-- Participant from the onsite interview
Ideation & Wireframing
Focusing on the Core Problems
These are the areas we are trying to focus on during this process:
Single hand hold support: Since our players are not always fully mentally invested in our game, our current landscape oriented interface for two hands isn’t the best experience. While redesigning the entire game UI to support portrait orientation was out of scope for this project, we would focus on making the spin button in a way that doesn’t require two hands to be used effectively.
Strengthen the connection between elements: Most of the appeal in mobile gaming lies in the instant feedback. It is hard to enjoy a slot game when you don’t have a clear idea what you are doing. And our game did not help by separating the betting process into two separate HUDs.
Simplify and declutter the screen: There are a lot of things going on in the game with a ton of different currencies and multiple live events. Plus the flashy visual effects everywhere, it’s hard to keep track of where things are at times. It is very critical to consolidate the information in a way that’s more contextual and minimize the cognitive load on the screen.
Prototype
Designing the interaction
Clearer visual and physical haptic feedback. After combining our two HUDs, the relationship between elements became much clearer and followed Apple’s HIG for iPhone X navigation.
Ambidextrous support. This design allows player to switch between left hand mode and right hand mode with a single tap.
Inspired by everyday appliances interface. With respect for our older demographic more that’s often more comfortable with the non-digital, we opted to take inspiration from things we see everyday in a house like microwaves, laundry machines, and stoves.
The last step
Final Art
Check out other projects
Pet feature
Build emotional connection with user and increase long term retention
NBA Live
Various UI/UX design showcases for NBA Live 18, a AAA sports game
Game lobby redesign
Redesign one of our oldest game based on data driven decisions