CubiX Design System
A themeable design system built for multiple brands
The CubiX Design System was envisioned to create a versatile, multi-brand design system that empowers clients to build their products quickly and easily while maintaining the flexibility to incorporate their own branding. Our mission was to deliver a bootstrap design framework that not only facilitates rapid development but also adapts seamlessly to various brand identities.
ROLE
Founding Designer
COLLABORATORS
CEO
Developers
Junior Product Designers
TIMELINE
March - June 2024
RESPONSIBILITIES
Create a multi-brand design system from the ground up
Setup design tokens framework
Mentor junior product designers
Multi-Brand, Multi-Mode
Beginning with the product design for Aalekh, we set out to develop a design system that not only supports multiple modes but also offers the flexibility to integrate multiple brands.
Objective
Our primary challenge was to create a flexible design system that could support multiple brands and various modes within the same brand. This required a robust framework based on design tokens, ensuring consistency and adaptability. Translating this methodology into Figma and effectively communicating and then reviewing with the product and dev teams was crucial for the project's success.
The Journey
Planning and process to acheive a themeable multi-brand design system
Defining the plan
Setting goals and milestones
To kick off the project, I collaborated closely with the CEO to outline the timeline and milestones. We aimed to develop the design system concurrently with our primary product, Aalekh, setting clear goals and deliverables for each phase.
Creating design tokens
Setting the foundations
From the outset, we intended to build a multi-brand design system. I researched and analysed various design systems to inform our approach. Based on this research, I established the foundational elements, including colour, typography, radius, spacing, and elevation, through base and semantic tokens.
Creating components
Utilising these foundations, we designed the initial screens for Aalekh. During this process, we extracted reusable components, ensuring consistency and efficiency. After consulting with the engineering team, we embarked on a trial phase for our design system.
Getting feedback and iterating
Iterating on the Semantic layer
I conducted interviews with designers and the dev team to identify challenges and areas for improvement. Documenting these insights, I evaluated the use of base tokens and made necessary adjustments to enhance the semantic layer.
Scaling for Future Brands and Products
As we began working on a new product, I refined our Figma file structure to support multiple brands and their respective modes. This involved creating a scalable system that could accommodate future brands and ensuring a coherent user experience across products.
A system is born
“A design system isn’t a project. It’s a product serving products.”
– Brad Frost
After rigorous testing and continuous feedback, our design system began to take shape. We started documenting the system comprehensively, allowing for seamless adoption and implementation by the development team. This close collaboration enabled rapid progress and swift integration of changes.
Next Steps
“Design systems are never complete; they are always in a state of evolution.”
– Alla Kholmatova
Encourage Iterative Improvement
Design systems require ongoing maintenance and improvement. Continuously collect feedback from all teams and users to identify areas for refinement. Encourage teams to provide suggestions, fostering a culture of continuous improvement.
Promote Adoption
Promote collaboration and adoption of the design system among teams. Encourage the use of components and adherence to guidelines. Provide ongoing support, resources, and communication channels to promote adoption of the design system.
Evaluate and Refine
Evaluate the design system's impact and effectiveness. Track key metrics to assess improvements in efficiency, collaboration, and consistency.