Building Design System

From scratch, without allocated resources

In 2019, I led a guild team to build up the very first design system for Alef Education from scratch. The importance of the design system was not fully understood by the organization 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.

I also started a UI review and built UI inventory with the design team.

Initiate a Guild Team

In the context that the design system is not well understood by the organization, there are no resources allocated for the initiative.

The approach I 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 want to build.

Atomic Design: Designers start to design the components on the page while developers implemented 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 record for new joiners.

Iterate

Build new components along with new feature 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.

Guannan Li