A FCJ Venture Builder, com seu ecossistema dinâmico e em constante expansão, enfrentava os desafios de um crescimento acelerado: a ausência de uma linguagem de design unificada. Este projeto nasceu da necessidade de transformar a fragmentação visual em um ativo estratégico, criando um Design System fundamental para garantir consistência, agilidade e excelência em toda a sua rede de empresas.
Meu Papel: Web Designer e Estrategista de Interface
Ferramentas: Figma para criação do Design System, WordPress para implementação do design
Foco: UI Design, User Experience, Padronização de Processos
O Desafio
Ao ingressar na FCJ, identifiquei um cenário de grande potencial criativo, porém com uma notável falta de padronização nos processos de design de interface. A ausência de um guia central resultava em:
Inconsistência Visual: Cada site e produto digital possuía uma interpretação diferente da identidade da marca, diluindo o reconhecimento e a força do grupo.
Ineficiência Operacional: Designers e desenvolvedores gastavam tempo excessivo recriando componentes básicos, o que gerava retrabalho e atrasava as entregas.
Experiência do Usuário Fragmentada: A falta de coesão em elementos como botões, tipografia e cores criava uma jornada de usuário confusa e pouco profissional.
Dificuldade de Escalabilidade: Lançar novos produtos ou expandir os existentes sem um padrão claro era um processo lento e custoso, que aprofundava a desorganização.
O desafio era claro: como colocar ordem na casa, elevando a qualidade do design e, ao mesmo tempo, criando uma base sólida para o crescimento sustentável do ecossistema digital da FCJ?
A Solução
Com uma abordagem proativa, liderei a concepção e implementação de um Design System centralizado, concebido para servir como a “fonte da verdade” para todas as equipes. O objetivo não era restringir a criatividade, mas sim fornecer as ferramentas para que ela florescesse de forma consistente e eficiente.
O sistema foi estruturado com os seguintes pilares:
Paleta de Cores: Defini uma paleta de cores completa e funcional. Isso incluiu as cores primárias e secundárias da marca, além de cores de sistema para feedbacks visuais (sucesso, erro, alerta, informação), garantindo uma comunicação visual clara e acessível.
Tipografia Estruturada: Estabeleci uma hierarquia tipográfica clara e consistente para títulos, subtítulos, parágrafos e outros elementos textuais. A padronização assegurou legibilidade e reforçou a identidade visual em todas as plataformas.
Componentização de Botões: Criei uma biblioteca de botões com todos os seus estados mapeados (
normal,hover,pressededisabled). Essa padronização eliminou ambiguidades e garantiu que as interações do usuário fossem intuitivas e previsíveis.Padronização de Componentes de UI: Além dos botões, documentei diretrizes para outros elementos essenciais de interface, como espaçamentos, grids e formulários, criando uma base sólida para qualquer nova tela ou funcionalidade.
Este guia foi desenvolvido para ser um recurso vivo e prático, especialmente para o desenvolvimento em WordPress, permitindo que a visão de design se traduzisse fielmente em produtos digitais funcionais e de alta performance.
