Ad Spin Wheel Feature for user retention
2021 | ISLE OF MAN
Brief
To design a New feature called Ad Spin wheel that looks premium and different than the existing Bonus chips Spin wheel in the game. Wheel spin had to be in such a way that all elements on the screen is visible.
My Role
UI/UX (Product) Designer
I was responsible for the app's New feature, it's full development cycle, from initial ideas to final mock-ups and prototypes, conducted peer reviews, user testing and performed iterations to achieve the final designs.
Other team members:
1 Graphic Designer
Final Designs
Ad spin wheel UX metrics
The number of players viewing ads for a chance to spin the reward wheel increased to 20%.
The innovative feature sparked greater interest from both players who pay and players who don't spend.
Design Process
Market analysis
Spin wheels from competitors are colourful and attracts the players to get bonus chips to play their main games.
Competitor Analysis Takeaways
Spin wheel was one of their colourful UIs with either rainbow colours or multiple colours in the palette.
In few cases, the wheels do not spin but the centre element spins. Other cases the whole spin wheel spins and comes to a stop at the end of the spin.
It's functionality looks the most different in the game. Like a mini game or another feature.
Clear Win Amounts are always visible on the wheel.
The spin wheel's physics and its animation mimics the real world spin wheel motion.
Ad spin wheel initial wireframes
Below are both versions of the wireframes which were used as user flow after the initial structure of the challenges UI.
These were further enhanced to include gifts and chip animations
Prototype with 4 user flows in Figma
An interactive prototype was constructed in Figma for stakeholders to thoroughly examine the user journey and interface interactions throughout various screens in the app. All four flows can be accessed through the left sidebar in Figma.
Interactive Figma prototype below or use the link:
Figma link
Ad spin wheel UI - Initial mock ups
Initial mock ups included making the spin wheel appealing with the elements fit into each sector of the wheel. This went through numerous iterations.
Ad spin wheel UI - refined art
Digits were encircled fluidly on the rotating dial, presenting a clearer and bulkier appearance than in previous prototypes. The developers successfully devised a method to make them seem curved and revolving simultaneously with the dial.
Collect dialogs with particle effects and combination of elements.
Success of the Ad spin wheel on media
The feature got attention from Poker News and wider poker community thereby getting it featured in their article.
Spin wheel feature UX learnings
Following a set pattern is often easier to recommend to the development team in close collaboration to set parameters and code.
Having the numbers curved on the pie areas of the spin wheel was technical achievement where I and Developers pushed the boundary of User Experience over easy implementation. It might be time consuming for implementation but applying research does make it a better experience.