Redesign do site de uma plataforma de e-commerce B2B

A plataforma atende indústrias que vendem para distribuidores e consumidores ao mesmo tempo. É um produto com muitas peças (portal B2B, marketplace, integração com ERP), e o site antigo tentava explicar tudo em blocos de texto longos, que no celular viravam uma rolagem sem fim.

Quem chega ao site é decisor de indústria: tem pouco tempo e precisa entender em poucos segundos se a plataforma resolve o problema dele.

[a confirmar: algum dado de antes, como taxa de rejeição, tempo na página ou reclamação do time comercial]

Troquei parágrafos por cenas. Cada funcionalidade virou uma reprodução da interface real ou um diagrama isométrico que mostra o fluxo: onde o pedido nasce, por onde passa e onde termina.

• Uma câmera só. Todos os diagramas usam a mesma projeção isométrica, então o visitante aprende a ler o primeiro e lê o resto sem esforço.
• Composição presa ao texto, não à tela. O hero é travado à largura do bloco de texto. Assim a cena não se desmonta em monitores largos nem em telas estreitas.
• Design system antes das páginas. Tokens de cor, tipografia, grid de 8 px e escalas de radius e elevação foram definidos primeiro. Cada página nova sai do mesmo sistema.

Depois da revisão no desktop, cada bloco passou por uma segunda auditoria só de celular, com critérios que uma revisão de desktop não pega:

• Adaptar não é empilhar. Quando o desktop usa colunas lado a lado para mostrar estrutura, empilhar no celular apaga essa estrutura. Esses blocos foram redesenhados para o mobile.
• Toque. Todo botão e link com pelo menos 44 × 44 px, também no tablet, porque o dedo tem o mesmo tamanho.
• Piso de tipo. As reproduções de interface tinham textos de 7 a 9 px. Defini 10 px como mínimo para rótulo e 11 px para o que carrega informação, como valor, nome e status. Os textos ilegíveis caíram de 103 para 7.
• Texto com versão curta. Parágrafos que ocupavam quatro linhas no celular ganharam uma versão mobile própria, sem cortar a ideia.

Cena animada e página rápida costumam brigar. Para não sacrificar uma pela outra, medi a página nova contra a antiga no mesmo ambiente (Chrome headless, 1440 × 900) antes de publicar. O conteúdo principal passou a aparecer em 488 ms, contra 1.252 ms, cerca de 2,5 vezes mais rápido.

Minha experiência com SEO pesou aqui: velocidade de carregamento é critério de ranqueamento, então o redesign melhorou também a forma como a página é encontrada.

O processo de auditoria virou um padrão documentado, aplicado nas páginas seguintes do site. O maior aprendizado: medir cedo. Cada decisão de layout foi validada com número (área de toque, tamanho de fonte, altura, LCP), e isso tirou a discussão do campo do gosto.