Matheus Mari - Revelo

Everest Design Systems

Learn how a DS implementation supported our teams to work better.

Company

Revelo

Context

In 2019, Revelo was the most relevant HR tech in Latin America. Using AI, we connected companies to a candidate marketplace. As a startup, Revelo grew extremely fast, which was beneficial, but presented some challenges, such as maintaining consistency across solutions. To tackle this, I partnered with my design and tech colleagues to lead the pursuit of consistency and effectiveness.

What I did

— UI inventory
— Stakeholder management
— Documentation
— Evangelize the team

Problem

To start to organize our assets, I reviewed all the foundation assets with the DEV team, discovering that we had more than 60 hex chrome codes, and more than 25 typefaces being "used" through a simple web product. And we listed all the components already used on our platform, the inconsistencies, and started to think about how we could start to clean, organize, and document it.

Proccess

Cleaning we discover that we had more than 60 colors in our style sheets, and more than 40 of these colors, without use. So I started the process to clean it with the devs, reducing almost 50% of this palette in jun of 2019. By hiring more designers and having more time and more people to help, I lead at the end for 2019 another review, reducing these colors to 19 colors.

We reduced by more than 70% of the number of color styles for our product team. It means more consistency, 70% less time spent choosing colors, looking for these colors through the code, and as a consequence, more time creating, designing, and developing. The same process was done with typefaces, icons, surface styles, and components.

To organize all the product design assets, I did research testing a lot of different ways to document and organize our library. And we chose to use the ZeroHeight solution. ZeroHeight offers a platform where we listed all our assets, creating more documents, and helping the DEV team see specifications. To see the documentation that we created, click here.