← Trabalho
■ Case 02 — M&O
Escritório de Advocacia M&O
Landing page responsiva e rebranding de um escritório de advocacia em Niterói, RJ.
O desafio foi modernizar a presença digital da marca e democratizar o acesso à informação, trocando o excesso de “juridiquês” por uma comunicação clara, acessível e focada no usuário.
Cargo
Product Designer
Atuação
Pesquisa, UI, protótipo e front-end
Período
Set 2026
Plataforma
B2C · Web e mobile
Projeto 02 · Advocacia M&O
▲ Do discovery ao código com IA
■ Rebranding — autoridade e consistência
Uma identidade que transmite credibilidade e sofisticação
Reestruturei a identidade visual para transmitir mais credibilidade: novo logotipo, paleta em tons sóbrios e elegantes, tipografia e diretrizes de tom de voz. O resultado é uma linguagem moderna, aplicada de forma consistente em todos os canais digitais do escritório.
Logotipo
Paleta e tipografia
■ Da identidade à interface
Design de produto como ferramenta de negócios
Com a marca consolidada, a identidade virou uma landing page com sistema de cores adaptativo, hierarquia visual clara e um UX Writing mais estratégico. Mais do que uma renovação estética, a página foi estruturada para facilitar a navegação e impulsionar a prospecção de clientes.
Landing page — desktop
■ Do protótipo ao código
Desenvolvimento front-end, do zero ao deploy
Depois do discovery, da ideação e da definição de objetivos, assumi também o front-end. Construí a implementação do zero, com fidelidade total ao design, usando IA no desenvolvimento.
Figma
VS Code
Claude
GitHub
Vercel
Mobile — hero
Mobile — áreas de atuação
Mobile — equipe
Mobile — menu
■ Evolução — experiência em movimento
Do estático ao vivo: motion, profundidade e interação
Buscando trazer mais movimento e interação, evoluí a landing page para uma experiência digital moderna e tecnológica. Criei um sistema de motion com três níveis de intensidade (microinterações, revelação ao rolar e momentos cinematográficos) e dei a cada seção um comportamento próprio dentro do mesmo sistema.
Hero — a cena “Equilíbrio”, gerada em código: uma balança da justiça feita de luz que reage ao cursor. O prato do lado do cursor desce; no centro, ela se equilibra. A interação não era necessária, mas traz uma experiência imersiva para o usuário.
Faixa tipográfica em movimento, fazendo a transição entre o hero e as áreas de atuação
Glassmorphism sobre vídeo em loop contínuo, com contraste verificado (WCAG)
Equipe — retratos em duotone nas cores da marca, que, ao passar o mouse por cima, revelam a cor original.
Contato
Encerramento com assinatura tipográfica
Decisão
Movimento sem abrir mão da acessibilidade
Todo o sistema respeita a preferência de “reduzir movimento” do usuário, o contraste foi medido no pior caso sobre o vídeo e os alvos de toque no mobile têm 48 px por questões de acessibilidade.
Decisão
Performance como parte do design
A cena do hero precisou ser otimizada, pois estava muito pesada: substituí um vídeo de 16 MB e otimizei a cena para ficar cerca de 4x mais leve. O vídeo da seção institucional caiu de 18,9 MB para 3,2 MB.
■ Aprendizados — save data
O que absorvi para o meu trabalho
“O poder da comunicação simples e a autonomia de criar de ponta a ponta.”
Aprendi a equilibrar a seriedade de um setor tradicional com a leveza de uma interface moderna, e vi na prática como simplificar a linguagem aproxima os usuários. Ir do Figma direto para o código, com apoio de IA como o Claude, garantiu que a proposta visual chegasse intacta ao usuário final.