top of page

Betting resources

Back to U.I. Design

TL;DR / Summary.
​

Betting Resources needed a full redesign to modernise the experience, improve mobile usability, strengthen SEO and highlight multimedia content. After UX analysis, competitor research and wireframing, I developed a modular, mobile-first UI using an atomic design system. A stakeholder-approved “Frankenstein” concept combined the strongest elements from several design themes. Over 200 screens were created, reviewed in sprints and refined through collaboration. After UI sign-off, I supported development with assets, interaction specs and ongoing guidance. Post-launch, ongoing testing and analytics will drive iterative improvements to ensure the repository remains intuitive, engaging and aligned with user needs.

The Brief.
​

Betting Resources was Pinnacle’s content hub within the Sportsbook, hosting articles, videos and podcasts designed to educate users and support better betting decisions. However, its usability, navigation and overall structure needed major improvement. During the kick-off, business and user requirements were defined. The redesign needed to:
 

  • Improve mobile optimisation and SEO

  • Enhance usability and navigation across categories

  • Showcase diverse content types (video, podcast, articles)

  • Make banner space functional for content promotion and acquisition

  • Introduce personalisation

  • Create a modern, dynamic, clean interface without clutter
     

Since many visitors arrive via search engines, the redesign had to serve both returning Sportsbook users (aligned with existing personas) and new users who land directly on an article. Once aligned on goals, the project moved into usability analysis and UX exploration.

User Experience.

​

The UX Team carried out competitor analysis, reviewed current usability issues and examined quantitative and qualitative data to understand user behaviour and pain points. Working collaboratively, we reviewed findings, discussed ideas and refined testing scenarios. A stakeholder word map revealed the desired direction: “dynamic,” “modern,” “clean” and “light.”

​

Mobile-first wireframes were created to ensure scalability and structural consistency across devices. Annotated flows clarified intended functionality, which I later reflected in UI prototypes. A review session surfaced constructive questions about hierarchy, flow and layout choices, leading to targeted revisions.

​

Ideally, thorough usability testing with both Pinnacle and non-Pinnacle users would have validated the wireframes and provided insights on satisfaction, pain points and flow effectiveness. Due to time and resource constraints, the full user testing phase wasn’t implemented, but the wireframes progressed to the UI stage.

bettingResources_desktop_home_wireframe.png
bettingResources_mobile_home_wireframes_2x.png
bettingResources_desktop_videos_wireframe.png
bettingResources_mobile_episodes_wireframes_2x.png
bettingResources_desktop_article_wireframe.png
bettingResources_mobile_article_wireframes_2x.png
bettingResources_desktop_predictions_wireframe.png
bettingResources_mobile_predictions_wireframes_2x.png

UI Conceptualisation.

​

I began with a mood board to define the creative direction and align with project goals. Considering the dynamic nature of content and the need to support multiple languages, I explored a wide range of concepts; from safe and on-brand to more experimental, focusing on strong content presentation.

​

Building from a mobile-first foundation, I tested gradients, image-content layouts, icon positions, dark-mode accents and container-card patterns. These experiments evolved into four distinct design themes (wireframe-driven, image-heavy, neumorphic, and minimal/open), which I presented to stakeholders. Their preferred elements were merged into a single approved “Frankenstein” direction that formed the basis for the rest of the redesign.

bettingResources_mobile_traditional_2x.png
bettingResources_mobile_imagery_2x.png
bettingResources_mobile_neumorphic_2x.png
bettingResources_mobile_open_2x.png

Using an atomic design approach, I created a scalable component system: atoms (core visual elements), molecules (container cards), and organisms (page sections). This ensured consistency, reusability and easier development.

​

Container cards were designed to adapt to varying content volumes and accommodate multiple languages. Special card types, such as “Predictions,” featuring betting data, and “Spotlight,” offering personalised article recommendations, helped meet project requirements. Accessibility influenced colour contrast, typography and information hierarchy throughout the interface.

​

To manage the large scope (200+ designs), I divided the work into sprints, presenting each batch to internal teams for feedback before sharing with stakeholders. As the project evolved and staff changes occurred, I took on the responsibility of onboarding new team members, explaining functionality and documenting decisions to maintain clarity and continuity.

bettingResources_desktop_home_1.png
bettingResources_desktop_home_2.png
bettingResources_desktop_casino.png
bettingResources_desktop_videos 2.png
bettingResources_desktop_episodes.png
bettingResources_desktop_videos.png
bettingResources_desktop_predictions.png
bettingResources_desktop_calculator.png
bettingResources_desktop_author.png
bettingResources_mobile_home_1_2x.png
bettingResources_mobile_home_2_2x.png
bettingResources_mobile_home_4_2x.png
bettingResources_mobile_home_6_2x.png
bettingResources_mobile_casino_2x.png
bettingResources_mobile_videos_2x.png
bettingResources_mobile_episodes_2x.png
bettingResources_mobile_videosArticle_2x.png
bettingResources_mobile_predictions_2x.png
bettingResources_mobile_calculator_2x.png
bettingResources_mobile_calc2_2x.png
bettingResources_mobile_author_2x.png

Development.

​

After final UI approval, the project moved into development. I provided a high-level breakdown of the modular system, including atomic components, container card specifications, interaction behaviour, hover states, filters, gestures, notifications, predictive search and micro-animation prototypes. All necessary icons and assets were delivered to the Dev Team.

​

As development progressed, I supported the team by clarifying behaviour, supplying additional assets and collaborating with the Content Team on localisation requirements. The modular approach simplified asset creation and reduced workload for other teams. Weekly meetings were used to track progress, address blockers and prioritise bugs.

Post Production.

​

Once development was complete, a testing environment would be created for all teams to review functionality and identify required UI/UX refinements. After launch, user feedback, analytics and usability testing would guide iteration. A/B testing would be used to validate improvements and measure impact on navigation, engagement and content consumption.

​

Ongoing optimisation would rely on close collaboration with the Analytics Team to understand evolving user needs and ensure Betting Resources continued to deliver a useful, usable and scalable experience.

bottom of page