Bibi

Landing page para venda de catálogo de autopeças, entregue sob prazo de feira e redesenhada depois com base em dados reais de uso.

A primeira entrega

O Bibi é um catálogo que permite ao mecânico achar a peça certa pela placa do veículo. A landing precisava estar no ar para uma feira do setor, com sete dias de prazo e sem possibilidade de adiar.

Entreguei a página no prazo, com a estrutura completa: apresentação do produto, passo a passo de uso, números do catálogo, planos e dúvidas frequentes.

O que os dados mostraram

Depois de um tempo no ar, analisei o comportamento real dos visitantes no Clarity e cruzei com o que o time de CS ouvia de quem cancelava.

Dois problemas apareceram. As pessoas não entendiam o produto antes de assinar, porque a página descrevia a ferramenta sem mostrar ela funcionando. E a escolha entre três planos, com uma tabela comparando funcionalidades, transferia para o visitante uma decisão que ele não tinha informação para tomar.

O resultado era assinatura feita com expectativa errada, que virava cancelamento.

O redesenho

A segunda versão ainda não foi oficializada pela empresa. Ela está no ar em ambiente de testes, em fase de análise.

Experimentar antes de decidir. Coloquei o campo de busca por placa no topo da página. A pessoa usa o produto antes de assinar, então entende o que está comprando.

Um plano em vez de três. Substituí a tabela comparativa por uma oferta única com sete dias grátis. A decisão saiu de "qual dos três serve para mim" para "vale a pena testar", que é uma pergunta muito mais fácil de responder.

Mostrar em vez de descrever. Entraram um carrossel com as categorias de peça, as marcas parceiras com logo, um passo a passo em quatro etapas e um vídeo do produto em uso.

Menos texto, mais hierarquia. Reorganizei o conteúdo para que a informação essencial aparecesse primeiro e o detalhe ficasse acessível a quem quisesse, nas dúvidas frequentes.

O que fica

O projeto passou pelo ciclo completo: entregar sob pressão, medir o comportamento real, ouvir quem atende o cliente e refazer com base no que os dados mostraram.

Tecnologias usadas

Primeira versão

Figma. Protótipo interativo da página, usado para alinhar o produto antes do desenvolvimento.

Desenvolvimento. Implementação feita por uma agência terceira junto com o time de desenvolvimento interno.

Segunda versão

Microsoft Clarity. Análise do comportamento real dos visitantes, base para as decisões do redesenho.

Figma. Protótipo da nova página.

Figma MCP com Claude Code. Ligação entre design e código, gerando as telas a partir do próprio arquivo do Figma.

shadcn/ui. Biblioteca de componentes da interface.

Next.js. Front-end da nova versão.

Vercel. Hospedagem do ambiente, sem custo de infraestrutura.