Sportsbook · Mobile-only · Live betting UX
STN Sports
STN Sports is a mobile sportsbook designed for fast decisions in data-heavy, real-time contexts. The focus of this work was improving clarity across core betting journeys, from scanning markets to managing selections in the bet slip while establishing a scalable design system for future features.
- Mobile UX/UI
- Live states
- Interaction design
- Design systems
The Challenge
Sports betting interfaces operate under a unique constraint: users must scan dense information, interpret changing states and act quickly — often while events unfold live. Over time, core journeys within STN Sports had become inconsistent, with interaction patterns varying across markets and behaviours that were not always predictable.
- Reduce visual noise while keeping essential info visible
- Make selection states obvious (selected, suspended, price changes)
- Keep the bet slip predictable and confidence-building
- Ensure patterns scale across sports and edge cases
Overview Wireframes
Before moving into visual design, I mapped core mobile journeys and key interaction states using mid-fidelity wireframes. The focus was on information hierarchy, scanability and predictable bet slip behaviour across both pre-match and live betting contexts.
- Events → Markets: fast scanning supported by a clear, consistent hierarchy
- Selection states: selected, removed, suspended and price movement feedback
- Bet slip: clear stake entry, validation and primary action emphasis
- My Bets: unambiguous bet status and post-bet visibility
What I Delivered
A mobile-first set of core journeys and reusable interaction patterns designed to improve consistency, scanability and user confidence across the sportsbook experience.
Core journeys
- Browse events and markets
- Select outcomes and manage selections
- Bet slip review and stake entry
- Clear placement feedback and interaction states
Patterns & system
- Reusable components with consistent spacing and typography
- State logic for selected, suspended and price movement scenarios
- Handoff-ready UX documentation covering flows and edge cases
Key Design Decisions
The work prioritised clarity under pressure — refining information hierarchy, standardising interaction states and creating patterns that scale across sports and market types.
- Clear grouping and spacing to support rapid scanning
- Consistent layouts across sports to minimise re-learning
- Interaction states designed for instant recognition
Bet Slip Behaviour
The bet slip is where user confidence is most critical. The UI and interaction behaviour were designed to keep selection states obvious, reduce the likelihood of errors and make the next action (editing stake or placing a bet) immediately visible.
- Selection state clarity: selected, removed, suspended
- Dynamic feedback: clear visibility of price movement and market changes
- Edge cases considered early: limits, validation and invalid selections
Wireframe → Final
A snapshot of how the bet slip evolved from early structural exploration into the final UI.
Wireframe Focus
- Structure and hierarchy designed for rapid scanning
- Clear state handling and early error prevention
- Primary CTA prominence and interaction flow
Final UI Outcomes
- Cleaner visual hierarchy and improved spacing
- Predictable interactions and clear feedback
- Reusable patterns aligned with system rule
Live Betting
Live betting screens illustrating how core journeys connect and function together in live mobile contexts.
Result
A clearer, more consistent mobile sportsbook experience built for fast decision-making. Improvements to hierarchy, scanability and interaction predictability established reusable patterns that support faster, more confident feature delivery.
Metrics and partner-specific outcomes can be discussed in interview due to confidentiality.