Pinnacle Casino
The Brief.
Other than the Sportsbook and Esports products, Pinnacle also offers its customers a Casino gaming experience. It consists of numerous casino titles, ranging from roulette and slots to Blackjack and table games. It's a highly reputable product amongst its many users and is host to many gaming software providers. When a new Casino Manager was hired, a redesign of Pinnacle Casino was at the forefront of his main objectives. By opting for a refresh in its UI, the Casino Manager was hoping that it would drive more customers to the product as well as create a more engaging experience. Coupled with an optimised mobile approach, the redesign would cater for players who predominately use their device for gaming; thus seeing an increase in mobile user interaction and lower drop-off rates. The redesign was to also include an area for promotional material to entice users to opt-in and take advantage of offers available to them. Once the wheels were in motion, the project plan, timelines and expected outcomes were defined. Relevant teams were made aware of proceedings and their respective involvements were elucidated. Shortly thereafter the project was handed over to the UX Team to start their analysis and create the foundations upon which, the redesign would be built.
Current Pinnacle Casino UI
User Experience.
By evaluating the current Casino product, testing the various interactions and analysing the data the company had on user behaviour, the UX Team set about improving the user experience. Whilst defining the current user flows and thinking of new ways to improve them, the team opted for a familiar design pattern utilised by Netflix with regards to displaying the plethora of game content. Competitor analysis was undertaken to determine what additional content could be offered to users and inspire alternate methods to enrich the user experience. Moreover the different types of Casino customers were researched and from this, user personas were created. They were based on the personas used for the Sportsbook but edited slightly, as the UX Team found user's motivations were a little different for the Casino product.
To clearly define how Pinnacle's users interacted with the casino product and identify the pain points the current iteration contains, various usability testing techniques ideally would've been executed at this stage. Combining the use of ethnographic field research, focus group sessions and one-to-one interviews would reveal the user's motivations and preferences. Conducting these usability tests would also help to understand Pinnacle's users and what their goals are, which could mean the difference between the success or failure of the redesign.
Based on the team's findings, preliminary mobile and desktop wireframes were designed along with their respective user flows. Collaboration between the UX and UI Teams ensued; ideas, questions and alternate approaches were bounced off each other and taken into consideration. By applying best practise and experience, amendments were carried out and finalised wireframes were produced. In an ideal world, further usability testing on a sample of Casino users would help determine at this point whether improvements were being made. It would help us to discover whether the newly proposed wireframes contained any pain points that may have been overlooked. However due to time and resource constraints, the UX Team were unable to carry out this testing and the project continued on its trajectory. Presentations to the wider teams and stakeholders then proceeded to take place and upon a rigorous Q&A session, approval was given. The project was then moved onto the next phase, UI and interaction design.
UI Conceptualisation.
After analysing the finalised wireframes, the flow of information with regards to its hierarchy and the relationship between elements, the initial concept for the redesign was set in motion. Keeping Pinnacle's core branding in mind set the building blocks of the Casino UI such as colour palettes, typefaces, iconography and CTAs. The 'dark mode' colour scheme was the main focus, bringing an aesthetically pleasing contrast between the pages components and the imagery used for the Casino games. As this large project would involve many different screens, I used the aforementioned building blocks to start the creation of a design system that the UI designs would work from. Creating this design system helped keep the workflow simple and easy to work with. Amalgamating these building blocks resulted in the creation of various components used across the casino product, such as the game tiles and promotional banners. The design of the site had to take accessibility into consideration pertaining to the colour contrast in the site's text, the font sizes used were legible on various screen resolutions and the form fields and icons had clear labels.
The game tile was designed using the 16:9 aspect ratio for ease of image scaling. A more 'open' approach was taken with regards to the placement of imagery and content, in turn giving the tiles a modern aesthetic. Each tile shows the game's title, category tags, the ability to 'favourite' a game and in some instances pertinent content would be shown to the user such as the amount of recent winnings. Upon hovering over a game tile would reveal more information, utilising the small amount of real estate available and felt more engaging to use than that of the current grid layout. For the 'All Games' page a 'Shake to randomise' mobile gesture was designed, utilising the device's capabilities and incorporating them to enrich the user experience. On desktop this took the form of a grid to display all the games tiles as shaking a computer monitor wouldn't yield the same results.
The hero section on the desktop home page featured a large promotional game tile, replacing the simple banner image. It included a feature character being placed on the relevant game background, partially breaking out past the tile boundaries and adding depth to the design. Furthermore a carousel was situated inside the promotional tile, consisting of game tiles within the same category, allowing users access to a specific type of game quickly and easily. However on mobile, these tiles were omitted to allow more of the gaming content to be viewed above the fold. In either case, on both desktop and mobile resolutions, these promotional tiles would be reused and showcased in the 'Promotional Games' sub-navigation page.
Underneath the promotional hero section, a myriad of gaming categories were placed. The number of games in each category sat alongside to show to the user how many games they could expect to choose from. These categories were based on what would be most useful to the user such as 'Continue playing', 'New games', 'Pinnacle's top picks' and 'Winning games right now', amongst others. This would bring about a sense of personalisation, allowed users to find what would be of interest to them with relative ease and thus, create an engaging user experience. The use of the Netflix design pattern on the game tile carousels allowed us to showcase a large number of available games to the user without having them navigate away from the home page; the decision to adopt this pattern would hopefully satisfy the objective of reducing drop-off rates as access to multiple games would keep the user engaged with the page. For mobile screens a carousel indicator was applied, this gave a visual representation of how many games were left in each category's carousel and helping to navigate the user through the category.
Throughout the redesign, I would collaborate with the internal teams to seek feedback and ensure design feasibility. Where necessary amendments needed applying, I would provide management and/or stakeholders with projected timelines to maintain transparency and manage their expectations. Additionally if questions or concerns regarding functionality or the feasibility of the designs, I would endeavour to address their questions with thoughtful answers and creative solutions. Once all the wireframes had been rendered, presentations of the UI to the Casino Manager and senior stakeholders ensued. After handing the floor over for a Q&A session and ironing out the last few creases, the green light was given to move the project into the development phase.
Development.
To aid the Development Team, assets such as icons and imagery were prepared and uploaded to Zeplin along with the finalised designs. A style guide was included to communicate dimensions and hover states. Moreover micro-animations were designed to ascertain the behaviour of certain functionalities. As the development progressed there were a few problematic encounters with the Netflix design pattern approach, mainly due to the technical constraints of the CMS where the Casino would be built. Amendments were therefore made to ensure a more feasible design could be achieved. Then however, a hammer blow was felt; due to unforeseen circumstances the Casino Manager left the company, ultimately leading the project being temporarily put on hold. When the completion of the development arises but before the launch, further usability testing by a sample of online casino players should be done. This would help us gain important feedback and data, making any further amendments to either the UI or the UX if necessary. These usability tests should also continue after the launch to help Pinnacle continually improve its Casino product and create a better experience for its users. Furthermore A/B tests would be conducted when the redesign goes live, to determine the engagement of users, drop off rates, number of user sign ups and other measurable factors in comparison to the existing product. This would help to define where improvements could be made and where downfalls in the redesign are occurring.
Micro-animation of UI interaction
Micro-animation of game tile hover effect
