Elevating Sports Betting

UX/UI Design for a Seamless Casino Sportsbook Integration

Role

Lead Designer
UI Design
UX Design Contributor

Client

World Entertainment

Duration

3 weeks

Team Size

Lead Designer (My Role)
Art Director (Advisory Role)
Project Manager
Designer/Collaborator

Reward of Sigma Asia, online casino of the year 2023

OverView

As the UI Design Lead for the Sports Book Mode feature, I was responsible for designing a new add-on for an online casino platform. The goal was to create an engaging and seamless sports betting experience, integrating this feature into an already established product while maintaining consistency with the overall design language.

01
Listen & Define Project

Our first step was engaging in a detailed interview with the client, who had a pre-conceived UI draft for the Sports Book Mode. They believed it adhered to UX principles, but the design clashed with the platform’s existing system. It was critical to understand their vision and business goals, which guided us in creating a balanced solution.

Stakeholder Input

The project’s research phase primarily revolved around input from internal stakeholders, including product managers, marketing teams, and the client. As there was limited direct user research conducted, we relied heavily on these discussions to shape the design direction.

Meeting note overview of WE sportbook development

The client presented an initial UI draft that they claimed was based on UX research. However, this design didn’t align with the existing system and style guide, which led to initial confusion.

Key Insight

Simplicity & Accessibility: The design needs to be simple and intuitive, ensuring both new and experienced users can navigate easily. Keep player engage and excited all the time.

Urgency for Launch: There was significant pressure to publish the feature quickly to capitalize on market trends and promote new betting options. This limited our ability to iterate as much as we would have liked.

Design Flexibility: The client’s marketing team expressed that the feature should be “visually distinct” from other platform modes, appealing to a broad range of players (from novices to seasoned bettors). However, they also wanted the feature to be accessible and straightforward for first-time sports bettors.

02
Refine Design Direction

Internal Team Discussion

We held an internal meeting to align on the design direction. Our primary concern was maintaining consistency with the existing casino platform design system, which had proven successful with players. The team agreed that adhering to this system was key for smooth adoption, but we also respected the client’s desire to differentiate the sports betting mode.

Design Direction

System Consistency: Emphasized the importance of maintaining consistency with the platform’s existing design system, particularly for typography, button styles, and color schemes.

User-Centric Flow: Ensure the flow of the interface allows users to easily access key actions, like placing bets, without distractions. This includes minimizing clutter and prioritizing usability for both experienced and casual bettors.

Direct & Engaging Interface: Focus on streamlining the interface by removing unnecessary features, ensuring the live stream or betting activity remains the focal point. The goal is to keep the user experience clear, direct, and engaging without overwhelming the screen.

Responsive Design: The design needs to function seamlessly across both mobile and desktop platforms, with slight variations to accommodate device-specific needs while maintaining a consistent user experience.

03
Market Trends & Competitor Insights

We conducted a quick market analysis to explore competitors and industry standards. Most major online casinos integrated sports betting in a streamlined, intuitive manner.

Key Takeaways

Real-Time Features Are Essential: Platforms like Bet365 and SBOBET highlight the importance of live-streaming, real-time odds updates, and instant bet confirmations for user engagement in live gambling.

Streamlined UI for Live Interactions: Overwhelming interfaces like those of 1xBet demonstrate the need for a simple, engaging layout to support quick decision-making during live bets.

Balancing Advanced Features with Simplicity: Combining dynamic, real-time capabilities with an accessible design ensures a broader audience, from experienced gamblers to casual players.

04
Design Process

Given the time constraints, we proceeded directly with high-fidelity designs, leveraging the existing design system for consistency. This approach allowed us to quickly integrate the Sportsbook Mode into the platform, focusing on delivering a seamless live betting experience.

We developed two versions for the desktop design:

Client's Requested Version

This design followed the client’s initial brief exactly, with all features they suggested.

Optimized Version (Our Proposal)

Design A - Following UI design of the client

Based on our research and understanding of the platform’s needs, we proposed a version that streamlined the interface, cutting unnecessary elements and improving the user flow for live betting.

After presenting both versions to the client for review, they expressed preference for our Optimized Version, but with certain elements from the client’s version mixed in.

Major Feedback

Enlarged Live Stream View: To enhance the user experience, combine our streamlined interface with the client’s request for a larger live stream view.
Allows players to enjoy the game play in an optimized, more immersive way.

Wording Alignment: We updated the terminology to align with the client’s latest term document, ensuring consistency across the platform.

Default Game Filter: Add default game filter, recommending popular or active games to users based on current betting trends, improving ease of access and increasing user engagement.

With these minor adjustments, the direction was confirmed as solid. We can now proceed confidently with the full version of the design, incorporating these refinements for a streamlined, intuitive, and engaging live gambling experience.

05
Final Design

With limited time, we skipped traditional low-fidelity wireframes and proceeded directly to Hi-Fi design.

UI review - Monitor all the games on same page, never miss a chance

UI review - Makes bet easy with side-in section

UI review - Provide player with odds review and analysis

Key Features

Customizable Live Stream Experience

- The live stream tab can be toggled on/off from any page, allowing users to control screen space.
- A login is required to access live stream functionality.
- If low bandwidth or device performance is an issue, users can switch to a graphic live mode for smoother gameplay.

Comprehensive Game Overview with Filters

The overview page displays all available games, with filters for game time, league, and specific teams, making it easier to find and follow preferred events.
This ensures a user-friendly navigation and smooth discovery of live betting opportunities.

Simplified Betting Process with Auto-Odds

Betting is streamlined and easy to place, with an auto-odds feature that maximizes the player's gain. Players simply select their odds, input the bet amount, and confirm, offering an intuitive, fast experience.

Efficient Bet History Management

All placed bets are neatly organized and accessible in the bet history, with filter options for easy tracking and analysis of previous wagers, enhancing the overall user experience and keeping the interface clean.

Conclusion

The Sports Book Mode project was a challenging yet rewarding experience that underscored the complexities of balancing stakeholder expectations, design system consistency, and user needs. Despite the constraints, the launch expanded the platform’s offerings and provided valuable insights for future improvements. This project reinforced my commitment to advocating for user-centric design while navigating real-world challenges in collaboration and execution.

Follow up

My Key Learnings

Reflecting on this project, I learned that working with clients who resist professional recommendations requires patience and clear communication. I found that explaining design choices with data and user research helps bridge the gap. By offering compromises and demonstrating how my solutions align with their goals, I could maintain both quality and collaboration. This experience will help me be more proactive in managing client expectations and fostering trust in future projects.