Azulejo is 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, 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.
Role
Designer responsible
Scope
Portugal, Poland, Ukraine, and Romania
Info
2019-2020 – Lisboa (PT)
Tools
Sketch, Abstract, Storybook, and Airtable
We did a workshop to set our Design System principles and goals for each phase with the design and front-end teams.
The Design System 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).
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).
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.
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.
me[at]ruanteles.com
+351 910 520 498
