Back

Betslip - Sportsbook
Core Betting Flow

Optimised the core betting experience: faster bet placement and easier tracking of active bets.

Role
Lead Designer(hands-on)
Timeline
Jun – Dec 2024
Scope
BetslipBet BuilderMy Bets
Team
Time to place a live bet, down from 8 secondsTime to bet (was 8s)
3s
More in-play bets
completedIn-play bets completed
~20%
Increase in Bet Builders
placedMore Bet Builders placed
~10%

Project Summary

Redesigned the Betslip and My Bets sections to help users place bets faster and track their bets with minimal complexity. The goal was to reduce friction and the actions needed for placing a single bet and improve the readability of the "My Bets" feature so players can easily check the status of their bets and the events within them.

Betslip - The Challenge

The original Betslip was cluttered and slow. Players struggled using it and clearly understanding all the present data, leading to frustration and abandoned bets.

Key Issues:

  • Missing key "quality of life features" making the betting experience slow and frustrating.
  • Unclear and confusing data elements.
  • Dense and poorly organised information.
  • Outdated UI and low contrast.

Original Interface

Improvements:

  • Adding "quality of life" improvements:
    - Added default bet & "MAX" button to improve speed.
    - "Clear All" button made more convenient.
  • Reducing unclear and confusing data:
    - Replaced confusing icons with clear text labels for the sport promotions.
    - Live Events also display current time of the event and do not truncate team names.
  • Fixing the informational architecture and organisation:
    - Better arrangement & easier readability of text and functional elements.
    - Easier-to-scan content with clear hierarchy.
  • UI and accessibility improvements:
    - Higher contrast between elements & clearer definition of event cards.
    - Better contrast between the CTA button making it a true focal point. - Improved and modernised visual design.

Redesign

First to Bet, First to Win

Another point of friction was the number of clicks a player needed to make to place a quick single wager.
By swapping the hidden drawer for an instant card, we reduced friction. This eliminates menu management, keeping players focused on the game and enabling instant decisions for live events.

The user had to click to open the "Betslip" drawer to interact with their wager.

Before:

After:

A context-aware card appears instantly. Player can hit "Place Bet" without ever opening the full menu or even entering a stake.

Bet Builder - The Money Maker

A highly sought after feature, the Bet Builder allows players to craft custom, high-risk wagers from a single event, for bigger payouts. With high profit margins this doubled as the "profit-engine" of the sportsbook and turned into a true focal point of the sportsbook product.

Builder Journey

We designed the interface to feel like a "builder" rather than a static form, providing a clear structure for complex operations. By using a node-based aesthetic, we transformed abstract selections into a tangible, additive journey. This layout ensures that even as the bet grows in complexity, the user maintains a clear sense of progress and hierarchy.

Seamless Betting Flow

To maintain high-speed usability, we placed "Single" selections immediately below the active builder. This hierarchy ensures that power users can craft complex bets without breaking the intuitive flow of traditional betting. By allowing these distinct betting styles to coexist in a single view, we significantly reduced cognitive load and Bet Builder interruptions.

Post Bet Live Tracking

The post-placement view prioritises legibility and immediate data retrieval. We consolidated the custom build into a single card that provides a live overview of the bet’s current state. By integrating real-time match tracking alongside the selection nodes, we added substantial value for users who monitor their bets closely.

Motion Cues for Smoother Experience

In data-dense projects, motion should be a functional tool rather than just "eye candy." We utilised subtle, balanced signals to keep the interface feeling "live" and responsive - mirroring the fast-paced nature of the events players bet on.

Cues were intentionally kept very lightweight to ensure we don't compromise readability and usability on lower-end devices.

Contextual Info Message in Betslip

Winnings Change on Odds Update

PLACE BET

Possible Winnings

€24.00

€27.23

Real Time Score Update in "My Bets"

Sport Promotion Boost Increase in Betslip

Bet Builder Statistics Update

Loader

Motion Cues for Smoother Experience

In data-dense projects, motion should be a functional tool rather than just "eye candy." We utilised subtle, balanced signals to keep the interface feeling "live" and responsive - mirroring the fast-paced nature of the events players bet on.

Cues were intentionally kept very lightweight to ensure we don't compromise readability and usability on lower-end devices.

Contextual Info Message in Betslip

Winnings Change on Odds Update

PLACE BET

Possible Winnings

€24.00

€27.23

Real Time Score Update in "My Bets"

Sport Promotion Boost Increase in Betslip

Bet Builder Statistics Update

Loader

My Bets - The Afterparty

Often overlooked as part of the customer journey, "My Bets" suffered from low contrast and dense, hardly readable data. By restructuring the information architecture, it became into a high-clarity dashboard that features real-time score updates and clear event status, reducing the friction in post-bet monitoring.

Key Issues:

  • Poor information hierarchy.
  • Unrecognisable "Bet Builder" feature.
  • Ambiguous & confusing sport promotion icons.
  • Visual clutter & low contrast.

Original Interface

Improvements:

  • Improved information hierarchy:
    - Consolidated technical data about the bet in the betslip header / type, ID, date of placement /
    - Clearer text hierarchy and enhanced Live Bet visibility.
  • "Bet Builder" made more prominent and recognisable:
    - Previously, when closed, the "Bet Builder" feature was hidden as a normal single bet - we made it more prominent and easily findable.
  • Fixing sport promotion clarity:
    - Replaced confusing icons with clear text labels for the sport promotions.
  • UI and accessibility improvements:
    - Higher contrast between elements & clearer definition of event cards.
    - Better contrast between the CTA button making it a true focal point.

Redesign

Impact & Result

Key Results:

  • Bet Placement Time : Reduced average time-to-bet from 8 seconds to 3 seconds for live events through the 'Instant Card' implementation.
  • In-Play Conversion Rate: Increased in-play bet completion by ~20% by reducing the clicks required to place a single wager.
  • Increase Session Length: Increased post-bet session engagement by integrating real-time match tracking and statistics directly into the 'My Bets' panel.

By focusing on information architecture and reducing friction, we achieved faster bet-placement speed, higher engagement and longer user sessions. These UX optimisations, combined with the scalable white label system that we work with, allowed us to successfully deploy high-performance, real-time betting solutions to 15+ international clients.