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.
Goal
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.
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.
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.
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.
