Design System - Quantexa
Liderança na Criação de um Ecossistema de Design Escalável
Liderança na Criação de um Ecossistema de Design Escalável
Empresa:
Quantexa
Resumo do Projeto:
Em um momento de transformação digital e necessidade de escalabilidade, a Quantexa, empresa especializada em soluções de inteligência de dados e análise contextual, identificou a urgência de consolidar e padronizar a experiência de suas plataformas. Fui convidada a liderar a criação e implementação do primeiro Design System da empresa, uma iniciativa estratégica com impacto direto na consistência, eficiência e qualidade da experiência do usuário.
Antes do projeto, a Quantexa operava sem um Design System formal. As equipes de produto e engenharia enfrentavam inconsistências visuais, duplicação de componentes e falta de alinhamento entre design e desenvolvimento. A ausência de uma fonte única de verdade dificultava a manutenção, escalabilidade e coesão da plataforma.
Criar um Design System do zero, para uma plataforma já em funcionamento e com múltiplos produtos integrados, foi um desafio técnico e organizacional — mas também uma das experiências mais enriquecedoras da minha carreira como designer.
Atuei como Design Lead coordenando todas as frentes do projeto, desde a estratégia até a entrega técnica do sistema, em colaboração direta com:
Designers de produto
Desenvolvedores front-end (Angular)
Equipe de Design Ops
Gerentes de produto e stakeholders técnicos
1. Estruturação do Design System
Defini a arquitetura e a estrutura do Design System com base em Atomic Design e boas práticas de Design Ops
Documentei princípios de design, tokens (tipografia, cores, espaçamento) e diretrizes de acessibilidade
2. Integração entre Design e Desenvolvimento
Criei e mantive a galeria de componentes UI no Figma, com variantes responsivas, interações e documentação funcional
Colaborei diretamente com os desenvolvedores front-end para implementar os mesmos componentes em Angular, documentados via Storybook, garantindo total paridade entre design e código
3. Criação de Pontes entre Times
Assumi o papel de ponte entre design e engenharia, liderando cerimônias de alinhamento técnico e revisões entre os dois universos
Estabeleci fluxos de handoff claros, com documentação de specs, guidelines e regras de uso para cada componente
4. Governança e Evolução Contínua
Implantei um processo de criação e manutenção para garantir a evolução controlada do Design System
Modelei um fluxo de contribuição aberto, que permitia que designers e devs propusessem novos componentes ou ajustes a partir de critérios objetivos
Criação de Bibliotecas de Componentes UI
Como parte da evolução do Design System da Quantexa, liderei a criação de um sistema de cores automatizado, projetado para oferecer flexibilidade, consistência e escalabilidade às múltiplas implementações da plataforma.
O principal objetivo era permitir que a interface pudesse ser personalizada visualmente de acordo com as necessidades de cada cliente, sem comprometer a integridade do design e a acessibilidade.
Desafios Atendidos
A Quantexa atua com múltiplos clientes corporativos que exigem adaptação da identidade visual (cores primárias, secundárias, contrastes, marca, etc.)
As equipes de entrega precisavam de um sistema fácil de adaptar e manter, sem demandar grandes retrabalhos de design ou desenvolvimento
Era fundamental garantir acessibilidade e contraste adequado independentemente da paleta utilizada
Minha Atuação
Estruturei a lógica de tokens de cores no Design System, definindo cores semânticas (ex: primary, danger, background, text-muted) separadas das cores reais (ex: #1A73E8, #F5F5F5, etc.), o que permitiu uma aplicação dinâmica
Colaborei com front-ends para integrar as paletas customizáveis ao Storybook (Angular) usando variáveis CSS e theming via tokens, possibilitando mudança de tema em tempo real
Criei documentação no Storybook para devs, designers, gerentes de produto e times de entrega com guias para uso, acessibilidade e contraste mínimo (WCAG)
Mapeamento de Cores existentes via Frontend e Paleta de Cores aplicadas
Adaptação de paleta de cores de acordo com as normas W3C
Entrega Técnica para Implementação Frontend
Funcionalidades e Benefícios
Customização sob demanda: cada cliente pode ter uma paleta exclusiva, aplicada de forma rápida pela equipe de entrega
Aplicação automática das cores nos componentes do design system, sem quebra de layout
Redução de retrabalho e ganho de escala para o time de desenvolvimento e design
Impacto
Aumento da satisfação dos times de entrega e dos clientes, com um sistema mais flexível e aderente às necessidades de marca
Redução significativa do tempo de implementação de novos clientes, com ganhos reais em agilidade e personalização
Fortalecimento do Design System como ferramenta viva e adaptável, conectando design, branding, acessibilidade e desenvolvimento em uma mesma solução
Evolução da maturidade de design da empresa, com o Design System se tornando referência e ativo estratégico