Optimized the core betting experience with improved
betting speed, and easier tracking of active bets.
Betslip - Sportsbook
Core Betting Flow
Role:
Lead Designer
Period:
06.2024-12.2024
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.
Project Summary
Component Library
A multi-tiered library designed for scale. We separated 'Base Components' (logic)
from 'Brand Themes' (styling), ensuring that core UX improvements propagate
instantly to all clients, while visual customisation remains isolated and safe.
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.
Original Interface
Redesign
Key Issues:
Outdated UI and low contrast.
Improvements:
Dense and poorly organised information.
Adding "quality of life" improvements:
- Added default bet & "MAX" button to improve speed.
- "Clear All" button made more convenient.
Missing key "quality of life features" making the
betting experience slow and frustrating.
Unclear and confusing data elements.
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.
First to Bet, First to Win
Another point of friction was the number 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.
Before:
The user had to click to open the "Betslip" drawer to interact with their wager.
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 braking the intuitive flow of traditional betting. By allowing
these distinct betting styles to coexist in a single view, we significantly reduced
cognitive load and betbuilder interuptions.
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
Sport Promotion Boost Increase in Betslip
Bet Builder Statistics Update
Winnings Change on Odds Update
PLACE BET
Possible Winnings
€24.00
€27.23
Real Time Score Update in "My Bets"
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 transformed into a high-clarity dashboard that features real-time score
updates and clear event status, reducing the friction in post-bet monitoring.
Original Interface
Redesign
Key Issues:
Visual clutter & low contrast.
Improvements:
Ambiguous & confusing sport promotion icons.
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.
Poor information hierarchy.
Unrecognisable "Bet Builder" feature.
"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.
Key Results:
This architecture reduced onboarding costs and eliminated design debt, allowing us to create 30+ themes and support 15+ live clients with unique branding.
Impact & Result
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 a the scalable white label system that we work with, allowed us to successfully deploy high-performance, real-time betting solutions to 15+ international clients.
Next Project
Unified Bonus &
Gamification Hub
Unified all bonus mechanisms, enabling marketing
team to deliver engaging campaigns with
minimal friction.
Focus:
Modularity
Behavioral Design
Customer Retention