Ponto de partida
Quem é a Locaweb, e pelo que eu respondia no redesign
A Locaweb é uma empresa brasileira pioneira em soluções de presença digital, hospedagem de sites e computação em nuvem, com mais de 160 mil clientes na base e mais de 500 mil sites hospedados. A última atualização de design do e-commerce foi em 2015, e de lá para cá houve só manutenção de conteúdo.
No projeto de redesign, atuei como product designer em squad composta por GPM, PM, PMM, BA, SEO, product designer, UX writer, tech lead, desenvolvedores e scrum master. Meu foco principal foi liderar a direção visual e garantir a escala das decisões de design, por meio da criação de design system, guias de produção de imagem e interfaces para o e-commerce.
No dia a dia apresentava as soluções criadas à GPM e aos stakeholders e, depois da aprovação, colaborava no handoff junto aos desenvolvedores da squad.
Março de 2025
Cinco dias úteis para a home, e o site inteiro depois dela
Início de 2025 o comando de Be Online, segmento da Locaweb focado em infraestrutura para internet, mudou e o direcionamento estratégico da empresa também, e em março, o redesign do e-commerce foi priorizado.
O desafio
Direcionar a compra do usuário considerando seu momento enquanto empresa
O site atendia bem a base que já existia, majoritariamente vinda de TI. O público que a empresa queria alcançar ia além dela, e essa é a diferença entre o usuário que já estava lá e o público-alvo do negócio. O e-commerce foi desenhado para encurtar o caminho de quem já conhecia o produto e sabia o que ele resolvia, e quem chegava com um problema de negócio não tinha por onde começar a navegar. Passei a direcionar a compra pelo momento de cada cliente, considerando trajetória, necessidade e nível de entendimento de tecnologia, e reestruturei o design a partir disso.
O que eu já tinha na mão
Quatro levantamentos reunidos antes de o prazo existir
Quando o prazo começou a contar, eu já tinha investigado o e-commerce antigo. Parte do material veio pronta da casa, como a pesquisa sobre o cliente da Locaweb; o restante veio da investigação que fiz nos meses anteriores ao redesign.
-
Quem compra
Pesquisa pronta com 361 clientes, conduzida por outra profissional da casa: fundador de pequena ou média empresa, de 42 a 53 anos, a maioria com passagem por TI.
-
As páginas no ar
Li a home e a página de hospedagem do topo ao rodapé, contando item por item: as 16 entradas do menu, os blocos, as linhas de cada card de preço.
-
O mercado
Comparei sete concorrentes em doze frentes — da tipografia e da fotografia ao menu, à busca e à prova social. A lista saiu junto dos stakeholders; a análise é minha.
-
Por onde entram
Levantei no Google Analytics, com o analista da casa, o comportamento por dispositivo — setembro de 2023 contra 2024: de onde vem o acesso e a venda.
Antes de desenhar
Em que ordem decidir, quando o prazo não deixa voltar atrás
A primeira coisa que fiz foi negociar a ordem das entregas com os stakeholders. Definir a estrutura da home em primeiro lugar foi a decisão mais acertada: no momento da entrega, a discussão não se voltou para aspectos estéticos e ficou no problema de arquitetura da informação. Depois da primeira entrega, consegui negociar a criação do design system do e-commerce, porque só assim ganharíamos escala nas decisões de design para as outras páginas de produto que viriam à frente.
-
12 a 18 de março
Wireframe
da homePara a primeira entrega, coube definir a estrutura do e-commerce em baixa fidelidade.
-
19 de março a 5 de abril
Direção de arte
e design systemAprovei o moodboard e negociei a criação do design system, dando escala às decisões de design.
-
24 de março a 1º de abril
Home
completaA tela foi para o dev com desktop, tablet e celular desenhados, estado por estado.
-
2 a 16 de abril
PDP
hospedagemO que a home custou em decisão de estrutura, a PDP já encontrou pronto.
As decisões
O que mudou em cada ponto, e por quê
A navegação saiu de 16 entradas para 5
Quem chega com um problema de negócio encontra o agrupador por solução; quem já sabe o nome do produto continua achando pelo grupo de produtos. Entre os oito sites que comparei, o da Locaweb era o de menu mais longo: 16 entradas, contra 12 do segundo colocado e 6 dos mais enxutos.
- Espaço fixo para campanhas dentro do agrupador Soluções.
- Primeiro nível do menu não aumenta quando o catálogo de produtos cresce.
Evidências
O topo da home virou espaço de comunicação, não vitrine
A home antiga abria com um carrossel de cards de produto — os mesmos itens que o menu, logo acima, já listava. Tirei o carrossel e deixei no lugar uma área que o marketing troca. No lançamento ela recebeu a proposta de valor da empresa.
- A página abre falando de um assunto por vez.
- O topo deixou de repetir o menu.
Evidências
Os produtos passaram a ser listados pelo momento do negócio
O bloco de produtos repetia o menu: mesma lista, mesma ordem por categoria. Nenhuma camada perguntava o que a pessoa estava tentando fazer. Reorganizei a seção pelo momento do negócio — quem está colocando a empresa na internet vê uma coisa, quem já vende e precisa crescer vê outra.
Evidências
A home passou a mostrar a voz de quem compra
A home provava confiança falando de si mesma: "mais de 25 anos de experiência", selo de reputação, e perguntas frequentes que abriam com "confie numa empresa consolidada". Nenhum cliente aparecia. Abri um bloco de prova social com vídeo e comentário assinado.
- Quem chega pela primeira vez encontra a prova social.
- O vídeo mostra o cliente e o negócio dele, não um depoimento genérico.
- Depoimento novo entra sem redesenhar a tela.
Evidências
A comparação de planos ganhou uma camada técnica que desinflou os cards de preço
A página antiga mantinha todas as informações dentro do próprio card de preço, e seguindo essa lógica o card cresce sem limite. Os dados mostravam que a cada 10 vendas 1 vinha do celular, que é onde uma coluna interminável de bullets cabe pior. Minha hipótese era que melhorar a experiência ali poderia aumentar as vendas. Deixei no card as principais características e os benefícios, e levei a especificação técnica para uma tabela abaixo, que abre no clique.
- Card orientado pelo benefício para o negócio.
- Comparação entre planos completa.
- Especificação técnica a um clique.
Evidências
Escrevi um guia para a IA produzir imagem dentro de uma direção
As fotos vinham de três famílias de banco de imagens que não conversavam: nenhum padrão de luz, cor ou enquadramento, e sempre a mesma pose. Em dois casos o mesmo arquivo aparecia no topo e no bloco de produtos, à distância de uma rolagem. Defini uma direção única e escrevi um guia de produção com IA.
- Com o guia na mão, o modelo tem menos o que chutar.
- O outro designer produz imagem na mesma direção, sem passar por mim.
- O marketing recebeu o guia e usa o mesmo padrão.
Evidências
Liderei a criação do design system que passou a sustentar as páginas seguintes
Para as decisões chegarem ao time sem eu repetir cada uma tela a tela, liderei a criação do design system junto com a primeira página: duas camadas de valores — cor, espaço e tipografia num lugar só —, 30 e poucos componentes com todos os estados, e 14 blocos de página prontos.
- O contraste é decidido uma vez, no valor, e vale em toda tela.
- A responsividade é resolvida dentro do componente, não página a página.
- Cada página nova é montada com bloco pronto, em vez de recomeçada.
As telas
A home e a página de produto, como ficaram
Acessibilidade
A home nova foi medida contra a antiga, com o código pronto
Um desenvolvedor do time rodou as duas versões no AccessMonitor, o avaliador de acessibilidade do governo português, que checa a página contra a norma WCAG 2.1.
-
Pontuação
6,2 8,3
-
Práticas não aceitáveis
11 6
-
Peso da página
307 KB 188 KB
Agosto de 2025
O primeiro mês limpo com a página nova no ar
Agosto foi o único mês sem promoção com a página nova no ar, e por isso é o mês de referência: julho teve promoção e só dez dias úteis com ela publicada. A comparação é contra a média dos meses sem promoção do mesmo ano.
+13% na quantidade de vendas de hospedagem no mês
+9% nas vendas por dia útil, sem efeito do calendário
O que ficou
Além das duas páginas
- Produto
- A descoberta de produto passou a começar pelo momento do negócio. A comparação entre planos cabe em qualquer largura. O menu para de crescer quando o catálogo cresce.
- Operação
- A entrega virou incremental: cada página seguinte foi montada com bloco pronto, sem recomeçar a tela.
- Organização
- O design system que liderei virou capítulo oficial do design system da Locaweb e passou a sustentar o trabalho dos dois designers. O guia de imagem foi adotado pelo design e entregue ao marketing.
Os limites
O que esses números provam, e o que não provam
É um mês comparado a uma média de meses, e a base dos meses anteriores estava baixa. O número mostra recuperação de vendas, e mostra junto o efeito de tudo o que aconteceu em agosto — não isola o que veio do design. Não houve teste controlado.
Com mais prazo
O que eu faria diferente, e por quê
- Validação
- Todas as decisões subiram com evidência, e nenhuma passou por quem compra. Com prazo, eu teria rodado teste de árvore na navegação antes do ar e A/B nas telas depois.
- Alcance do benchmark
- Comparar concorrentes mostra o que o mercado faz, não o que o dono de PME prefere. Serviu para decidir estrutura; não serve para afirmar preferência.
- Métrica de sucesso
- Nenhuma foi definida no começo, e os números aqui foram levantados depois. A conversão no celular era o indicador mais direto para checar a decisão de responsividade, e nunca foi medida.