Maintaining Nest Design System

FSB Tech Design System

FSB Tech is a B2B provider offering a platform for building and customising betting products. The company provides a range of offerings, including casinos, iGaming, retail, and sportsbook solutions. I was responsible for designing UI screens and refining our existing design system to ensure our designs aligned with the overall product strategy.

My role focused on developing and enhancing the visual and interactive elements of the user experience, while maintaining consistency and scalability across our product range and platforms.

Our team was responsible for creating the FSB Nest Design System, which we use to build websites and apps for our clients. This design system adopts a centralised file to house the components and utilises Figma Variables to customise pages for our clients, ensuring both consistency and flexibility in our designs.

UI Handoff Diagram

UI Handoff

Definitive file for design approval and asset delivery to our front-end team. Contains page layouts with components from our main library and client-specific customised versions.

Customization Diagram

Customization

Adaptable colour palettes to align with client branding. Custom components to address specific needs, such as localised payment methods or bespoke user flows tailored to unique business processes.

Common Components Diagram

Common Components

Library that includes reusable building blocks that make up the pages and experiences we design for our clients. Forms, nav bars, headers and any other element across FSB apps.

Semantic Diagram

Semantic

Guidelines for design token usage within the FSB Design System. Conveys meaning and purpose for each element.

Primitives Diagram

Primitives

Base colours, size, gaps, space, font-family, text styles, shadows, elevation and border radius

FSB Tech Design System Interface
FSB Tech Design System Implementation

Companion App

Product allows players to transfer bets placed within anonymous retail environments onto a digital wallet app via their smartphone with the ability to track it and cash it out at any time. The wager can also be transferred back to retail via a unique QR code.

FSB Companion App
FSB Social Account Login

Signing up with social account

Experience a simplified registration process by typing in your email address and password or signing up immediately with your social account.

FSB Others

Past Insights

Working on FSB Tech's design system Nest showed us important lessons about design. We learned that success is not about speed of creating mockups, but about making a system that works for clients worldwide. This meant adapting to different cultures and rules while keeping design consistent across markets and understanding the unique needs of various regions.

As Nest developed, we faced challenges with complex UI files, frequent changes, and diverse gambling regulations. We discovered that designers and developers must work closely together. Often, the design in Figma did not match the final website, revealing a critical gap in our process. Bridging this gap requires constant communication and collaboration to ensure what we design matches what users ultimately see and experience.