SUMMARY
Atomic consistency, managing design at scale
MY ROLE
Atomic design, visual design, UI UX Design, Figma, Branding
PLATFORM
Web & Mobile
COMPANY
Alpiq
YEAR
2020
Project goals
The company has many different applications made by different teams, and there was a need to define a set of standards that all the teams can follow to collaborate easily and make all these applications look and behave in the same way, improving the user experience and making it easier for users to understand and use the products.
Approach:
The design systems were structured using Atomic Design, breaking the elements of the user interfaces down into smaller, more modular pieces, in this way it becomes easier to build and maintain the elements.
Hierarchy variants and states
Every variant and every state of each component has been made and can be selected to be applied to represent state changes on clickable prototypes, all the components are interactive.
Design patterns
One of the advantages of a design system is to achieve consistency in common user flows.
The documentation
The instructions for use of the design systems were documented in a platform called Zero-Heigth a CMS that offers connection with Figma and Coded libraries to bring the documentation of the UI to all the members of the team.
Building the design system:
The design has been made pixel-perfect in Figma and documented in Zero-height, the coded version has been developed as an Angular library with an integration of a chart library, in this way the screen designs made with the design system can be implemented more easily into code.