taynara santos
product designer
Contexto
A 4KST possuía múltiplos produtos digitais em evolução paralela, desenvolvidos por times diferentes e com decisões visuais tomadas de forma descentralizada. Esse cenário resultava em inconsistências visuais recorrentes, uso de múltiplas bibliotecas de componentes e dificuldade de manter padrões à medida que os produtos cresciam.
Além do desafio técnico e visual, o projeto acontecia em um momento de incerteza estratégica, no qual ainda não havia clareza sobre a continuidade ou expansão do portfólio de produtos. Isso exigiu que qualquer investimento em design gerasse valor imediato, mesmo sem garantia de evolução futura.
Problema
A ausência de uma base unificada de design gerava:
-
retrabalho constante entre design e engenharia
-
decisões visuais subjetivas e pouco rastreáveis
-
dificuldade de escalar interfaces com consistência
-
alto custo de manutenção visual ao longo do tempo
Sem uma fundação sólida, qualquer tentativa de escalar componentes ou padronizar experiências tenderia a amplificar inconsistências existentes.
Meu papel
Atuei como Product Designer responsável pela estruturação da fundação do Design System, conduzindo o trabalho desde a definição de princípios até a criação de tokens visuais.
Trabalhei em parceria com Produto e Engenharia para garantir que as decisões de design fossem:
-
tecnicamente viáveis
-
semanticamente claras
-
preparadas para integração futura com código
Meu foco foi criar uma base durável, capaz de sustentar decisões futuras mesmo em um cenário de incerteza.
Processo
-
Auditoria visual dos produtos existentes
Mapeei padrões inconsistentes de cor, tipografia, espaçamento e componentes, identificando pontos críticos de divergência entre produtos. -
Definição da fundação visual
Estruturei cores, tipografia e espaçamentos com foco em nomenclatura funcional e tokens semânticos, reduzindo dependência de decisões subjetivas. -
Alinhamento técnico e validação contínua
As definições foram discutidas com engenharia para garantir aderência à implementação e evitar decisões difíceis de sustentar em código. -
Documentação inicial no Figma
Centralizei a fundação em um espaço único, criando uma base clara para uso e evolução futura.
Solução
Desenvolvi a fundação de um Design System composta por:
-
cores
-
tipografia
-
espaçamentos
-
bordas, radius e sombras
-
diretrizes iniciais de acessibilidade
Todo o sistema foi estruturado a partir de tokens reutilizáveis, permitindo:
-
consistência entre produtos
-
facilidade de manutenção
-
preparação para evolução em componentes e integração com código
Mesmo com a interrupção do projeto após a etapa de fundação, a entrega resultou em uma base sólida, escalável e pronta para continuidade, sem necessidade de retrabalho estrutural.
Fundação
Esta etapa contemplou exclusivamente os fundamentos do Design System, criando uma base consistente, acessível e escalável para os produtos.
Cores
Definição de paleta primária, secundária e de suporte, incluindo estados semânticos (sucesso, alerta, erro e informação).
As cores foram organizadas em tokens funcionais (background, texto, borda), com testes de contraste para garantir acessibilidade.
Uma decisão estratégica foi separar cores de marca de cores semânticas, permitindo evolução do produto sem comprometer consistência ou legibilidade.
Tipografia
Definição da fonte principal e construção de uma escala tipográfica baseada em hierarquia semântica, com estilos claros para títulos, textos, labels e captions.
O sistema prioriza:
-
legibilidade em contextos densos de informação
-
consistência visual entre produtos
-
facilidade de implementação em código
Espaçamentos e layout
Criação de um sistema de espaçamento baseado em múltiplos, com regras claras para margens, paddings e gaps, além de um grid responsivo como base para layouts futuros.
O objetivo foi trazer previsibilidade e coerência na construção das telas, reduzindo decisões arbitrárias e inconsistências visuais.
.png)
Border e Radius
Definição de escalas de bordas e radius transformadas em tokens reutilizáveis, garantindo uso consistente em cards, modais e containers, independentemente do produto.
Resultado e Impacto
-
Estabelecimento da fundação do Design System da empresa
-
Redução da ambiguidade em decisões visuais
-
Base preparada para escalar componentes e documentação sem retrabalho
-
Alinhamento entre design e engenharia em torno de um vocabulário comum
Nota sobre o contexto
⚠️ O projeto foi descontinuado logo após a conclusão da etapa de fundação por mudanças estratégicas internas. As fases seguintes (componentes, padrões e documentação avançada) não chegaram a ser desenvolvidas.
Ainda assim, a fundação entregue foi pensada para gerar valor imediato e sustentar evolução futura, refletindo decisões conscientes diante de restrições reais de produto.