Azulejo: a real estate design system project

Azulejo was a design system project in order to consolidate the visual of Real Estate platforms of OLX Europe, with a scope of 3 different brands in 4 markets. Therefore, our main goal was to standardize the interface, so x we created sources of truth to guide our work: Abstract at the design level (to versioning and sync) and Storybook at the front-end perspective.

The project was based on good practices of the design community reflecting our necessities and maturity level. As an example, our structure is from Atomic Design with some updates from Brad Frost and the community (as the DNA level).

The name came out from the parallel between these small tiles that build the appearance of a house with the importance of atoms and molecules to build a web platform.

It was divided into 3 phases: Assessment, Standardization, and Maturation.

Assessment

At first, we tried to understand what we had in our sites. So, we mapped all components in Airtable to measure our inconsistency (as the same button for different text-styles, #colors, and paddings). Then, it was easy to sell the project to stakeholders presenting our data and other companies’ results (saving time and money).

We did a workshop to set our principles and goals for each phase with the design and front-end teams.

Standardization

The foundations (colors, typography…) were our main goal in the second phase (Standardization) because our aim was creating systems without personal preferences, but based on studies and user necessities (one of our principles) to decrease the noise and personal feedback from stakeholders.

We created a solid structure of styles and symbols on Sketch, building fluid and responsive components to smooth the design process in many scenarios.

Maturation

The hub focus changed before the Maturation phase, so we faced the necessity to rethink the components that support our platform in order to be a design-lead website in our category. So, I just could write this far.

What is your opinion on the project?

The main idea of this article is to discuss these themes. So if you can let suggestions, more comments, your experience, and critique in the comments zone, e-mail or Linkedin. Will be awesome ❤

Can I ask you a favor?

If you liked this content, like and share it on your social profiles. This helps this content to reach more interested people and motivates me to continue writing and publishing here. Thank you and a big hug.