Betbook – Sportsbook

A personal project focusing on the UI design for a sportsbook, integrating a versatile design system featuring both light and dark themes. The aim is to provide users with a dynamic and visually appealing interface, enhancing their overall experience on the platform.

Betbook cover


During my impactful role at FSB Tech, a leading B2B sportsbook provider, I served as a key contributor, responsible for the construction and upkeep of a comprehensive design system. This entailed the design and ongoing maintenance of all interfaces (responsive and native apps) for prominent clients such as Fitzdares, Quinnbet, Supersports, and Powerplay. The challenge was to ensure a uniform and polished appearance across all sportsbooks while allowing for individual theming preferences.

Inspired by the depth of this experience, I delved into a side project dedicated to crafting my unique sportsbook. This endeavor involved a harmonious blend of creativity and functionality, aiming to deliver a distinctly personalized touch to the user experience.

Figma Design System

I developed a design system in Figma that incorporates both light and dark themes, leveraging the power of auto-layout for enhanced flexibility and efficiency.

Betbook colours
Typography 1

Feature Focus – Horse Racing

In my research, I extensively analyzed various competitors to understand how they approached the racing card. The primary goal was to ensure user-friendly navigation, allowing users to effortlessly switch between event start times and swiftly navigate to different race locations. While most competitors opted for tabs displaying start times, I opted for a more space-efficient solution—a dropdown breadcrumb. This not only conserves space but also facilitates quick navigation between pages.

Recognizing the challenge of displaying ample information within limited space, I made the decision to organize prices into tabs rather than compressing them into a single line. To draw attention to the ‘Extra Places’ indicator, ensuring its visibility, I implemented a design that ensures it stands out prominently when displayed.

Additionally, beneath the main horse and jockey information, I introduced a button to reveal more details. Users also have the flexibility to sort the list based on price or number, enhancing their overall experience and engagement with the platform.

Betbook race 1
Betbook race 2
Betbook race 3

The Betslips

By default the betslip opens in ‘Acca’ view in the UK when more than 1 bet is added. Users can then change the tab to ‘Singles’ if they want want to place single bets.

Betbook race betslip 1
Betbook race betslip 2

User Interface

I crafted diverse screens in both light and dark modes, catering to both UK and US sports markets. Additionally, I designed bet slips that adeptly captured the nuances distinguishing UK/European sports from their US counterparts.

Betbook home light
Betbook home dark
Betbook horses light
Betbook markets light
Betbook betslip dark
Betslip (UK) Single Logged In
Betslip (UK) Single Logged In
Betslip (US) Single Logged In
Betslip (US) Round Robin Logged In
To discuss more or ask any questions, please get in touch.