Pinnacle Sportsbook
The Brief.
Pinnacle's main product is the Sportsbook, for which I'm the main designer for. The website sees tens of thousands of visits each day and is a big player in the betting industry. When I joined the company, the Sportsbook was in the early stages of a redesign project where one of the objectives pertained to redesigning the UI to feel more engaging and user-centric. Since the launch, additional features have been added that are designed in conjunction with the core branding and some existing features are amended inline with customer and stakeholder feedback. As part of a continual improvement project, requests come to my desk where I am sent a brief, content and wireframes. The design briefs vary in nature, such as designing:
-
Horse Racing Product
-
Live Centre
-
My Account
-
Game lines
-
Bet Slip
-
Matchup and League pages
-
Scoreboards
-
Icon creation
Some design tasks require a wide array stakeholder engagement and communication whereas others can be done with a quick and straightforward turnaround. Nevertheless desktop and mobile designs are always required, along with the light and dark mode variations the Sportsbook appears in. Other tasks relate to consulting and collaborating with various internal teams and 3rd party businesses the Pinnacle partners with. The Sportsbook essentially has many moving parts such as the members area, payment processes and personalisation to consider. Additionally Pinnacle has a huge range of customers in many different countries, resulting in a multitude of differing rules and regulations. This plays a huge factor when looking holistically at the product and the approach to take when designing it.
User Experience.
Working closely and collaborating with teams who are part of the design process, communicating ideas and providing feedback are essential actions that help the success of a project to achieve a user-centred product. Design tasks involve a handover from the UX Team before the UI commences.
Competitor analysis is undertaken to understand how other companies tackle certain flows and functionalities. It also helps us address what works well and where pain points may occur from a user's perspective. User personas defined to help characterise the actions of users and ascertain their interaction behaviours. Where possible, qualitative and quantitive data is examined from usability testing and a mixed method approach is taken to address what users like and don't like about certain user flows and what actions can be taken as a result.
Wireframes are presented and a process of review takes place, usually followed by a Q&A session. I'm always interested in the approaches taken by the UX Team and the decisions made to further my learning about user experience. Where I can, I offer alternative ideas and bounce them off the team to help create a useful and usable product that helps users achieve their goals on the site. User flows are also presented along with the wireframes for both the benefit of the UI and development processes. This helps me understand what the intended functionalities are and whether they require any prototyping and/or micro-animations that will not only help solve the problem at hand and enhance the user experience and but also shows the developers how the functionality should behave.
Where improvements can be made at this stage is the inclusion of more usability testing to determine whether the proposed wireframes, prototypes and flows really do meet the needs of the user and solve the problem outlined in the brief. A combination of ethnographic field research, focus groups, surveys and one-to-one interviews could really help drive the understanding of the target audience and address their needs more thoroughly.
UI Conceptualisation.
Referring to brand guidelines and building upon the current iteration of the Sportsbook, the UI for a given task is designed to UX specifications. Alternative designs are offered to develop interfaces or systems to do a better job of meeting the needs of the user than the existing practices, which may invoke further questions and collaboration between teams. Further to this, it allows me to explore the realms of possibility with regards to brand development. For a redesign to be effective however, it must stem from the understanding of what does/doesn’t work on the current website. It should also identify how user needs have changed since the last iteration. Throughout the UI, clear affordances and signifiers must be present, resulting in effective and satisfying feedback systems. This not only engages the user with the Sportsbook but helps to create a positive experience whilst remaining consistent with branding.
Due to the varying amount of content/data Pinnacle offers to its users, the UI has to be dynamic in its design to accommodate for all types of data in certain scenarios. Working on a content-heavy site, operating in a variety of languages, ensures that every pixel counts in a design where users like to see a lot of information within a small amount of real estate on a page. A simple design is therefore an imperative approach, which looks aesthetically pleasing and clear to the user and in turn, allows them to complete their intended task with ease and satisfaction; this extends to both light and dark modes that the Sportsbook can be viewed in. Additionally the UI is designed responsively in these modes for users who view the site across mobile, tablet and desktop screens. Due to the complexity, size and continual improvement strategy of the Sportsbook, I created a design system in Sketch consisting of many reusable symbols that meant the workflow was straightforward and easy to work with. This system consists of a colour palette pertaining to the brand identity, which could be applied to new or existing design elements. The system also contains a large array of branded icons used throughout the Sportsbook, call-to-action buttons, title containers, game lines, multiple states in which the odds appear in, page headers (for both guest and members), including instances of various markets. Using this library of reusable elements allows for a quick turnaround of new or revised UI designs when needed.
Once the UI designs are ready, presentations with appropriate teams occur to discuss both wireframe and alternate versions to determine which would be considered the most fit for purpose. Questions are answered, suggestions are considered and amendments where necessary are applied. Following on from this, another presentation is made to stakeholders and relevant external teams for Q&A and ultimately sign-off.
Early iteration of the wireframes
Development.
At the stage of handover to the Development Team, assets and images are provided along with links to the final designs. If needed, prototypes are created to define certain system behaviours and functionality upon user interaction. Additionally, a style guide is created for the benefit of the Development, UX and the UI Teams. For the Sportsbook I created an atomic style guide. The atomic approach is a methodology composed of distinct stages working together. This allowed me to create interface design systems in a more deliberate and hierarchical manner. This approach allows branding elements to be broken down to its atoms (colours, fonts), then to molecules (odds, fields), then to organisms (game lines, forms).
The handover also gives the developers a chance to ask any questions regarding the design and discuss where any potential problems may occur whilst working within the constraints of the Sportsbook's platform. If the developers aren't clear on a component's behaviour, micro-animations are created to elucidate the functionality. Further refinement takes place to the UX or UI design as the project develops and thus, a flexible and collaborative approach is always needed.
Adding favourites micro-animation
Navigating to more markets micro-animation
Scoreboard goal change micro-animation
Game line goal change micro-animation
Post Production.
After the launch of a new page, feature or product within the Sportsbook, I conduct a front-end review for quality assurance. Misalignment of elements, incorrect styling and/or improper functionality are highlighted and sent back to the developers to fix, ensuring that what's been designed and signed-off matches what appears on the screen. With the help of KPI definition, user feedback, heat maps and recorded user sessions, we can measure the performance of the UX, UI and development work. This establishes where the key areas of performance are and what improvements can be made. To create an even more successful product, more in-depth data analysis should be analysed, communicated and acted upon. This would play a huge part in providing answers to questions that arise when a design or re-design task is set. As part of a continual improvement project, the Sportsbook would benefit from data-driven designs leading to a greater user-centred Sportsbook product which customers would find more useful, usable and satisfying to engage with.