CASE 03 / VISION PORTAL / DESIGN SYSTEM
Construindo uma base de design compartilhada para uma plataforma de cibersegurança em expansão.
O Vision estava crescendo entre módulos, workflows e times, mas sua interface ainda dependia de decisões visuais e de interação pontuais.
Criei um Design System do zero para dar ao produto uma identidade consistente, facilitar a navegação em interfaces complexas e permitir que design e engenharia escalassem sem reinventar a UI a cada release.
Reutilizável
Componentes prontos para produção
Padrões reutilizáveis para as interfaces principais do Vision
Escalável
Cor, tipo, espaçamento e estados
Uma linguagem visual para diferentes módulos do produto
Padronizado
Uso e racional documentados
Decisões compartilhadas entre design e engenharia.
EMPRESA / ISH TECH
PRODUTO / VISION PORTAL
FUNÇÃO / DESIGNER UX/UI
BASE DO PRODUTO / VISION DESIGN SYSTEM
DE INTERFACES ISOLADAS A UMA LINGUAGEM DE PRODUTO COMPARTILHADA
PLATAFORMA EM EXPANSÃO
Novos módulos, workflows densos e um roadmap de produto ativo
LACUNA DO SISTEMA
Ausência de regras compartilhadas para hierarquia visual, interação e comportamento dos componentes
DECISÕES PONTUAIS
Os mesmos problemas de interface eram resolvidos de maneiras diferentes entre as telas
ATRITO DE ENTREGA
Mais retrabalho, handoffs ambíguos e implementações inconsistentes
BASE ESCALÁVEL
Um sistema compartilhado capaz de evoluir sem interromper a entrega do produto
DE UI AD HOC A UM SISTEMA ESCALÁVEL
DECISÃO ESTRATÉGICA / BASE ANTES DA EXPANSÃO
Definir as regras antes de multiplicar as telas.
TRADE-OFF / Um conceito visual focado substituiu uma exploração de branding mais longa. Consistência, legibilidade e escala tiveram prioridade sobre variações decorativas.
Uma auditoria das interfaces existentes revelou inconsistências em cores, tipografia, espaçamento, componentes e padrões de interação.
Os usuários do Vision eram profissionais técnicos trabalhando com informações densas de segurança. O sistema precisava, portanto, reduzir a carga cognitiva e tornar status, severidade e prioridade imediatamente reconhecíveis.
Sem espaço para um reset visual ou um longo estudo de branding, fundamentei o sistema em um retrofuturismo funcional: uma direção visual contida que combina referências técnicas familiares com hierarquia, contraste e cores semânticas bem definidos.
Priorizei primeiro foundations duráveis e comportamentos reutilizáveis, permitindo que o produto desenvolvesse uma identidade mais clara enquanto o roadmap continuava avançando.
AUDITORIA DA UI ATUAL → USUÁRIOS TÉCNICOS → CLAREZA SEMÂNTICA → REUSO ANTES DA VARIAÇÃO
SOLUÇÃO / QUATRO CAMADAS DO SISTEMA
Um sistema conectando foundations visuais, comportamento do produto e entrega.
Criei o Design System do Vision do zero, conectando princípios, tokens, componentes, visualização de dados e documentação em uma única linguagem de produto. Cada camada foi projetada para suportar novos módulos sem exigir que design e engenharia reinterpretassem as regras a cada release.
As imagens abaixo são amostras representativas para o portfólio. Especificações proprietárias, dados do produto e documentação interna foram omitidos.
01
Visual Foundations
Amostra representativa dos princípios de cor, tipografia e espaçamento utilizados para criar uma hierarquia consistente em interfaces de produto com alta densidade de informação.
DESIGN DECISION / Establish shared rules before expanding the component library.
02
Semantic Color & Data Visualization
Mostra como severidade, status e feedback foram padronizados em diferentes contextos de segurança representativos.
DECISÃO DE DESIGN / Usar cor para comunicar significado de forma consistente.
03
Components & Interaction States
Demonstra como um conjunto representativo de componentes reutilizáveis lida com hierarquia, interação e feedback em diferentes estados.
DECISÃO DE DESIGN / Padronizar o comportamento com o mesmo rigor aplicado à aparência.
04
System in Context
Aplica as mesmas foundations e componentes a um workflow de cibersegurança representativo, mostrando como o sistema cria coerência no nível do produto.
DECISÃO DE DESIGN / Validar o sistema por meio de composições completas de produto.
IMPACTO / QUATRO MUDANÇAS DE PRODUTO
O produto pôde crescer sem reinventar sua interface.
PRINCÍPIO DE DESIGN
PROJETE A REGRA, NÃO APENAS A TELA.
Um Design System se torna valioso quando os times entendem por que um padrão existe, conseguem reutilizá-lo com confiança e podem estendê-lo sem quebrar a lógica do produto.
01
DECISÕES VISUAIS ISOLADAS
→ UMA LINGUAGEM DE PRODUTO COMPARTILHADA
Novos módulos passaram a seguir a mesma hierarquia, lógica semântica e princípios de interação.
02
TRABALHO DE DESIGN REPETITIVO
→ FOUNDATIONS E COMPONENTES REUTILIZÁVEIS
Novas telas e fluxos puderam partir de padrões existentes em vez de serem projetados do zero.
03
HANDOFF AMBÍGUO
→ REGRAS DE IMPLEMENTAÇÃO MAIS CLARAS
Estados, variantes e racionais documentados reduziram interpretações divergentes e discrepâncias entre design e desenvolvimento.
04
CRESCIMENTO À CUSTA DA CONSISTÊNCIA
→ UMA BASE CONSTRUÍDA PARA ESCALAR
O Vision pôde adicionar funcionalidades, módulos e complexidade de interface sem perder a coerência do produto.
50+ COMPONENTES PRONTOS PARA PRODUÇÃO
Padrões de interface e estados reutilizáveis criados para a experiência central do produto Vision.
UMA ÚNICA FONTE DE VERDADE
Foundations, interações e racional de design documentados para design e engenharia.