Background
The Bizzy Apollo design system was created to manage and maintain our consistency design for our Bizzy Digital dashboard platform system. We've created standardization guides with reusable UI components so we can work together to build consistency across products.
We have about 11 modules that has been build by our engineers with different repositories for each module. The UI between modules quite messy and they have to recode every time they need to build the same feature across modules.
So we as a design team initiate to build a design language system to handle the situation. We named it as "Bizzy Apollo DLS"
Goals
- To improve work efficiency between designers and developers
- To improve UI consistency with a good quality
- To speed up the working progress between designers and developers
- Made a documentation that can be shared to the whole product team
Apollo x Renceng
Around march 2021 Bizzy Indonesia was acquired by Warung Pintar. Warung Pintar itself already has its own system design language named as "Renceng". Renceng design system is intended for mobile applications, while Apollo design system is intended for our dashboard system (web platform). To maintain our consistency between platform, we decided to merge our Apollo DLS with Renceng DLS rather than have different design system for each platform.
Stakeholder
Designers, Engineers, and Marketing Communication Team as they made the brand guidelines and illustrations.
Methodology
We used atomic design methodology. There are five distinct levels in atomic design:
1. Atoms
2. Molecules
3. Organisms
4. Templates
5. Pages
atomic design methodology
However our design system has only reached into organisms level. Template and pages level if needed will be directly added in our documentation.
Research
Research method that we used are:
1. Design Audit; done by looking to our component lists that we used for our platforms.
2. Research Competitor; done by benchmarking our component needs from some others design system such as Material Design, Carbon Design, Spectrum Design, Ravier, Asphalt, itemku, Ant Design, Chakra-ui, Lightning Design, etc
Workflow
First of all we identify our foundation such as Color & Font with our Marketing Communication team, after that we start list down the required components as a task in our ClickUp as our project management tool, so we can easier to plan, track, and manage our progress.
Last but no least we documented our component list in Zeroheight.
End to end process of our DLS
My Role
To ensure all design components are delivered properly, so that we can easily use our sketch components when designing and then hand over the design to our engineers. I also helped document the components at Zeroheight.
Challenge
It takes dedication and commitment from every team member to be able to present a good design system. However this project is not our main job, so it took a little longer than we expected.
Coordination between stakeholder is quite important in order to produce a good design system.
It would be good if we have a dedicated team to build a design system, so the team can deliver the result in time.
