Sobre o Projeto
Contexto
Por se tratar de um produto SaaS global, com fluxos de navegação complexos e múltiplos perfis de usuário, existiam diversos elementos e componentes que ainda não estavam documentados ou padronizados.
À medida que o produto evoluía e novas funcionalidades eram adicionadas, surgiram desafios relacionados à consistência visual, reutilização de componentes, escalabilidade e velocidade de entrega entre os times.
Problema
As interfaces estavam evoluindo rapidamente, porém sem uma biblioteca compartilhada de componentes, tokens e padrões. Isso gerava inconsistências visuais, duplicação de soluções e aumento do esforço necessário para design e desenvolvimento.
Objetivos
Os principais objetivos deste trabalho foram:
- Acelerar o acesso e a utilização de componentes por designers, PMs e engenharia;
- Reduzir atritos no fluxo de trabalho entre times;
- Aumentar consistência e qualidade das interfaces;
- Promover escalabilidade do produto e do sistema;
- Criar uma base de referência para alinhamento entre Design e Engenhari.
Meu Papel
Atuei como responsável pela iniciativa de Design System dentro do produto. Liderei a condução de uma auditoria completa de elementos de UI, componentes, páginas e assets utilizados em diferentes partes do produto.
A partir dessa análise, defini a taxonomia do sistema e estabeleci convenções de nomenclatura para resolver inconsistências visuais, aumentar a escalabilidade e reduzir atritos na implementação com o time de desenvolvimento.
Também atuei na estruturação da lógica do sistema para suportar tanto as necessidades atuais quanto futuras evoluções do produto. Em colaboração com o time de design, implementei um sistema baseado em tokens para cores, espaçamento e tipografia, reduzindo inconsistências e simplificando atualizações em escala.
Responsabilidades
- Definição da estratégia do Design System;
- Auditoria dos padrões de UI existentes;
- Estruturação das fundações e design tokens;
- Criação de componentes reutilizáveis e escaláveis;
- Colaboração próxima com desenvolvimento.
Lógica e Arquitetura
- Definição da taxonomia de componentes;
- Construção da arquitetura de variáveis;
- Estabelecimento de convenções de nomenclatura.
Colaboração com Design e Engenharia
- Mapeamento de tokens para implementação no front-end;
- Apoio ao fluxo de design-to-code;
- Alinhamento contínuo entre design e desenvolvimento.
Benchmarking
- Uber Base;
- Shopify Polaris;
- Adobe Spectrum;
- Salesforce Lightning Design System.
Componentes Criados
- Botões;
- Campos de formulário;
- Widgets;
- Cards.
Principais Resultados
- Aceleração dos fluxos de trabalho e exploração de soluções de design;
- Estabelecimento de fundações escaláveis para evolução do produto;
- Reutilização consistente de componentes como inputs, widgets e cards;
- Implementação de Variáveis e Modes para controle dinâmico de componentes;
- Criação de templates automatizados com Variáveis, permitindo adaptação entre plataformas (ex: geração de layouts mobile a partir de desktop via troca de Modes);
- Criação de um changelog para histórico de decisões e evolução do sistema;
- Melhoria significativa na colaboração entre Design e Engenharia.
Observação: Alguns detalhes foram adaptados ou omitidos para preservar a confidencialidade.
Ferramentas
Figma