A FCJ Venture Builder opera em um ecossistema de alta velocidade, gerenciando múltiplas startups e produtos digitais simultaneamente. Ao ingressar na empresa, identifiquei um desafio estratégico que estava freando esse crescimento: 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 entre todos os designers w eb designers da empresa.
Foco: UI Design, User Experience, Padronização de Processos.
Processo
O Problema: O Custo da Inconsistência
O desafio identificado não era apenas estético. A falta de padronização gerava problemas de negócio e de experiência do usuário:
Ineficiência Operacional: Times de design e desenvolvimento gastavam semanas recriando os mesmos componentes (botões, formulários, cards) para cada novo site em WordPress, gerando retrabalho e atrasando lançamentos.
Experiência do Usuário Fragmentada: Para investidores e startups (os usuários-chave), navegar pelo ecossistema da FCJ era confuso. A falta de coesão em tipografia, cores e interações diluía a força da marca e gerava desconfiança.
Dificuldade de Escalabilidade: Lançar uma nova landing page ou produto era um processo lento e caro, que aprofundava a desorganização.
A questão central era: Como poderíamos criar uma base de design escalável que acelerasse o time-to-market dos produtos e, ao mesmo tempo, unificasse a experiência do usuário em todo o ecossistema?
Meu Papel: Web Designer & Estrategista de Design
Minha atuação foi além do cargo de Web Designer. Assumi uma postura proativa como Estrategista de Design, responsável por:
Conduzir a Pesquisa: Liderar uma auditoria de interface e entrevistar stakeholders (colaboradores) para mapear as dores do processo atual.
Definir a Estratégia: Propor a criação de um Design System como a solução estratégica para os problemas de negócio e de UX identificados.
Design de UI e Documentação: Desenhar e documentar toda a fundação do sistema no Figma, desde os tokens (cores, fontes) até os componentes (botões, inputs).
Implementação: Trabalhar diretamente para garantir que o sistema fosse implementado corretamente nos sites da marca.
Metodologia: Da Auditoria à Implementação
O projeto foi dividido em quatro fases claras, para “vender” a ideia internamente e construir uma solução que fosse realmente adotada.
1. Descoberta e Pesquisa (Discovery & Research)
Antes de propor qualquer solução, precisei provar a existência do problema com dados.
Auditoria de Interface: Mapeei e printei dezenas de telas dos produtos e sites existentes da FCJ. O resultado foi um painel que expôs visualmente a inconsistência: encontrei, por exemplo, 12 tons de azul diferentes, 8 estilos de botões primários e 5 hierarquias de texto distintas.
Entrevistas rápidas com Stakeholders: Conversei com designers e outros colaboradores. A dor era unânime: “Gastamos mais tempo ajustando CSS básico e menos pensando na solução”.
2. Definição e Estratégia
Com o problema validado, apresentei a proposta de valor de um Design System para o Head de Marketing: ele não era um “projeto de design”, mas um “projeto de eficiência” que economizaria tempo e dinheiro. Defini o escopo inicial (MVP do Design System), focando nos elementos mais críticos para os sites em WordPress: cores, tipografia, botões e formulários.
3. Design e Documentação (Figma)
Essa foi a fase de construção:
Fundações (Tokens): Estruturei a paleta de cores (primárias, secundárias, semânticas) e a hierarquia tipográfica, garantindo acessibilidade (contraste) e legibilidade.
Componentização: Criei os componentes essenciais no Figma (botões, inputs, cards) com variantes e auto-layout, mapeando todos os seus estados (default, hover, pressed, disabled).
Documentação: Criei um guia de uso simples, explicando como e quando usar cada componente.
4. Implementação e Handoff
O Design System só tem valor se for usado. Trabalhei com as equipes de Branding & Marketing para traduzir os tokens do Figma em variáveis de CSS e implementar os componentes no ambiente de trabalho (do WordPress ao RD Station). Isso garantiu que o que foi desenhado no Figma era 100% fiel ao que ia para a produção.
A Solução: Uma "Fonte da Verdade" Centralizada
A solução foi a primeira versão do Design System da FCJ em 13 anos, uma biblioteca centralizada no Figma que serviu como a “fonte da verdade” para todas as equipes.
Este sistema forneceu:
Cores e Tipografia Padronizadas: Garantindo consistência imediata da marca.
Biblioteca de Componentes Reutilizáveis: Botões, formulários e grids que podiam ser “arrastados e soltos” para criar novas páginas em horas, não em dias.
Guias de Uso Claras: Reduzindo a ambiguidade e permitindo que até mesmo não-designers (como o time de marketing) pudessem criar landing pages consistentes.
Resultados e Aprendizados
Embora o sistema estivesse em sua versão inicial quando saí, os primeiros resultados já eram claros:
Impacto no Negócio: O tempo de prototipagem e desenvolvimento de novas landing pages foi reduzido em aproximadamente 60%.
Impacto na Qualidade: A consistência visual e a percepção de profissionalismo da marca FCJ Group aumentaram significativamente, como relatado pelos stakeholders.
Impacto no Time: O retrabalho de design e desenvolvimento diminuiu, liberando a equipe para focar em problemas de UX mais complexos, em vez de ajustar CSS básico.
Meu Maior Aprendizado: O maior desafio não foi desenhar os componentes, mas sim conseguir a aprovação da gestão para uma mudança que impactaria todo o ecossistema interno da FCJ. Aprendi a “vender” o design não como um custo, mas como um investimento estratégico que resolve dores de negócio, como ineficiência e lentidão para escalar.
Design System
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.
