Estudo de caso · 2026
ROI Mine
O diamante do logo em partículas 3D que se desfaz em dados, um tema WordPress próprio e 229 páginas migradas com o SEO idêntico ao original.
- Cliente
- ROI Mine
- Segmento
- Agência de marketing orientada por dados
- Entrega
- Site + tema WordPress próprio
- Ano
- 2026
- No ar
- No arroimine.com
01 · O site
Rodando aqui dentro
Uma cópia do site roda dentro desta página: role, clique e troque entre computador e celular. O formulário está desligado aqui.
02 · O desafio
O site anterior era lento no celular e difícil de manter. A troca não podia perder nenhuma página que o Google já conhecia, e a equipe precisava continuar publicando no WordPress.
03 · A resposta
Uma home nova com o diamante do logo em partículas 3D que explode em dados ao rolar, um fluxo de 440 pontos que atravessa as cinco etapas do método, soluções em cartões empilhados e cases num trilho horizontal. Por baixo, um tema WordPress próprio, sem construtor visual, que migrou as 229 URLs com o mesmo SEO do site anterior.
- Home com 3D e rolagem animada
- Tema WordPress próprio
- Migração de 229 URLs
- Landing page de SEO e GEO
- Login do painel protegido
- Antispam próprio nos formulários
04 · Como foi feito
Sete etapas, uma equipe
Cada etapa tem uma frente responsável e um ponto de aprovação antes da seguinte. A IA entra como ferramenta, nunca como autora.
- 01Estratégia e conteúdo
Imersão
Rastreamento completo do site anterior: cada URL, título, descrição e link interno virou a fonte de verdade da migração.
- 02UX e arquitetura
Estratégia e conteúdo
Textos mantidos do site original, organizados na lógica do próprio método da agência: extrair, organizar, compreender, analisar e gerar insight.
- 03Direção de arte
Arquitetura e wireframes
Home, páginas internas, blog, soluções e cases desenhados como um sistema só, com as internas em fundo claro para leitura.
- 04Motion e interação
Direção de arte
Noite azul, ciano e o diamante como assinatura. Sora nos títulos, Lato no texto e JetBrains Mono nos dados.
- 05Desenvolvimento
Desenvolvimento
Three.js, GSAP e Lenis carregados depois da primeira pintura. Tema WordPress com os mesmos tipos de conteúdo do anterior e o Yoast cuidando do SEO.
- 06SEO, AEO e dados
SEO, AEO e performance
Comparação automática de SEO entre o site antigo e o novo, URL por URL, e uma landing page dedicada a SEO e GEO.
- 07Qualidade e performance
Testes e entrega
PageSpeed antes e depois em todas as páginas-modelo, antispam testado e login do painel em endereço próprio.
05 · Do wireframe ao layout
A estrutura antes da arte
Seis telas ao longo da rolagem. Arraste a divisória: de um lado a estrutura (blocos, títulos, fotos e botões), do outro o layout final.
06 · Direção de arte
Cores e tipos
- Fundo#04070b
- Painel#0b1622
- Azul#1ea2e9
- Azul profundo#0078b9
- Ciano#3fe6ff
- Tinta#eaf3f9
- SoraTítulos
- LatoTexto
- JetBrains MonoDados
07 · Medido, não prometido
Notas do PageSpeed
Celular: site anterior e site novo. Desktop: site novo.
- 61Celular antes
- 95Celular depois
- 99Desktop depois
08 · Quem pensou cada parte
Sete frentes, um site
- 01
Estratégia e conteúdo
Quem chega, o que precisa entender e em que ordem. Define a história antes de qualquer tela.
- 02
UX e arquitetura
Mapa da página, wireframes e o caminho até o contato, testado no celular primeiro.
- 03
Direção de arte
Paleta, tipografia, fotografia e o elemento de assinatura que torna o site reconhecível.
- 04
Motion e interação
O que se move, por quê e em que velocidade. Tudo respeita quem pede movimento reduzido.
- 05
Desenvolvimento
Código próprio, sem construtor visual: HTML leve, CSS crítico embutido, painel quando o cliente precisa.
- 06
SEO, AEO e dados
Estrutura para o Google e para as IAs: schema, FAQ de respostas, metadados e consentimento LGPD.
- 07
Qualidade e performance
PageSpeed, acessibilidade, segurança e teste em desktop e celular antes de entregar.
Quer um site assim?
Conte o seu projeto. A Bertoni responde no mesmo dia, pelo WhatsApp ou e-mail.