Maintaining FSB Nest 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.
Dynamic Breadcrumbs
Developed a new React component for FSB clients known as the Dynamic Breadcrumb. This component allows users to backtrack or switch between Categories and Subcategories smoothly, helping them navigate the sportsbook more easily.
This new feature is especially useful for punters exploring various betting options. It makes it simpler to move through sports, leagues, matches, and featured events, ensuring quick access to different areas. The new dynamic breadcrumb sportsbook navigation, helping clients to increase retention.
Past Insights
Working on FSB Tech's design system Nest has taught us a lot about growth and flexibility. At first, we thought success meant how fast we could make screen mockups for client proposals. But after a few years, we saw that the real challenge was making our system flexible enough for different clients around the world. We needed to adapt to various cultures and rules while keeping things consistent. This balance of flexibility and consistency became the true test of how well our design system worked.
As Nest grew, we faced new challenges. We had too many UI files, frequent changes, and different gambling regulations across the globe. The huge number of components, variations, and customisations began to make our system less effective and harder to manage. We weren't alone in this; we noticed that many others in the design world were starting to focus more on simplifying their systems rather than just adding more variants.
We also learned how important it is for designers and developers to work closely together. Often, what we made in Figma didn't match the final product exactly. This gap caused issues - we'd show a client one design, but their live website looked a bit different. Even now, bridging this gap between product design and development remains a constant effort and challenge. It's an ongoing process that requires regular communication and collaboration to keep our designs and final products aligned.