Transforming a Figma file in a powerful design system
This study details the steps taken in creating a robust design system through collaboration with the development team.
My role
My key responsibilities were coordinating how the team would collaborate; creating an accessible design system; and designing atomic component
Impact
Creating new interfaces became more efficient for the design team, and developers found the handoff process to be smoother and more comprehensible.
Context
About the challenge
Through research, our team determined that Devoro's brand was not effectively communicating with our target audience and decided to update the visual identity. We used this opportunity to also create a flexible, responsive, and accessible design system.
Process
1. Updating colours and typography
Adapting the old file to the new brand identity
2. Building atomic components
Creating flexible and reusable elements
3. Designing flows
Improving handoffs processes
Step 01
Updating colours and typography
While updating the colour palette, we were careful to ensure consistency through colour tokens and accessibility through contrast.
A previous challenge we had encountered was designers using different colours for the same component, which caused visual noise due to subtle inconsistency. To prevent this, we created tokens defining which colour should be used in each context after setting the visual identity according to the new brand. This allows designers to simply select the colour "IconContext" or "H3" from the library rather than deciding between "Gray30" or "Gray40".
We also conducted multiple tests to ensure that related colours had a contrast that met WGAC's AA level requirements for accessibility. Plugins like "Contrast" were helpful in this process. To allow for a wider color palette, we also recognized that larger fonts such as headings and graphics can have lower contrasts without compromising accessibility.
Colour tokens
Verifying contrast for AA level
Step 02
Building atomic components
Prior to the redesign, we had already created components for our library, but they were not as interconnected as they could be. Therefore, we based our design system on the atomic design concept to ensure that the elements were connected, making it more flexible, reusable, and easy to update.
Creating a flexible design system following atomic design principles
Step 03
Designing flows
When collaborating with developers, we learned that one of their main challenges was comparing two screens and figuring out what needed to be built. To address this issue, we now use two resources: one frame showing the screens to be developed and another frame demonstrating the step-by-step flow.
Variations of cart's flows