UX Design | Product Design | Prototyping
Project Length: 1 Month
The Problem
On the heels of our newest casino app the creative team at High 5 Games was asked to focus on porting features from previous apps to this new experience. One of the most requested being the Slot Tournaments, a popular feature where users could compete by reaching the highest score in a single slot.
In order to stand out from the feature’s current iteration there was some flexibility allowed in the redesign, both in functionality and design. The end goal being a fresh take on the tournaments feature that still retained aspects that made it popular with our players.
One of many steps required to begin a tournament. Reducing these steps was one of the top priorities of the redesign.
The Team
As this was a feature proposal, the team size was kept small for a quicker turnaround. Product and UX design were handled by myself with management being provided by a Project Manager and Art Director. Regular reviews were held with key stakeholders to ensure that the project addressed the necessary requirements and stayed within scope.
The Research
Looking into major competitors in the market it became evident early on that they were more flexible in their implementation of tournaments. For starters many of them implemented a more open system of drop-in drop-out play wherein users could enter or leave tournaments at any time, something that we did not do.
At any time users have the option to jump to another game to compete with while participating in the tournament.
Additionally, multiple competitors displayed tournament standings in real time, again something we did not have for our own tournaments. While we did display rankings these were kept hidden during gameplay and needed to be manually accessed by the user.
Some casinos were more transparent in displaying the tournament rankings, showing the rank of both the user and their competitors at all times.
While there were a number of areas our competitors excelled it we learned that there was something they did not have that we could use to our advantage, an extensive game library. Where our competitors would run tournaments for a handful of games at a time we could offer our users five times the amount of gaming options.
The Solution
With these insights in mind we went about updating the tournament feature to match our competitors and implement some of the more intuitive features:
Real Time Rankings
While playing a tournament users would be able to view their standings, along with competitors standings, on the game screen. Outside of the tournament the user would be able to access a side panel that showed their standings in tournaments they were currently participating in.
The player’s rank is displayed on the bar to the left of the reels, tapping on a player icon reveals more information.
Early designs played around with the idea of showing the full list of players, however due to visual clutter that was eventually dropped. Only the positions relevant to the user would be shown on the bar; their standing, the position they needed to beat to be eligible for a reward, and the first place position.
Progression of the tournament ranking lockup, with each iteration we worked to pare it down to its essential elements.
In-App Push Notifications
As we would be allowing users to step out of a tournament at any time we needed an alert system to let them know about an active tournament’s progression. In response to this a push notifications system was designed to alert the player of tournament updates while outside of tournament play.
Notifications extend from the Tournament icon in the bottom nav bar, tapping the notification navigates the user to the relevant tournament.
Tournament Customization
Custom game settings allowed the user to tailor their tournament before joining. Of all the proposed features, the Tournament Customization would become the most complicated to execute and ended up going through the most iterations.
Based on the type of tournament chosen the settings would need to change accordingly, resulting in a number of different permutations. In addition we needed to allow for any number of slot games that the user could choose from as the final list was not decided.
An early version of the Tournament Customization screen.
Initially we explored multi-step flows to avoid overloading the screen with too much content. However, as it was more fleshed out it was evident that this was creating a bottleneck in the user flow. After a few more iterations we landed on a layout that mimicked the design of slot reels to fit all of the required settings on screen while not feeling too crowded.
The final version of the design, by swiping up and down on the reels users could select the options for their tournament.
Prototype
After the initial design was worked out prototyping of the main user flow began using the webtool Proto.io. In addition to showcasing key screens the prototype detailed the flow of a play session to emulate real time tournament tracking. This, along with the extensive online wireframes and documentation, fully fleshed out the proposed redesign.
Preview the Proto.io prototype by clicking here.
The Results
Although the redesign was well received it would eventually be put on hold due to resource and budget constraints. While it was unfortunate that we did not move forward with the design there was still much gained from the project as a whole.
A number of features and functionality from this project would go on to be implemented in other designs such as the notification system and tournament side bar. This project also encouraged the use of prototypes for other feature proposals which would become fully realized through the use of low-fi Unity builds for larger projects.
Despite the feature not taking off we had succeeded in fulfilling the requirements in a novel way which played to the strengths of our product and helped pave the way for future designs.
