Design System for the Acerta platform
Restructuring of the Acerta platform's Design System to create a consistent and scalable visual base, increasing the efficiency of the Design and Development teams.
Customer
Viacerta Financeira
Categories
Design System
Duration
20 days
My Role
Product Designer
Tools
Figma
Team
Product Designer; Frontend
The problem was not only in the inconsistency of the interfaces. The absence of a scalable foundation meant that Design and Development repeatedly solved problems that should have been systematized
Context
A Acerta é uma promotora de vendas especializada em microcrédito para pessoas físicas, com atuação nacional e lojas próprias distribuídas predominantemente pelas regiões Sul, Sudeste e Centro-Oeste do Brasil.
Seu portfólio reúne linhas de crédito de diferentes instituições financeiras, com destaque para os produtos da Viacerta Financeira, empresa pertencente ao mesmo grupo.
Para sustentar essa operação, a empresa conta com uma estrutura própria de tecnologia, formada por profissionais de Produto, Design e Engenharia responsáveis pela evolução das plataformas utilizadas no negócio.
Quando entrei para a equipe, meu escopo inicial estava relacionado ao desenvolvimento de uma solução para gestão de campanhas comerciais. Durante as primeiras semanas, entretanto, identifiquei uma oportunidade estrutural que impactava não apenas aquele projeto, mas toda a plataforma: o Design System existente não oferecia a consistência e a escalabilidade necessárias para acompanhar a evolução do produto.
The Challenges
A biblioteca existente possuía componentes e estilos reutilizáveis, mas havia sido construída sem uma arquitetura suficientemente estruturada para sustentar sua evolução.
A paleta de cores era limitada e apresentava divergências em relação à identidade da marca. Os estilos tipográficos contemplavam poucas combinações de tamanho e peso e não havia uma separação clara entre tokens primários e suas aplicações semânticas.
A arquitetura dos componentes também dificultava sua reutilização e evolução, criando um cenário em que novos padrões poderiam continuar sendo desenvolvidos de maneira isolada conforme a plataforma crescesse.
Apresentei esse diagnóstico à liderança e propus a reconstrução do Design System como uma iniciativa estruturante para o produto, demonstrando como uma base mais consistente poderia beneficiar tanto Design quanto Desenvolvimento.
A proposta foi aprovada, mas havia uma restrição importante: o roadmap de Tecnologia já estava comprometido com outras entregas.
Tive 20 dias para estruturar o novo Design System.
O desafio passou a ser, portanto, construir uma base suficientemente robusta para sustentar a evolução da plataforma sem tentar redesenhar, desnecessariamente, tudo aquilo que já existia.
The Approach
Diante do prazo reduzido, adotei um princípio desde o início: preservar o que funcionava e reconstruir apenas aquilo que comprometia a consistência ou a escalabilidade do sistema.
Auditoria e estruturação dos tokens
Comecei realizando uma auditoria dos tokens existentes.
Elementos que já atendiam às necessidades do produto, como alguns padrões de sombras e grids, foram preservados. Outros precisaram ser reconstruídos.
A paleta cromática foi expandida e aproximada da identidade visual da marca, contemplando diferentes níveis das cores principais e uma estrutura mais completa para os estados do sistema.
A escala tipográfica também foi revisada para oferecer maior variedade de tamanhos e pesos e permitir uma hierarquia de informação mais consistente ao longo das interfaces.
Essas definições foram centralizadas em uma biblioteca específica de tokens primários, estabelecendo a camada fundamental do sistema.
Tokens semânticos
A partir dessa base, desenvolvi uma segunda camada de tokens destinada ao uso contextual nas interfaces.
Utilizando Variables no Figma, estruturei tokens semânticos para aplicações como:
títulos, textos e captions;
backgrounds e superfícies;
fills e outlines;
estados e feedbacks do sistema.
Em vez de definir toda essa estrutura de forma abstrata antes da construção dos componentes, trabalhei de maneira iterativa: os tokens eram aplicados, testados e refinados conforme novos componentes revelavam necessidades do produto.
Arquitetura de componentes
Com a fundação estabelecida, iniciei a reconstrução da biblioteca seguindo os princípios do Atomic Design.
Elementos básicos, como ícones, imagens, inputs e células, foram tratados como unidades reutilizáveis que poderiam ser combinadas progressivamente na construção de componentes mais complexos.
Essa arquitetura foi particularmente importante em estruturas como dialogs, containers e tabelas.
Nos dialogs, por exemplo, header, conteúdo e footer foram estruturados como partes independentes, com variantes capazes de atender diferentes cenários.
Nas tabelas, as próprias células foram componentizadas, permitindo composições com textos, ícones, botões, inputs e outros tipos de conteúdo. Essas células formavam linhas reutilizáveis que, por sua vez, compunham diferentes configurações de tabela.
A intenção não era apenas criar componentes prontos, mas desenvolver uma arquitetura suficientemente flexível para que novas necessidades pudessem ser atendidas por composição, evitando a criação constante de componentes isolados.
The Solution
The new Design System was structured to function not just as a component library, but as a working tool for the teams responsible for the platform's evolution.
To facilitate the discovery and use of resources, I organized the components into categories aligned with recurring patterns in Design Systems:
Page Structure · Navigation · Data Display · Forms · Feedback · Entities · Custom
In addition to these categories, two specific groups were created for Acerta's needs.
Entities gathers components associated with the core business entities, such as Customers, Contracts, Guarantees, Stores, Products, and Proposals.
Custom concentrates components specific to the platform experience, such as charts, Marketing communications, custom alerts, and app-related CTAs.
I also developed an overview page functioning as a visual index of the library, allowing designers and developers to quickly identify available components before creating new solutions.
At the end of the project, the Design System had 75 components, in addition to the primary and semantic token structure required to support its use.
The implementation was carried out in collaboration with the Development team. During this stage, we established weekly meetings to clarify behaviors, discuss the implementation of components, and incorporate suggestions from the developers themselves into the system's refinement.
Today, the Design System is integrated into the routine of the Design and Front-end teams, providing a shared foundation for building Acerta's interfaces. Besides increasing agility in the creation and implementation of new features, the new structure has brought greater visual consistency to the platform and established a more scalable foundation for its evolution.
