PROJECT
Building OCC’s Design system
DESIGNER
Hugo Garduño
Product Designer at OCCMundial who enjoys relaxing outside his world and thinking about how there is nothing new under the sun.
CASE
While you read this, a new graduate from Guadalajara seeks his first job and a new start-up grows rapidly looking for a developer in Mexico City, a person has missed her job, a company has reduced its staff due to Covid-19. In fact there is a possibility you’re looking for a better job while you're reading this.
As any scalable product, OCC has evolved, however four years ago it suffered from a clear visual language, lack of consistency and as a result, little speed by building the product, which caused an unreliable and frustrating experience for all our users.
With over 5 million —between recruiters and candidates— users and 1 K new accounts per day, how can we ensure a positive, reliable experience for everybody?
![]()
The answer is our first design system. Creating a system that allows front-end designers and engineers to build faster while generating a consistent, robust and scalable language that allows us to explore freely.
As any scalable product, OCC has evolved, however four years ago it suffered from a clear visual language, lack of consistency and as a result, little speed by building the product, which caused an unreliable and frustrating experience for all our users.
With over 5 million —between recruiters and candidates— users and 1 K new accounts per day, how can we ensure a positive, reliable experience for everybody?
The answer is our first design system. Creating a system that allows front-end designers and engineers to build faster while generating a consistent, robust and scalable language that allows us to explore freely.
A lack of consistency
We started analyzing the pages on our site and landing marketing pages and the process to create new pages, we realized that we severely lacked the consistency and scalable system that are a better practice for digital prodruc design.
There weren’t repeatable and reusable components to build pages, the designers and developers presented themselves with their own systems and creating new visual components day by day, many of which were very similar, although not exact, to solutions already implemented on other pages. Not only was the site difficult to maintain and update, but also the mobile app was incompatible with itself and with the site.
Co-created by a small team
We initially centralized the creation of the design system but design team participated on definition of each elements of the system. How responsible for the organization and facilitation of the project, I empower the entire team to address the problem in a more functional way. A developer standardize the code through the design system and created a content management system. I organized the existing design components and the missing ones.
Taking inventory
Instead to strat from scratch, we look back and saw what we had build, I mean style guide, basic components, complex components and more. That meant we already had a group of components. It was unorganized, incosistent, wrong labeled and I repeat again unorganized.
We list all of theses components, ad then we detetcted which one was obsolet, repeteted, with any quantity of variants or outliers.
Some of theses repeated elements were huge, so we dissected them down to an atomic level and from molecules to organisms, some components werescpcials so we fit the needs in order to build a better component.
Once we refined the visual language we’d already created, we started only with a single component, our primary button an then scaleted to the mean components.
Dynamic and federate DS
A design system is maintained and built by a product team. It's a federated approach to extending Arco Design System (ODS), enabling teams to build patterns for their specific area of expertise, contributing back to the larger system.
A pair of designers have created the system that a whole small team can use it. Meeting the needs of every product team would require a system without constraint or a design culture of rigid adherence to the rules.
Over the course of three months, We created and organized a robust, adaptable style guide and component library that now lives in our CMS, Arco Design System (ADS). Everything is consistent across the board — typography, sizes, padding, line heights, colors, and grid.
A pair of designers have created the system that a whole small team can use it. Meeting the needs of every product team would require a system without constraint or a design culture of rigid adherence to the rules.
Arco DS was named and inspired by a historic place called “Los Arcos” in Querétaro, México where OCCMundial is based. You can view our style guide first version file here.
We started analyzing the pages on our site and landing marketing pages and the process to create new pages, we realized that we severely lacked the consistency and scalable system that are a better practice for digital prodruc design.
There weren’t repeatable and reusable components to build pages, the designers and developers presented themselves with their own systems and creating new visual components day by day, many of which were very similar, although not exact, to solutions already implemented on other pages. Not only was the site difficult to maintain and update, but also the mobile app was incompatible with itself and with the site.
Co-created by a small team
We initially centralized the creation of the design system but design team participated on definition of each elements of the system. How responsible for the organization and facilitation of the project, I empower the entire team to address the problem in a more functional way. A developer standardize the code through the design system and created a content management system. I organized the existing design components and the missing ones.
Taking inventory
Instead to strat from scratch, we look back and saw what we had build, I mean style guide, basic components, complex components and more. That meant we already had a group of components. It was unorganized, incosistent, wrong labeled and I repeat again unorganized.
We list all of theses components, ad then we detetcted which one was obsolet, repeteted, with any quantity of variants or outliers.
Some of theses repeated elements were huge, so we dissected them down to an atomic level and from molecules to organisms, some components werescpcials so we fit the needs in order to build a better component.
Once we refined the visual language we’d already created, we started only with a single component, our primary button an then scaleted to the mean components.
Dynamic and federate DS
A design system is maintained and built by a product team. It's a federated approach to extending Arco Design System (ODS), enabling teams to build patterns for their specific area of expertise, contributing back to the larger system.
A pair of designers have created the system that a whole small team can use it. Meeting the needs of every product team would require a system without constraint or a design culture of rigid adherence to the rules.
Over the course of three months, We created and organized a robust, adaptable style guide and component library that now lives in our CMS, Arco Design System (ADS). Everything is consistent across the board — typography, sizes, padding, line heights, colors, and grid.
A pair of designers have created the system that a whole small team can use it. Meeting the needs of every product team would require a system without constraint or a design culture of rigid adherence to the rules.
Arco DS was named and inspired by a historic place called “Los Arcos” in Querétaro, México where OCCMundial is based. You can view our style guide first version file here.
