bluelabs
Multi-Brand Design system and Tokenisation
Overview
Bluelabs is a technology company that specialises in developing sports betting platforms. Their primary focus is on providing these platforms to operators in Africa and Latin America. This means they create the underlying technology and infrastructure that enables these operators to offer sports betting services to their customers. In essence, Bluelabs is a B2B company, meaning they sell their services to other businesses rather than directly to consumers.
Role & Process
I took the lead on shaping the design system, but As a startup with limited time, we initially focused on rapid UX development, resulting in a disorganised component library. To address this, we implemented a scalable design system that could quickly adapt to evolving use cases and expanding requirements. This approach allowed us to maintain consistency and efficiency throughout the project, ensuring that our design decisions were aligned with the overall vision and goals of the product. By investing in a robust design system, we were able to streamline the development process, reduce the risk of errors, and improve the overall user experience.
Project Goals
1. Increase efficiency: Streamline development, improve collaboration, and accelerate decision-making.
2. Ensure consistency: Create a unified user experience, maintain brand identity, and reduce cognitive load.
3. Foster scalability: Accommodate future growth, support evolving requirements, and future-proof the design.
To manage the large scope of this project, we implemented a robust roadmapping and target setting process to monitor progress and ensure alignment with project goals.
01
Discovery
02
Define
03
Design
04
Usage
01
To inform our design system development, I conducted research into industry best practices and analysed established design systems from leading companies. This exploration provided valuable insights into effective organisation, component libraries, and design principles, enabling us to create a robust and scalable solution.
.avif)
What I was curious about?
Emerging technologies: What new technologies are likely to have a significant impact on design and development in the near future?
organisation: how they organise and structure their components and tokens
Global design trends: What are the emerging design trends and styles from different regions of the world, and how can these be incorporated into design projects?
What I found?
Component-driven development: Many leading companies prioritise a component-based approach to design systems, focusing on creating reusable and modular elements.
Atomic design principles: The atomic design methodology, which breaks down interfaces into smaller, atomic components, is a popular framework for organising design systems.
Scalability and adaptability: Design systems must be flexible and adaptable to accommodate future growth, changes in technology, and evolving user needs.
Over time, our component library became increasingly disorganised as we rapidly added new features, resulting in a single, unwieldy file.
A sample of the PREVIOUS collection of COMPONENTS/ design system
As the direction of the website was very clear very the initial talks and project briefing, i went directly to the digital wireframes stage. outlining the basic structure of the site on both desktop and mobile.
Inefficiency: Increased development time, difficulty maintaining consistency, and reduced collaboration.
Scalability: An unorganised component library can limit adaptability, accumulate technical debt, and hinder integration.
User experience: A disorganised component library can harm the user experience by creating confusion, frustration, and difficulty in navigation. This can negatively impact the product's reputation and success.
02
Recognising the importance of a well-defined component structure and hierarchy, we established one before designing. This streamlined development, ensured consistency across our multiple brands, and avoided the pitfalls of a disorganised component library
.avif)
We implemented a structured approach in Figma, dividing components into separate files and organising them within the file on SEPARATE pages.
Despite its seeming simple, we invested significant time in developing a robust naming structure for our components. This approach ensured future-proof scalability, accommodating the addition of new tokens and components. We adopted a dot-case format, prioritising clarity and consistency to enhance readability and maintainability.
Primitive tokens
Semantic tokens
Component-specific tokens
Design tokens are the fundamental building blocks of a consistent UI, defining attributes like colors, typography, and spacing. We identified three types: primitive, semantic, and component-specific. While tokens can be organized hierarchically, our approach focused on a parallel structure for semantic and component-specific tokens, aligning them with the specific components they referenced.
.avif)
This is how we documented the tokens with each type of token SEPARATED into its own table and each brand having their own COLUMN. There is also a table for primitive tokens not shown in the above example.
.avif)
We utilised Figma variables to simulate design tokens, assigning them to components within our designs. This enabled seamless switching between brand themes with a simple dropdown.
03
The next step was getting started on an ever-developing set of components, guided by the Atomic Design approach. We began by establishing the foundational elements of our design system, including colours, fonts, icons, and a grid system.
This EXAMPLE is focusing on the desktop breakpoints and shows the 2 sided column layouts with the spacing and margins set in figma
.avif)
Due to the variety of brands each with their own theme, we carefully organised and documented our color palettes and fonts to ensure clarity and efficiency.
The filled icon set we used through all the brands
To showcase the results of our design system documentation, here are some representative components. The complexity of our design system, with multiple brands and various component states, emphasised the importance of comprehensive documentation and labeling.
04
The implementation of a well-structured design system, including component organisation and token creation, has greatly simplified my design workflow. I can now efficiently create versions of the sports landing page for multiple brands (example below), quickly accessing and searching for components. Developers also benefit from a more streamlined environment, easily identifying individual components and tracing them to their respective variants in the design system.
While not yet implemented, we plan to leverage Figma's native API to connect design variables and components directly to the developer's system. This will ensure complete synchronization and alignment between design and production.
In under two months, I redesigned, reorganised and restructured the design system, creating a way to incorporate multiple brands and also introduced tokens. The design system has played a key role in ensuring successful LAUNCHES of multiple new features and IMPROVEMENTS to the web application.
- it created future proofing, as we are always creating new features, components and on-boarding new brands
- it gave me a structure and a set of principles to return to when making decisions on sometimes conflicting requests from the wider team
- it streamlined the design process, which was key for a solo designer
- it led to a faster design to market time, providing developers with a single source of truth and a set of reusable components and patterns
The main next step is align with the developers. implementing rest api to create a synced workflow starting from design and the COMPONENTS in the design system to the implementation in the live web app.
Check out another project!
