Quipper "Blackboard" Design Systems
Product Designer, To maintain and enhance the design system and collaboration between design team and stakeholders and improve the efficiency of product development.
More efficient time when designing and build the product. Increase collaboration between the stakeholders.
Product Design / Global Product Developnment
2021-2023
Project Result
This project reduced more than 50% amount of the component library and made design system more scalable. Also, made faster design process, more efficient collaboration between the stakeholder and increase the product consistency.
Project Background
Quipper is the is a Learning management System that has several products. As a product designer, one of the challenges that we have is to maintain the consistency of the product with the brand. But, it’s so messy and needs to have some refinement.
In this, I will share some of the components I built for this design system but a design system is much more than just a component library. So this is some story about the Blackboard Design System itself.
Findings
At Quipper, we have several products based on the function of the platform. But at the beginning, we started settling up the tools and structuring the design system by the most essential. When it started, the file structure and design components were very hard to maintain and had a lot of redundancy of the design components. In the beginning, this is the file structure of the design system that we have.
The other challenge that we have is our team is only 5-7 people around that time, but we have so many products.
Getting Started
In the beginning, we just tried to start with an audit and defining the global components that are most reusable on the all platform, but by that time we tried to make the process better.
Team Structure
Our design framework operates as a collaborative platform, Fostering engagement from all team members in its evolution, while also designating a Design System Lead to guarantee progress. In alignment with our requirements and team structure, designers contribute to the design framework by executing their distinct product duties.
Product Cycle
We try to define the co-creation process to make sure that we have some understanding of the design system development. This is the ideal diagram that we have to guide us, but sometimes we try to be flexible based on our needs.
Adopt the approach of collaboration ground on the team
As a designer who has a responsibility to maintain the design system development, I tried to find a way to make the collaboration better, then I found the article from Budi Tanrim. I try to propose the idea to the team and we adapt the process.
Deliverable
When building the components we tried to implement the Atomic Design Approach by Brad Frost to build the smallest object first.
Also, we have several components that are used on all products and the others are for a specific product. So, we try to have a structure like this :
Token Library
As the main foundation of the design system, we try to make the design token first before we go to the next step.
UI Components
Code Deliver
Iteration
Figma Variable Update
Reduce the components
After Figma releases the variants update, we try to adapt with it and reduce the amopunt our design systems component. The sample is on the Button component below. It reduced 80% from around 300 components to just 57 components library with the same amount of use case.
Make The Process Faster
The components are more efficient to use and they are less time-consuming when we do the project. It’s because we can only design the light-mode screen and it's so easy to make it dark.
