We build up the very first design system for Alef Education from scratch. The organization did not fully understand the importance of the design system, and the process represents an exploration of a bottom-up approach.
Research and UI Inventory
Research on best practices and processes for building a design system is conducted.
We also started a UI review and built UI inventory with the design team.
Initiate a Guild Team
In the context that the organization did not sufficiently understand the design system, there are no resources allocated for the initiative.
The approach we chose was to organize presentations inviting all front-end developers and call for volunteers. We built up our first-ever guild team in the organization!
Build MVP
With the support of a PM and guild team members, we identified the first page we wanted to build.
Atomic Design: Designers start to design the components on the page while developers implement them. Implemented components were reviewed and approved before moving on to assembling the page.
Align Governance
Through a team discussion, we decided to use a hybrid model - core developers and designers review and control the quality while every team is requested to contribute to and consume the design system.
Promote Design System
Core developers and designers for the design system organized training for each team to get buy-in and kept the training in a record for new joiners.
Iterate
Build new components along with new features and pages. And also improved the documentation and discussion on guidelines.
A bi-weekly meeting is organized to review the practice, communicate new things that are added to the design system and discuss challenges.