Esports Hub

TL;DR / Summary.

Pinnacle’s Esports Hub was redesigned to shift from a brochure-style page to a fully functional betting platform. After UX analysis, competitor research and persona development, we created mobile-first wireframes aligned with Sportsbook structure but tailored to esports needs. I developed a complete esports-focused UI system featuring new branding, components, imagery guidelines and thematic design patterns. Following stakeholder approval, the UI was handed to Development with detailed documentation. After testing, the Hub launched, with further improvements planned through analytics, front-end reviews and A/B testing to ensure ongoing optimisation and an authentic esports experience.

The Brief.

Pinnacle, a leading esports betting provider, had an early advantage in the market but its existing Esports Hub had grown outdated. Originally acting as a catch-all repository, news, odds, schedules and support, it felt more like a brochure than a functional betting platform. A redesign was commissioned to:

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

Stakeholders outlined the project scope, goals and timelines, after which the UX Team and Content Team began analysing the current Hub, reviewing competitors and defining the foundations for the redesign.

Early iteration of the Esports Hub

User Experience.

The UX team evaluated the existing Hub alongside available user data to understand current behaviours, pain points and opportunities. To emphasise betting and feature more markets, we adopted a structure aligned with the Sportsbook so users could move seamlessly between products.

Insights from both qualitative and quantitative Sportsbook data, combined with input from the Esports Team, revealed user motivations and needs specific to esports betting. Competitor analysis helped us define typical user flows and information hierarchy, and later served as a visual reference for UI theming. Because esports bettors differ from traditional Sportsbook users, we created tailored personas to guide decisions.

Using the Sportsbook as a structural blueprint, we positioned shared elements such as menus, bet slip and game lines, while designing Hub-specific components such as scoreboard states, live streaming, results and “The Inventory” (the esports content repository). Wireframes for both mobile and desktop were created to account for multiple page types, information states and system behaviours.

Although full usability testing would have helped validate flow intuitiveness and task efficiency, time constraints meant we relied on detailed internal reviews and cross-team discussions. After revisions, the final wireframes were approved by stakeholders and passed to me for UI design.

Various desktop and mobile wireframes

UI Conceptualisation.

The UI needed to appeal to esports audiences while maintaining Pinnacle’s standards. Drawing from competitor research, I analysed common design patterns, fonts, shapes, styling, and used this to inform a contemporary, game-oriented aesthetic aimed at improving retention.

I began by assessing the wireframes and building a design system of reusable components: colour palettes, icons, gaming lines, CTAs, imagery and team/game logos. This significantly improved workflow efficiency and ensured consistency across the large volume of screens.

Because the Hub was a subsidiary product, we had flexibility to tailor the branding to esports users. A purple colour identity was introduced to distinguish the Hub, complementing Pinnacle’s core orange and green states. A dark colour scheme anchored the esports theme, while accessibility considerations guided typography, colour contrast and information hierarchy.

Gradients were used to add depth, and a new typeface reinforced the esports aesthetic. Game logos and hexagonal visual motifs, common in esports branding, were used in game lines and “more markets” components to communicate competitive matchups. Blurred container backgrounds helped separate content from imagery, while mobile layouts used neutral tones to improve legibility.

Working with the Graphic Design Team, we established guidelines for imagery across screen sizes, defining focal points, dimensions and bleed. Iterations were reviewed collaboratively to ensure visual cohesion across all resolutions.

“The Inventory” was redesigned as a dedicated content section with its own primary colour and tailored article cards featuring images, categories, share options and previews. While visually distinct from betting areas, it maintained stylistic continuity through gradients and iconography.

Throughout the UI phase, milestone reviews with creative teams allowed for critique, Q&A, and iterative refinement. Once internal teams were satisfied, I presented the full UI to stakeholders. After addressing final amendments, the designs were approved and handed over to Development.

Development.

During handover, I walked the Development Team through the UI to help define architecture, data relationships and required mechanics. All assets; icons, fonts, logos, and documentation of element behaviours (e.g., bet slip validation, CTAs, odds selection, input states, menu behaviour) were provided.

Throughout development, I remained available to clarify logic, provide additional assets or resolve ambiguities. Once development reached completion, staging links were passed to the Testing Team to log bugs. The Hub was launched after QA sign-off, with “The Inventory” deferred to a later phase and the original esports blog maintained temporarily.

Post Production.

To support launch awareness, the Graphics Team produced a promotional video shared across Pinnacle’s social channels, helping drive traffic. Ongoing optimisation depended on continuous analysis of user data and site analytics to ensure the Hub evolved into an increasingly usable, user-centred product.

Future improvements included conducting a front-end review to ensure visual and functional consistency between design files and the live site, as well as A/B testing redesigned flows or accessibility enhancements to measure their impact against original versions. As the Hub matured and improvements were introduced, the goal was to maintain an authentic esports experience and strengthen user engagement over time.