Design System - Quantexa
Liderança na Criação de um Ecossistema de Design Escalável

Visão Geral do Projeto

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.

Desafio Inicial

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.

Minha Atuação no Projeto

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

Principais Responsabilidades e Entregas

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

Sistema de Cores Automatizado e Customizável

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)

Resultados e Impacto

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