Esports Hub
TL;DR / Summary.
As a Senior UI Designer at Pinnacle, I led the UI redesign of the Esports Hub; a subsidiary betting product that had outgrown its original brochure-style format and needed to evolve into a fully functional, market-focused esports betting platform. Pinnacle's early presence in the esports betting space had established a significant market share, and the redesign was an opportunity to build a product worthy of that position.
Working in close collaboration with the UX Team, who evaluated the existing Hub, conducted competitor analysis, developed esports-specific user personas, and produced the wireframes and user flows, I translated their foundations into a distinctive, game-oriented visual experience. A component library was built from the ground up, incorporating a purple colour identity, hexagonal design motifs, custom game line components, a new typeface, and a dedicated content section called The Inventory; all designed to create an authentic esports aesthetic that felt distinct from the main Sportsbook whilst remaining part of the same product family.
Following full stakeholder approval, the redesign entered development and successfully launched. To support the launch, the Graphic Design Team produced a promotional video shared across Pinnacle's social channels, helping drive awareness and traffic to the new Hub. The Inventory was deferred to a later phase, with the original esports blog maintained in the interim.
The Brief.
Pinnacle is one of the leading esports betting providers in the industry, having recognised the potential of esports markets early and captured a significant share of a rapidly growing audience. The existing Esports Hub had served as a repository for esports content; news, odds, schedules, and support, linked directly from the Sportsbook. However, it had grown outdated and users felt it acted more like a brochure page than a dedicated betting platform. A redesign was commissioned to address this, focusing on five key areas:
-
Increase visibility of esports betting markets
-
Optimise the Hub for mobile
-
Introduce a new UI style for game lines
-
Retain and reorganise esports content within a clearer site architecture
-
Integrate external APIs for expanded functionality
In the initial meetings, stakeholders outlined the project scope, goals, and timelines, and each team's involvement was defined and validated. The project was then handed to the UX Team and Content Team to analyse the current Hub, review competitors, and establish the foundations upon which the redesign would be built.
Early iteration of the Esports Hub
UX Research and Wireframing.
The UX Team began by evaluating the existing Hub alongside available user data to understand current behaviours, pain points, and opportunities for improvement. To satisfy the requirement of featuring more markets and shifting the focus towards betting, a decision was made to adopt a structure aligned with the Sportsbook, ensuring users could move seamlessly between the two products and experience them as part of the same Pinnacle family.
Competitor analysis was conducted to define typical user flows and information hierarchy, and would later serve a dual purpose as a visual mood board during the UI phase. Insights from both qualitative and quantitative Sportsbook data, combined with input from the Esports Team, helped the UX Team understand the distinct motivations and behaviours of esports bettors. Given the differences between esports and traditional Sportsbook audiences, tailored personas were developed to ensure the redesign was grounded in the specific needs of the esports user base. I collaborated closely with the UX Team throughout, contributing ideas, asking questions, and suggesting alternative approaches to ensure the UI perspective was considered from the earliest stages.
Wireframes for both desktop and mobile were produced to accommodate the various page types, information states, user flows, and system behaviours that the redesign would need to support. Using the Sportsbook as a structural blueprint, shared elements such as menus, the bet slip, and game lines were positioned consistently, whilst Hub-specific components including scoreboard states, live streaming, results, and The Inventory each required careful individual consideration.
Whilst best practice would have called for usability testing at this stage to validate flow intuitiveness, task efficiency, and user engagement, time and resource constraints meant the team progressed with confidence based on detailed internal reviews and close cross-team collaboration instead. Following revisions and stakeholder approval, the finalised wireframes were passed to me for the UI design phase.
Various desktop and mobile wireframes
UI Design.
Moving into the UI phase, I immersed myself in the competitor research gathered during the UX phase, analysing common design patterns, fonts, shapes, and styling across the esports industry to inform a contemporary, game-oriented aesthetic. The UI needed to appeal authentically to esports audiences whilst maintaining Pinnacle's standards.
As a subsidiary product, the Hub had the flexibility to tailor its branding to the esports demographic rather than adhering strictly to the Sportsbook's aesthetic. A primary purple colour was introduced to distinguish the Hub, whilst a dark colour scheme anchored the theme throughout. Gradients were applied across tabs and container borders to add depth and highlight key information, and a new typeface was integrated to further reinforce the aesthetic, ensuring legibility across all screen sizes. Game logos were introduced to add vibrancy and context, and hexagonal shapes, prevalent across the esports industry, were applied to game line components to reflect the head-to-head nature of competitive matchups and double as directional signposting across the site. Blurred container backgrounds were used to create sufficient contrast between content and imagery to maintain accessibility standards, whilst on mobile, neutral background tones were adopted to reduce visual noise and ensure legibility at smaller sizes. A consistent visual hierarchy was designed with the intention of guiding users through each page.
Building on these foundations, I developed a component library of reusable elements including colour palettes, icons, game line components, CTAs, imagery, and team and game logos. This ensured consistency across the large volume of screens involved and significantly improved workflow efficiency.
The Inventory was redesigned as a comprehensive content hub within the Esports Hub, distinguished by its own blue primary colour to clearly separate it from the main betting areas, whilst maintaining stylistic continuity through consistent use of gradients, iconography, and design treatments. Structured across Feed, News, and Directory sections, it featured a variety of article card formats displaying imagery, titles, content categories, author details, sharing capabilities, and article preview text, alongside a featured article carousel, a podcast section, a popular content sidebar, and social media integration. The result was an immersive editorial experience designed to educate and engage esports bettors, surfacing content around upcoming tournaments, leagues, and teams whilst keeping them within the Pinnacle ecosystem.
Working closely with the Graphic Design Team, imagery guidelines were established across screen sizes, defining focal points, dimensions, and bleed areas to ensure visual cohesion across all resolutions. Milestone reviews with the creative teams allowed for critique, iterative refinement, and Q&A at key stages, before the full UI was presented to the wider stakeholder group. Following a thorough Q&A session and final amendments, the designs received sign-off and moved into the development phase.
Development.
With sign-off confirmed, I set up a handover meeting with the Development Team, walking them through the UI to help define the system architecture, data relationships, and mechanics required to build the Hub. All designs and assets including icons, fonts, and logos were prepared and uploaded to Zeplin, allowing the Development Team to inspect front-end properties and reference assets directly. Supporting documentation was also provided covering the behaviours and states of key elements including bet slip validation, CTA and input states, odds selection, game menu behaviour, live streaming interactions, amongst others, giving the team everything needed to build the Hub accurately and efficiently.
Throughout development, I remained flexible across my workload, balancing concurrent Pinnacle projects whilst ensuring the Development Team had the support they needed to progress confidently. This included answering questions, clarifying logic, and providing any additional assets required. Where possible, UI reviews were conducted to ensure parity between the designs and the developed product, with any discrepancies communicated to the Development Team for resolution. Once development was complete, staging links were passed to the Testing Team to log bugs and verify functionality across user journeys, before the Hub received QA sign-off and was cleared for launch.
Post-Launch Performance.
Following launch, a promotional video produced by the Graphic Design Team and shared by the Content Team across Pinnacle's social channels helped drive awareness and traffic to the newly launched Hub. The Inventory was subsequently introduced in a later phase, replacing the original esports blog and completing the full vision for the redesigned product.
Whilst specific post-launch metrics were not directly available, ongoing optimisation of the Hub depended on continuous analysis of user data and site analytics to ensure it evolved into an increasingly usable and user-centred product. A/B testing of redesigned flows and accessibility enhancements would have provided valuable insight into the impact of any future iterations against the original designs, helping to guide improvements and ensure the Esports Hub continued to deliver an authentic and engaging experience for its users.