Redesign do e-commerce da Locaweb

Uma plataforma sem atualização desde 2015. Duas páginas redesenhadas. Em julho de 2025, primeiro mês com a nova PDP no ar, as hospedagens vendidas voltaram à casa dos 3 mil — marca não atingida desde a Black Friday de novembro de 2023.

Entrega2025
ClienteLocaweb
PapelProduct designer
Duração10 meses
Letreiro da marca Locaweb em frente à sede da empresa

Contexto

A Locaweb é referência em tecnologia para pequenos e médios empreendedores no Brasil. O momento da empresa redefiniu quem o e-commerce precisava atender: depois de adquirir a Kinghost, segmentou o atendimento — a Kinghost cuidaria do público técnico; a Locaweb se voltaria para PMEs menos técnicos, fundadores cuidando do próprio negócio. O público da plataforma deixou de ser quem entende de infraestrutura e passou a ser quem precisa dela sem necessariamente entender.

Problema

O e-commerce não acompanhou essa virada: sem atualização relevante desde 2015, a interface seguia desenhada para o público técnico de antes, resolvendo com um corredor curto entre produto, preço e compra — batia de cara com o que precisava e seguia direto para conversão. Certo para quem já entendia de infraestrutura. Só que esse não era mais o público da Locaweb. O público que a Locaweb priorizava precisava do contrário. Esses fundadores não-técnicos precisavam ver onde o produto ajudava o negócio deles antes de comparar planos ou decifrar termos. Para essa etapa de descoberta, a interface não oferecia nada. Estado antigo — home e PDP de hospedagem antes do redesign.

Processo

O projeto rodava em stage-gate, ou seja, cada fase só avança depois de um comitê validar a anterior. No entanto, novos diretores da empresa trouxeram novas orientações para o projeto.

O início

Ao entrar no projeto, encontrei reports e canvas de Miro com pesquisas e ideações de design, marketing e SEO. Consumi esses entregáveis e levantei o que faltava: comportamento do usuário no site atual e como os concorrentes se posicionavam no mercado.

Mudança

Enquanto eu fechava o benchmarking, a nova diretoria encerrou o stage-gate inteiro — sem mais fases ou comitês, só pediram a entrega final em 5 dias. Levei adiante o que já sustentava uma decisão: padrões da concorrência e atritos do site atual.

Duas fases

Dividi a entrega em duas fases. Fase 1: home e hospedagem — as páginas de maior tráfego — junto com o design system que sustentaria o resto. Fase 2: entrega incremental das páginas de produto restantes, já com blocks de UI prontos para montar o layout mais rápido.

Solução

A plataforma conduzia à compra, mas não ajudava usuário a entender antes de comprar — e era essa etapa, a descoberta, que o novo público mais precisava. Cinco dias não davam para desenhar a tela final com segurança — o risco maior era errar a arquitetura, não a estética. Separei as conversas: wireframes para validar a estrutura, moodboard à parte para a direção visual. Abri mão de impacto na aprovação para validar o essencial primeiro.

Arquitetura de informação

Na primeira e segunda dobra organizei quatro pontos:

  • Na header, o menu foi reagrupado por intenção, onde grupo Soluções é apresentado antes de Produtos.
  • Inicialmente a hero block, apresentou a proposta de valor ancorada nas necessidades do público alvo. Mas o espaço pode ser utilizado para destacar campanha ou lançamento de produto.
  • Os grandes números da empresa e o selo RA1000, posicionados logo abaixo da hero block — prova social que reduz a desconfiança de quem ainda não conhece a marca.
  • Novo product block, que direciona o visitante pro produto certo conforme o momento do negócio.

Direção de imagem

Para o e-commerce, priorizei fotografia de ambientes reconhecíveis — a padaria, o pequeno escritório, o atelier — em vez de ilustração: esse público pede cena concreta, não símbolo. A maior parte das imagens foi gerada com IA, desde que representasse fielmente o tipo de negócio do cliente; exceções usam pessoas reais — funcionários da Locaweb na seção de ajuda, clientes nos depoimentos.

Responsividade

Minha investigação de comportamento do usuário mostrou que, em um ano, o acesso mobile cresceu 21% sobre as sessões.

Os pontos mais críticos foram:

  • A navegação principal, na header.
  • Comparação de planos, na página de produto.
  • Tabela de especificações técnicas.

Acessibilidade

Auditoria formal não coube na janela que a diretoria impôs, mas o cuidado se traduziu em resultado medido por fora: com o código pronto, um desenvolvedor rodou a home antiga e a nova no AccessMonitor (avaliador WCAG 2.1 do governo português).

6,2 Pontuação
11 Práticas não aceitáveis
307KB Tamanho da página

Design system

Talvez a escolha mais difícil do projeto: construir os alicerces de um design system antes do time de desenvolvimento começar a codar as telas — tokens que viravam componentes, e componentes que se combinavam em blocks prontos para montar página. Todo o esforço extra evitou que débitos técnicos se aglomerassem: em algum momento a manutenção viraria pesadelo, e aí seria tarde para refatorar, porque sempre teria mais telas para entregar.

Resultados

Em julho de 2025, primeiro mês com a nova PDP no ar, as hospedagens vendidas voltaram à casa dos 3 mil — volume que, até então, só a Black Friday de novembro de 2023 alcançara. Agosto confirmou: primeiro mês completo, sem promoção, e o ganho se sustentou. Para isolar o efeito do design das variáveis sazonais, comparei agosto contra a média dos meses sem promoção do ano:

  • +13% na média da quantidade de vendas
  • +9% por dia útil — o corte mais conservador, que neutraliza a diferença de dias úteis entre os meses

Impacto na empresa

A fundação se pagou. Depois da Fase 1, seguimos desenhando as demais páginas de produto — eu e mais dois designers —, todas sobre a mesma arquitetura, os mesmos tokens e a mesma linguagem visual. Cada página nova custou uma fração da primeira: o retorno exato que a aposta no design system, em vez do hardcode, previra.

Adoção institucional

A adoção passou do produto. O design system do e-commerce foi incorporado como capítulo do design system corporativo da Locaweb — deixou de ser iniciativa isolada e virou parte oficial do sistema da empresa. E o guia de produção de imagens, com os tokens visuais, passou a ser usado pelo marketing.

Tem um produto com problema de experiência?

Me conta o contexto — não precisa ser brief completo. O diagnóstico vem antes do escopo.

Envie uma mensagem