Esports hub
The Brief.
Pinnacle is one of the leading esports betting providers in the industry; The early-day prescience of providing betting on esports markets has captured a significant market share, translating into success among video gamers. The Sportsbook provides a platform for esports betting and links to the Esports Hub - a subsidiary Pinnacle product, the early version of which acted as a repository for all thing Esports; News, odds, schedule and help sections were all featured on the home page. The problems encountered pertained to the structure of the page, users felt that it acted more of a brochure web page rather than a dedicated space for esports betting. A project to redesign the Esports Hub was commissioned and focused on a few keys areas:
-
Redesign the Hub to feature more esports markets
-
Optimise the site for mobile
-
Apply a new UI style to the game lines
-
Retain the esports content repository and realign with site architecture
-
Ability to utilise external APIs for certain functionalities
In the initial meetings with the various teams involved, management and stakeholders outlined the plan; disclosing the project map, goals and timelines. We understood what each team would be providing and in turn, validated the intrinsic challenges and goals. The project shortly thereafter moved to the UX Team's table in conjunction with the Content Team, where analysis of the current iteration and competitors would be conducted and the building blocks of the new Hub would be designed.
Early iteration of the Esports Hub
User Experience.
The current iteration was evaluated along with the user data that was available. This helped the team to understand how the user is currently using the site, identify where the pain points are and what could be done to improve the user experience. To satisfy the requirement of featuring more markets and focus more on the betting aspect, a decision was made to incorporate a structure that reflected the blueprint of the Sportsbook. This approach would make the journey between the Sportsbook and the Esports Hub feel seamless and part of the same family of Pinnacle products. Assessing the qualitative and quantitive data taken from the Sportsbook, the implicit and explicit needs of the user could be extracted and, along with insights provided by the Esports Team, applied to the esports domain. This helped us understand the attitudes and behaviours of users as the relate to the tasks that the Hub was being designed to support.
The aforementioned competitor analysis was conducted to establish how user flows typically worked and what the hierarchy of information would look like. The gathering of competitor sites would be used again in the UI phase as it served as a mood-board to base the redesigned esports elements on. Additionally the types of Esports customers were researched and user personas created from the results. They were loosely based on existing personas utilised by the Sportsbook as the UX Team found user's motivations and attitudes different for the Esports product.
As the structure of the Hub's pages were based on that of the Sportsbook, the content's placement within each page could be determined for elements such as the bet slip, menus and game lines. However there are some elements that are exclusive to the Hub such as scoreboard states, live streaming, results and the esports news repository, aptly titled 'The Inventory', all needed careful consideration. Nevertheless wireframes for both desktop and mobile screen resolutions were designed to accommodate for the various types of pages, information states, user flows and system functionalities that were to be included for the redesign.
To gain a better understanding on whether the wireframes felt intuitive enough, whether they supported users’ goals effectively and is engaging to use, various usability testing techniques would've ideally been carried out at this stage. By combining different testing methods, this would yield less bias in the results and given a clearer indication as to whether the proposed wireframes was useful and usable. The results could also identify key characteristics of the user-base and gain a sense of the flows's efficiency. Nevertheless through various internal reviews, conversations and collaboration with the creative teams and management during the UX phase, amendments were made and the finalised wireframes were designed and put forth to the wider stakeholder group. After the green light was give, the wireframes were passed onto myself to design the UI and satisfy the applicable project objectives.
Various desktop and mobile wireframes
UI Conceptualisation.
With the Esports industry ever expanding and evolving, the UI of the Esports Hub had to have the appeal to Esports participants and bettors alike. It also needed to reflect the modern, game-orientated aesthetic to create an authentic Esports experience. By adopting this approach, an increase in user retention would hopefully be achieved. Referring back to the competitor analysis, I immersed myself in the range of themes and branding other company's employ and identified the common elements, fonts, shapes and other design aspects that appear across the sector.
Assessing the wireframes and focusing on how the elements relate to one another provided a starting point for the UI design. Due to the size of the project and the many different designs that would be involved, I created a design system comprising of a library of reusable elements i.e. colour palettes, icons, gaming lines, call-to-action buttons, imagery as well as team and game logos. This meant that the workflow on the project was easier and designs could be created quickly. This benefited not only myself but team members working on the Esports Hub.
With the Esports Hub being a subsidiary product, it meant that the branding could be aligned with the demographic of users rather than adhere strictly to the Sportsbook's aesthetic. A purple colour scheme was introduced to represent the esports market, the colour also contrasted well with the core branded orange and green colours that would be used for various states across the Hub. The Hub's colour scheme holistically would utilise darker colours, this was conducive in establishing a strong esports theme. To maintain a good level of accessibility amongst users, considerations included font sizes and their legibility across various screen resolutions, colour contrast, form fields containing readable labels and a clear visual hierarchy of elements was maintained to convey how we wanted the users to perceive and use the interface.
Gradients were used across tabs and container borders to add depth and highlight key information. A new typeface was integrated within the UI to further hone in on the theme of esports. Game logos were also introduced to provide more context to users, add vibrancy and create further engagement with the interface. Hexagonal shapes that were found to be rife throughout the esports industry were applied to the game lines (along with pertinent game components) to not only reflect the esports theme but to generate connotations of teams going head-to-head with one another. This adoption of shape worked well for the indication of 'more markets' button, as if to look like pointing users in the direction of more markets. Blurs were used on container backgrounds throughout the Hub to allow enough contrast between the content on the page and the imagery it would sit on. On mobile however, the main content would sit on neutral background tones to create less 'noise' and ensure legibility at smaller font sizes.
Regarding the imagery, meetings were set up between UI and the Graphic Design Team to construct a strategy and define what sort of imagery should be used and on what page. Considerations between various screen resolutions were taken into account to determine the focal point of each image in relation to the content and elements that would be placed around it. Image dimensions, guides and bleed areas were defined and supplied to the Graphic Design Team. Further collaboration between the teams continued in order to evaluate whether any necessary amendments needed implementing, to ensure that all parties were happy with the results when placed onto the various UI resolutions.
'The Inventory' containing various news articles, was redesigned to have its own dedicated space within the Esports Hub. As the type of content residing within The Inventory differs to that of the main betting content, a change in the primary colour was used to be able to distinguish between the two. To establish The Inventory as part of the Esports Hub, the same gradient style, iconography and other stylistic effects were applied to maintain consistency. A variety of article cards present on The Inventory's Feed, Directory and News sections were designed to give the an immediate impression of a content repository to users who may have deviated away from the Hub's main betting area, intentionally or not. The article cards featured imagery, titles, sharing capabilities, content categories and where appropriate, article preview text. It served to educate users and provide useful insights on Esports betting as well as news about upcoming tournaments, leagues and esports teams.
Throughout the UI phase, I adopted a process of internal reviews between the creative teams once certain milestones had been reached. These reviews allowed me to ascertain to what degree the UI met the criteria and critically analyse where improvements could be made. Moreover it provided an opportunity for a Q&A session, where additional feedback could be gathered and any necessary amendments were outlined. After the aforementioned teams involved in this process were happy with the UI for the user journeys, flows and overall aesthetic - presentations to the wider management and stakeholders were held. The result of which, after a meticulous Q&A session, meant that some unforeseen amendments needed implementing. Once these had been carried out however, the UI was signed off and I began the handover with the Development Team.
Development.
During the handover of the project with the Development Team, a walkthrough of the UI was conducted. This helped the Dev Team to define the system architecture, building approach, relationships between data and other mechanics needed to build the Hub. Icons, logos, fonts and other assets were prepared and sent to them. Other supporting documentation was included to highlight the various states and behaviours of certain elements such as, bet slip behaviour and validation states, CTA and input states, game menu behaviour and odds selection amongst many others. During the development, I made myself available to the developers when they had questions, needing further clarification on functionalities and/or logics or if they needed an additional asset. Upon completion of the development, the staging links were sent to the Testing Team to record any errors and bugs they could find to be fixed. After it was deemed fit for public consumption, the Hub went live. A decision was made to omit The Inventory for the initial launch and keep the original esports blog until phase two of the project, where it'll be included in the next release.
Post Production.
To bring more attention to the launch of the site, the Graphics Design Team created a video promoting the Esports Hub, which was subsequently uploaded across Pinnacle's social media channels, generating attention and visitation amongst Pinnacle's user base. To continually improve the Esports Hub and ensure the success over its evolution, gathering user data, evaluating the site's analytics and being able to convert this into a more useful and usable product will be paramount. Along with implementing the wants and needs of Pinnacle, the UX and UI should also be data-driven and centre around the user. One area of improvement that I would like to attend to pertains to a Front End Review of the Hub. This type of quality control consists of cross referencing the elements on the UI file with the elements on the screen and making note of the inconsistencies for the devs to fix. This ensures what's been designed matches exactly what the user sees on screen. Additionally whenever revised designs of the Hub are needed in the future i.e. to improve user flows or UI accessibility, conducting A/B tests would be useful to determine how the revised designs/flows stack up against the original concepts and measure whether the projected outcomes meet the actual outcomes. As the project develops and improvements are applied, the work that's put into the product will ensure that the Esports Hub continually encapsulates an authentic esports experience for its users.