We developed a global library of foundations and components that can be deployed easily and consistently across each area of the business, with the goal of reducing time to market for new products and features. This was a collaborative effort, the result of planning and regular feedback among members of the design, development, and brand teams.
As a result, we created our only source of truth that brings together a new look & feel, better accessibility, usability and collaboration between teams. At scale. It allowed us to have a unified and coherent design while also allowing designers to move faster in their UI work.
Agreements had to be taken into account to ensure quality and consistency across all assets and to improve the speed and efficiency of design and development work with material solutions such as figma libraries & documentation. We did this in several phases.
Foundations library
The Foundations library defined the order and consistency of Andela’s products such as Colors, Typography, Brand, Layout & grid, Icons, Flags, Spacing, Elevations and Figures
Components library
The Components library defined the look & feel. They are ready made UI components such as buttons, modals, calendars, alerts…
4- After this, we released the documentation and several Figma courses to help every team member to get engaged with our new design system. Example of the colors section:
5- We released the version 1.0.0 .
6- To maintain, improve or create inside both libraries we had weekly meetings with the brand, development & design teams.
7- To communicate these changes we sended a two week newsletter.