Multi-Brand, Multi-Theme Component Library Starter Template
In partnership with Profit Optics, we have built a robust Component Library for use as a Starter template for all of their new projects. With close work with developers and scalability in mind, we were able to create a working framework with UI developed in isolation with Storybook and Figma document that supports multiple brands and multiple themes per brand.
Product Designer
8 Months
System Design
Design System
UI/UX Design
Prototyping
Developer Handoff
Challenge
Scalability was the biggest concern here, as we were instructed to think of this as a starter template for a project, where there will always be different branding and different number of themes withing the brands. White-labeling was needed as well as template pages for showcase purposes.
Results
With the help of Figma’s variable modes, we were able to scale to the appropriate needs of the Management, making it possible to implement multiple client brands and keeping the design consistent.
Process
Planning and Architecture
First things first, we had to accommodate the system to ensure it can support new brand properties in a way it doesn’t disrupt our workflow in the future.
Using Figma’s native variables, and carefully orchestrating them, we were able to change themes across the board with just a click!
At first, we had to support a basic Theme, with light and dark variants, and also another client Averhealth with light and dark theme also.
First things first, we had to accommodate the system to ensure it can support new brand properties in a way it doesn’t disrupt our workflow in the future.
Using Figma’s native variables, and carefully orchestrating them, we were able to change themes across the board with just a click!
At first, we had to support a basic Theme, with light and dark variants, and also another client Averhealth with light and dark theme also.
Tokens
So with a lot of brainstorming, we decided that Figma variables will carry the bulk of the logic in theme switching, our job was to carefully create them and ensure clear communication with development on any changes to the variables.
We are using a component based token system ( Primitives -> Semantic Tokens -> Component Tokens )
While this requires a lot o pre-work in creating a brand new component, this has proven to be infinitely scalable and worked wounders for us.
Basic Components
As any design system, we had to include the basic UI components that follow the latest trends and best practices in UX, but for we went far and beyond and included different variants of charts.
We were closely referencing Charter.js library for easier development, iconography is a part of open source Tabler.io set.
Templates
The plan was to create some Dashboard templates for sales purposes, showing how our white-label solution works, but also real use case screens for Averhealth at this time.
We took inspiration from viral UI designs for the sales part of the templates, and we worked closely with Averhealth’s PO for creating pages for specific Averhealt use case.
Package & Storybook
The plan was to create some Dashboard templates for sales purposes, showing how our white-label solution works, but also real use case screens for Averhealth at this time.
We took inspiration from viral UI designs for the sales part of the templates, and we worked closely with Averhealth’s PO for creating pages for specific Averhealt use case.
Conclusion
After we had completed the MVP and after Figma components were reflected in Storybook and a component library package was created, the solution was put in alpha testing for Averhealth’s solution.
We are having daily meetings with them to ensure smooth user experience and we are working on enhancing our system while still thinking on scaling for future clients.