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.

THE CHALLENGE

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.

1- First we analyzed and understood the unique requirements of the Andela, we set out to create a universal solution that could provide for the individual needs for the three platforms that we had: Talents, Matchers, and Clients.

2- Apart from this, we had an old style guide that also had to be reviewed in case certain foundations or components could be improved and reused.

3- With all this information recollected we began to have meetings with the brand, development & product design teams to begin with the agreements and mapping (Governance system, ceremonies and communication channels between teams) for each foundation and for each component. We created two main libraries: the Foundations library and the Components library.

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.