Design System para a plataforma Acerta
Reestruturação do Design System da plataforma Acerta para criar uma base visual consistente e escalável, aumentando a eficiência dos times de Design e Desenvolvimento.
Cliente
Viacerta Financeira
Categorias
Design System
Duração
20 dias
Meu Papel
Product Designer
Ferramentas
Figma
Time
Product Designer; Frontend
O problema não estava apenas na inconsistência das interfaces. A ausência de uma base escalável fazia com que Design e Desenvolvimento resolvessem repetidamente problemas que deveriam estar sistematizados
Contexto
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.
Os Desafios
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.
A Abordagem
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.
A Solução
O novo Design System foi estruturado para funcionar não apenas como uma biblioteca de componentes, mas como uma ferramenta de trabalho para os times responsáveis pela evolução da plataforma.
Para facilitar a descoberta e utilização dos recursos, organizei os componentes em categorias alinhadas a padrões recorrentes em Design Systems:
Page Structure · Navigation · Data Display · Forms · Feedback · Entities · Personalizados
Além dessas categorias, foram criados dois grupos específicos para as necessidades da Acerta.
Entities reúne componentes associados às principais entidades do negócio, como Clientes, Contratos, Garantias, Lojas, Produtos e Propostas.
Personalizados concentra componentes específicos da experiência da plataforma, como gráficos, comunicações de Marketing, alertas personalizados e CTAs relacionados ao aplicativo.
Também desenvolvi uma página de visão geral funcionando como um índice visual da biblioteca, permitindo que designers e desenvolvedores identificassem rapidamente os componentes disponíveis antes de criarem novas soluções.
Ao final do trabalho, o Design System contava com 75 componentes, além da estrutura de tokens primários e semânticos necessária para sustentar sua utilização.
A implementação foi realizada em colaboração com o time de Desenvolvimento. Durante essa etapa, estabelecemos encontros semanais para esclarecer comportamentos, discutir a implementação dos componentes e incorporar sugestões dos próprios desenvolvedores ao refinamento do sistema.
Hoje, o Design System está incorporado à rotina dos times de Design e Front-end, proporcionando uma base compartilhada para a construção das interfaces da Acerta. Além de aumentar a agilidade na criação e implementação de novas funcionalidades, a nova estrutura trouxe maior consistência visual à plataforma e estabeleceu uma fundação mais escalável para sua evolução.
