MÉLIUZ DESIGN SYSTEM, 2022
By implementing variants and auto layout, I increased the overall efficiency by 33% when compared to a scenario without a design system.
By Abner Guedes
UPDATED ON JULY 13TH, 2025
5 MIN READ
Méliuz became the first startup in Brazil to go public. In 2021, the company launched a new app combining financial services, shopping, and cashback. The Méliuz Design System (MDS) was instrumental in fostering this launch.
By 2022, as this case study unfolded, Méliuz's primary objective was to increase its EBITDA, underscoring the need for operational efficiency across all teams, including design.
The impact
In addition to the mentioned gains in efficiency, this iteration brought:
9,5%
Increase in System Usability Scale (SUS) for the design system.
11%
Increase in designers' workflow optimization perception
80%
Reduction in individual components: from 200+ to 45.
"Having fewer options makes things simpler and easier to understand."
– Product Designer, reflecting on the component reduction.
The challenge
Six months post-launch, the Méliuz Design System, while functional and widely adopted, presented significant learnability hurdles for designers:
Disorganized components with little to no documentation made usage inconsistent.
A lack of Auto Layout led to component bloat, with numerous size-specific variants (e.g., textBox_small, textBox_medium) cluttering the library.
Designers struggled to efficiently locate the right components, leading to wasted time and frustration.
The solution
Solving the problem involved implementing Figma's recently launched variants feature and auto layout to existing components.
How I solved organization and component bloat:
By implementing variants and properties, instead of 10 separate button components, we now had one Button component with variants for Type (Primary, Secondary), State (Default, Hover, Disabled), and Size (Small, Medium, Large). This also applied to other components.
Implementing Auto Layout meant our components now intelligently adapted to their content and container size, eliminating the need for separate 'small' or 'medium' versions. This significantly reduced manual adjustments and rigidity.
Addressing documentation & naming:
With consolidated components, I created variant documentation snippets directly in Figma that were linked to our Zeroheight resources.
The 80% reduction in the volume of individual components, combined with a logical variant structure, transformed component discoverability. Designers no longer sifted through hundreds of disparate assets but quickly located the core component and customized it using intuitive variant properties.
I also tagged the components with alternative names discovered by user research, making it easier to find them through search.
My role
As a product designer, I took the initiative to identify these bottlenecks and delivered an end-to-end solution that improved design system metrics.
Process highlights
My core assumption was that implementing Figma variants and Auto Layout would significantly boost design team efficiency by reducing task execution time.
To validate this, I conducted a comparative task-based test. Designers performed a specific design task using three different setups: no design system, the existing MDS, and my proposed variant-based MDS. This allowed me to quantify the efficiency gains.
Further understanding of our designers' needs was gained through card sorting and user interviews. Main findings from this research included:
It was difficult for designers to know how and when to use components and colors. This leads to inconsistent usage.
Component names were not intuitive. As one designer put it, "This would be a banner. No, an image banner, no it’s a card."
Designers heavily relied on Figma's search bar to find components, highlighting the critical need for intuitive naming and better discoverability.
Trade-offs
User research revealed numerous opportunities for improvement. To deliver the most impactful solution within practical constraints, I made the following strategic decisions:
Prioritized documenting color use cases over text styles and spacing, due to effort and impact on design consistency.
While component naming was a significant pain point, I opted to tag components with alternative names rather than fully renaming them. This decision worked well with designers' behavior of using Figma's search bar and mitigated potential handoff complexities with developers and avoided generating breaking changes in existing codebases.
Though new component needs were assessed, I focused primarily on organizing and refining existing components. This approach aimed to establish a robust and stable foundation upon which future iterations and new components could be built more effectively.
Check out other works:
