Intro

The concept of a design system is fascinating to me. It's not just about creating a set of UI components and guidelines; it's about establishing a cohesive framework that streamlines the design process and ensures consistency across products. As a designer, I see the design system as a powerful tool for fostering collaboration, improving efficiency, and maintaining brand identity.

As the sole designer, I took on the responsibility of creating and maintaining a design system along with its documentation. While it may not be perfect, it fulfills my daily design needs effectively. Moving forward, my goal is to encourage the development team to start implementing and utilizing the design system in our product.

Step 1:

Established a Team to organize all design files, including a ready-for-dev file for design-dev handover, and a design system file comprising Design Foundations, Icon library, and the Design System itself.

Step 2:

Conducted a UI inventory to identify and document the components used in our current platform, revealing a reliance on input fields, select options, autocomplete features, modals, buttons, and AG grid data tables. This informed the prioritization of components for inclusion in our design system.

Step 3:

Engaged in discussions with frontend developers to understand the source of components in the storybook, discovering a predominant reliance on Material UI. Subsequently, delved deeper into the Material UI design system.

Step 4:

Customise a well-developed design system (in the current case: MUI) to avoid too overwhelming changes.

Step 5:

Established colours, typography, and token variables within the Foundations section of the design system.

Step 6:

Implemented colours and tokens across various components to ensure consistency and coherence.

Ongoing:

Perform regular maintenance, avoid excessive upkeep and focusing only on essential updates as needed. Update design tokens upon changes.