Creating a Design System in MotionBank
In May 2022, I introduced the Design System at MotionBank, a new approach to designing product systems. I suggested that with the design system, we should change and improve the collection of design and then the team will deliver into a new design system. This change improved communication and collaboration across divisions such as MotionBank team development. Also, the design team can collaborate fast, precisely, and well with the development team.
In this article, I will share the process of building a Design System, from the beginning of ideation, how it is structured, and the result.
How it started?
How can teams work fast and still maintain consistency? That was the first question that popped into my mind when I joined MotionBank. Through this question, I found several answers. First, the designers should work from end to end on every project assigned. Second, the designer should have a Design System to implement in their project because, since the release of MotionBank in 2020, only a few standards and patterns have been applied in every project.
MotionBank Design has been running out without a guideline until 2022. As a new employee in the team, I suggested to my Lead UI/UX Designer to allow me to align the visual design in MotionBank. This step is a considerable effort and has a great impact on the experience and the company. Also, this effort requires teamwork to carry out the process
Proses Desain
To discover the Visual Design standards or patterns in MotionBank, I took all the steps below:
Research
Planning
Design
Implement
Research Visual Audit
The visual audit step in the context of the Design System is an in-depth evaluation process of the visual elements. This process evaluated the visual design in MotionBank, such as UI components, design patterns, color palettes, typography, icons, etc. The goal is to ensure the design system's consistency, cohesion, and quality.
Visual Audit
24 Colors in on interface
9 Different type of fonts
Inventory
Plan a timeline and priority
After the research step, I scheduled the team's discussion and set priorities that should be done first. By this, all team members should be participating & keeping them updated about the changes.
Design the Design System
This step is an execution, and we design style guides and new components in MotionBank based on the result of discussion with the team.
Foundation
UI Kit Mobile
Synchronize with the developer team
We progressively discussed and implemented the design system's result with the front-end team. The following is an example of the finished Dashboard interface that has been released.
Before
After