Maintaining FSB Design System
- FSB Tech builds betting platforms for businesses
- Working as a product designer, I created UI screens and contributed to developing the FSB Design System. This system is a white-label B2B product built using design tokens (Figma variables) and React components. The company offers solutions in casino, iGaming, retail, and sportsbook to B2B clients.
- Consistency across digital products
- I focused on visual and interactive elements that work across different platforms. This included making sure the betting products provided the same experience, whether used on mobile (iOS, Android) or desktop (MacOS, Windows, Linux, etc).
- Product strategy drives design decisions
- My work aligned interface design with business goals. I refined existing components and created new screens that supported the company's range of betting solutions.
Nest FSB Design System
A centralised library to house the components and utilises Design Tokens from Figma Variables to customise pages for our clients, ensuring both consistency and flexibility in our designs.
- Primitives
- Base colours, size, gaps, space, font-family, text styles, shadows, elevation and border radius
- Semantic
- Collection for design token usage within the design system. Conveys meaning and purpose for each component. Linked to the Primitive levels (colours, typography, spacing etc)
- Common components
- Library that includes reusable building blocks that make up the pages we design for clients. Forms, nav bars, headers and any other element across FSB apps.
- 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.
Sportsbook
A template to supports different betting platforms across multiple regions.
- Input Forms
- Include multiple interaction states for accessibility and user feedback. I designed states for focus, error, hover, default, typing, and completed inputs.
- Light / Dark Theme
- Implemented Light and Dark Mode using Figma Variables, allowing more flexibility in design and faster handoff to developers for deployment.
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.
Dynamic Breadcrumbs
Allow users to backtrack or switch sections easily, improving navigability. This feature is beneficial for users exploring multiple betting options and ensuring easy navigation through sports, leagues, and matches. By improving navigation, Dynamic Breadcrumbs encourage more exploration and engagement, boosting retention rates.
Marketing Support
Contributed to the Marketing Department, creating digital and print assets to support campaigns, events, and brand communication.
- Social & Digital
- Designed assets for social media channels and created videos for campaigns and staff celebrations.
- Print Materials
- Supported the production of leaflets, digital banners, posters, and other printed materials for betting events.
- Campaign Support
- Helped deliver marketing campaigns, ensuring consistency across digital and physical formats.
