Style guides and Component libraries for multiple sub-products
Design process
Case study
3 min read
Built a consistent and scalable system for a platform with many sub-products inside, ensuring cross-functional team collaboration when developing new products.
The team
Harvey Huynh - Product Design Lead
My role
Research, analysis,
document, prototyping,
testing
Timeline
2 weeks (2021)
Proposed to upgrade the design system
Sentre protocol is a Decentralized Applications (DApps) Store on the Solana chain. This website allowed users to experience multiple DApps within a single Web3 environment.
With the Founder's request to increase the awareness of each application to help users easier navigate between applications, providing an intuitive interface for users, so I proposed that each application would have a different style. Based on the primary color, they can easily recognize where they are.
Therefore, the system needed to be updated to meet this change.
Sentre protocol - A DApps Store on the Solana chain
The old system could not cope with the development of various new styles.
The original system was designed for the generic platform, so applications with different styles could not reuse the style guide and component library of the old system. In addition, as more new applications are developed, management will become more complicated with the combination of elements that arise.
How might we create a scalable and consistent system as sub-products rapidly expand?
Old style guides
Old components
Defined primary color of sub-apps first
Firstly, I determined the primary color and design style of each application, and designed the application icons accordingly, in addition to the pre-existing system color.
The primary colors of sub-products
Then, I thoroughly analyzed the whole product to understand its unique features and design requirements. In addition, I discussed further with Front-End Developers to help me identify commonalities and differences between elements.
Elements comparison table
Finally, I was able to reuse style guides and component libraries from the old system for the common elements, for the different elements I adapted them to the new style based on the existing system.
Each sub-product had its library
My first solution was to centrally organize all the elements in a Figma file called "Design System". Although it can be easy to manage in one place, there is a huge risk that this file will be deleted. So I decided to split the system up to ensure each sub-product had its library. Thus, the system is still scalable when developing new sub-products.
The first solution
The final solution
I redesigned the existing system with 3 main parts: Style guide, Component library, and Design tokens.
The style guide will be adjusted to suit each DApp.
The original system was built using Atomic Design principles, which allowed me to easily edit the different components. Consistency is still guaranteed by using the common elements from the old system.
The design tokens have also been adjusted per the DApp files. I just needed to edit the Primitive tokens inside the Local variables.
Balansol’s design tokens
Lightning Tunnel’s design tokens
Introduced a new design system to 6 Developers and 2 other Designers.
Designers were quick to update new systems in designs because the style guides and component libraries were already distributed in each application. They can adjusted in each independent file without getting confused.
The Developers have built a source called Sen Hub, which contains the general design system. There were one to two Developers in charge of one sub-product, and they were responsible for cloning the existing system and customizing the interface according to the newly updated style.
UI of Balansol DApp
UI of Lightning Tunnel DApp
After that, I did a short interview with the Developers and Designers for the efficiency and usability of the new system. The insights gained helped me see my shortcomings.
Positive feedback
-
Distributing the library into sub-products enhances file management capabilities and also ensures system scalability.
Negative feedback
-
Having different primary colors for each sub-product increased user awareness, but the use of many typefaces reduced platform consistency.
-
The Development team only applied 20% of the system's design tokens, leading to ineffective communication between the two teams.
Next plans
-
Evaluate platform consistency when multiple typefaces are present. Should we only use one typeface?
-
Discuss and analyze the benefits with the Development team when they apply 100% of the design tokens.
The modularization of elements has made the system easier to scale
The fact that style guides and component libraries are available for each sub-product makes the system easier to scale when new products need to be developed and promotes cross-functional team collaboration.
The modularization of elements has made the system easier to scale later while also ensuring consistency across the entire product providing a seamless user experience.
Convinced the Developer is a challenge
-
​Based on the principle of the Atomic Design methodology, the product can be divided into separate components for development, which can be easily combined and maintained in the future.
-
Convincing the Development team to agree with proposed solutions is a challenging task that requires thorough research and preparation to present the benefits effectively.
Still interested? Check out more of my work!
Product Design
Case study
4 min read