Outcome

The impact of the new design system

Challenge #1

Components were not built for efficiency

While using the components in Figma, I discovered that most of them do not have resizing behaviors. They always become distorted when the sizes are changed.

Additionally, there was inconsistency in Figma's variant control due to an invalid naming structure. For instance, the 'Checked' property and the 'State' property overlapped. Not having well-built components could drastically slow down the design process.

Solution

I began by auditing the design system to identify components that lacked structure. I then reorganized the variants to clearly differentiate between different states and statuses. I also collaborated with the design team to determine the responsiveness of the components.

Through fixing the naming structure and resizing behaviors, I ensured that all components were reusable and met the required standards.

Challenge #2

Lack of component documentation

The lack of documentation for component usages resulted in different expectations from designers, engineers, and stakeholders. This increased the risk of engineers implementing components incorrectly.

Solution

I discussed with the design team to determine the content of the documentation. As our design system is still in the early stages of development, we decided to prioritize guidelines that provide clarity on usages such as responsiveness, edge cases, empty states, spacing, overflow, and interactions.

To clarify intricate interactions, I have included detailed specifications and prototypes. Our objective is for the documentation in Figma to act as the source of truth for all design patterns.

Challenge #3

Engineers are not using the design system

Designers find it convenient to reuse components from the Figma library. However, if engineers do not use the same design system, it will lead to inconsistent user experience and will not reduce production time.

Solution

I communicated the need to create a coded component library with the engineers. As a result, they formed a two-person team to work on this project. They initiated the development of an Angular-based component library using Storybook. We organized regular sync meetings to monitor the progress and prioritize the implementation of components.

We also used Chromatic to test and track whether the components align their behaviors with the design.

Bonus challenge

Accessibility improvement

While auditing our design system, I also examined the design fundamentals such as colors and text sizes. My goal was to ensure that the text color combinations of all components comply with WCAG 3.0 standards.

I included documentation about how to pair colors with the right text size in the design system as well.