top of page

Creating a Design System

Developing a scalable and strategic Design System to maintain product consistency.

04/22/2024

• 2 min

Image by Balázs Kétyi
ROLE

UX/UI Designer

TIMELINE

2023 - 2024

RESPONSIBILITIES

• Definition, creation and maintenance of DS

OVERVIEW

The company was in the midst of restructuring its visual identity and sought to align its product with the proposed new style, characterized by elegance, minimalism, modernity and technology . It was essential that the platform stood out from its competitors, which maintained an archaic design and complex structures for users.

MAIN CHALLENGES

  • Previous projects were developed in Adobe XD;

  • Lack of componentization and organization in the files, making it difficult to understand the platform's behavior and identify the needs for creating components in the new Design System.

  • Issues of lack of accessibility were identified, in addition to inconsistency in colors, fonts and undefined spacing.

ACHIEVEMENTS

Implementation of a library with several components created.

Careful development of text styles to be applied across the platform.

Use of Material Design icons to represent the variety of topics covered by the company.

Increase in team productivity and decrease project development time.

Creation of Light and Dark mode versions of all components using variables

Color selection considering the company's visual identity and accessibility

HEURISTICS AND BIASES

Used in the creation of the DS

Heuristics Visibility of system status: Creation of alert/insight patterns for the platform. In addition to sensor status indicators such as: active, off, alert or offline.

​

'Aesthetic Effect on Usability' Bias: Also using the heuristic of minimalism because of people's tendency to perceive aesthetically pleasing objects as being easier to use and more effective.

​

'Mental Model' Bias: When designing a design system, it is essential to align simplified representations of the world with users' expectations to ensure an intuitive and cohesive experience, avoiding frustration due to inconsistent interactions.

​

Error Prevention Heuristics: Mainly applied to modals in the design system, helping to ensure that users can interact safely and efficiently, minimizing the occurrence of errors and facilitating their recovery, should they occur.

CONCLUSION

The implementation of a design system in our company was crucial to promote consistency and efficiency in the development of digital products. We established unified standards that ensured a cohesive user experience and facilitated cross-team collaboration, reducing rework and accelerating creation. This resulted in time and cost savings, as well as a higher quality final product. In short, the design system was a strategic investment that improved our company's innovation, scalability and competitiveness.

bottom of page