O site antigo tinha navegação escondida em menu hambúrguer, PLP pobre em informação e uma home estática que dependia de desenvolvimento a cada campanha.
Arezzo&Co
Redesign Alexandre Birman
Luxo e performance em um site modular
Como traduzi o rebranding da marca para o digital e dei autonomia ao marketing para contar cada coleção.
- Empresa
- Arezzo&Co
- Produto
- E-commerce Alexandre Birman
- Plataforma
- Web, mobile-first
- Meu papel
- Product Designer: UI strategy, design system e prototipação
- Time
- Eu, como designer única, em parceria com o PO
Redesenhei header, home e PLP com um sistema de componentes modulares inspirado em maisons internacionais como Dior e Prada.
Marketing monta a home de cada coleção sem depender de dev, a percepção de valor fica à altura das boutiques e a descoberta de produto ganha velocidade.
Uma marca de luxo com um site que não acompanhava o rebranding
A Alexandre Birman passou por um rebranding, e o site precisava traduzir esse novo posicionamento para o digital. O desafio era equilibrar duas coisas: a experiência de uma boutique de luxo e a performance de um e-commerce.
Navegação escondida
No desktop, as categorias ficavam atrás de um menu hambúrguer. O mix de produtos não era escaneável.
PLP pobre em informação
A listagem mostrava pouco sobre cada produto, o que deixava a descoberta lenta.
Home estática
Cada nova campanha dependia de desenvolvimento, e o marketing não tinha autonomia para contar a história de cada coleção.
Objetivos do projeto
- Traduzir o rebranding para a experiência digital
- Dar autonomia ao marketing para montar a home de cada coleção
- Tornar a navegação e a descoberta de produto mais rápidas
- Elevar a percepção de valor ao nível das boutiques
O que estava travando o site antigo
Comecei olhando a interface antiga com olhar crítico e depois fui ver como as maisons internacionais resolvem os mesmos problemas.
Diagnóstico da interface antiga
Analisei o site antigo em três frentes: navegação, densidade de informação da PLP e rigidez editorial da home.
O que isso me mostrouOs problemas não eram só visuais. A estrutura impedia o cliente de descobrir produtos e impedia o marketing de se adaptar às coleções.
Benchmarking de maisons de luxo
Estudei como Dior, Prada, Jimmy Choo e Hermès organizam navegação, vitrines e listagem de produtos.
O que isso me mostrouNas maisons, a limpeza visual não é enfeite: ela organiza a informação e transmite a confiança que uma compra de alto valor exige.
Três pilares para o novo site
Cada pilar responde a um problema que apareceu no diagnóstico.
Estética como função
No luxo, a interface limpa é o que gera confiança para comprar. Cada elemento visual precisa ter um papel.
Nasce deO benchmarking das maisons.
Modularidade
Projetar em componentes, e não em telas, para que o marketing monte cada coleção sem depender de desenvolvimento.
Nasce deA home estática que travava as campanhas.
Descoberta fluida
Navegação visível, busca que sugere e listagem com mais informação para encurtar o caminho até o produto.
Nasce deO menu escondido e a PLP pobre em informação.
As decisões, uma a uma
Para cada decisão: o problema, o que eu fiz e por que fiz assim.
Descoberta fluida
Navegação visível no desktop
Problema
O menu hambúrguer escondia as categorias e deixava o mix de produtos difícil de escanear.
Decisão
Troquei o hambúrguer por um menu horizontal com submenu que abre no hover.
Por quê
O cliente enxerga de imediato o que a marca vende e chega à categoria com um movimento só.
Descoberta fluida
Busca preditiva visual e CEP no header
Problema
Encontrar um produto específico exigia navegar por categorias, e o cliente não sabia se havia estoque perto dele.
Decisão
A busca sugere produtos com imagem enquanto o usuário digita. O CEP no header verifica o estoque na boutique mais próxima.
Por quê
A imagem confirma a escolha antes do clique, e o CEP conecta o site às lojas físicas (drive-to-store).
Modularidade
Hero com vídeo e controle do usuário
Problema
A home precisava ter o impacto de uma campanha de moda sem atrapalhar quem quer comprar.
Decisão
Hero full-width com vídeo, CTA em glassmorphism e controle de play/pause.
Por quê
O vídeo traz a atmosfera da coleção, o CTA translúcido não compete com a imagem e o play/pause dá controle ao usuário, o que também é uma questão de acessibilidade.
Modularidade
Três tipos de vitrine para contar cada coleção
Problema
Cada coleção pede uma história diferente, e a home antiga só tinha um formato.
Decisão
Criei três tipos de vitrine que o time de conteúdo alterna: narrativa, híbrida e de venda.
Por quê
Com módulos bem definidos, o marketing monta a home de cada campanha sozinho, e o site continua consistente.
Estética como função
Uma PLP que converte
Problema
A listagem antiga mostrava pouca informação sobre cada produto, o que deixava a comparação lenta.
Decisão
Filtros laterais que não cobrem os produtos, cards com variações de cor, tags de pré-venda e exclusivo, favoritar rápido e blocos de SEO editorial.
Por quê
O cliente compara mais produtos sem sair da listagem, e o conteúdo editorial ajuda a página a ser encontrada.
Descoberta fluida
Mobile pensado à parte
Problema
Filtros laterais e grids densos não funcionam numa tela pequena e no toque.
Decisão
No mobile, os filtros abrem em tela cheia e o grid switcher deixa o cliente ver 1 ou 2 produtos por linha.
Por quê
Áreas de toque maiores para filtrar, e o próprio cliente escolhe entre ver detalhes ou comparar mais produtos.
Como validar e acompanhar
Estes são os indicadores que eu usaria para saber se o redesign cumpriu o que prometia:
Tempo de publicação de uma campanha
O que medirQuanto tempo o marketing leva para montar a home de uma nova coleção.
ObjetivoValidar se a home modular deu autonomia ao time de conteúdo.
Uso da busca e dos filtros
O que medirA % de sessões que usam a busca preditiva ou os filtros.
ObjetivoConfirmar que a descoberta de produto ficou mais fácil.
Clique da PLP para a PDP
O que medirA taxa de cliques da listagem para a página de produto.
ObjetivoVerificar se os cards mais ricos ajudam o cliente a decidir.
Conversão no mobile
O que medirA taxa de conversão de quem compra pelo celular.
ObjetivoGarantir que as decisões específicas para o mobile funcionam no toque.
O que este projeto me ensinou
- No luxo, a limpeza visual é funcional: ela gera a confiança necessária para compras de alto valor.
- Projetar em componentes, e não em telas, manteve a consistência mesmo com as trocas constantes de coleção.
- Dar autonomia ao marketing também é uma decisão de design: o site precisa funcionar bem nas mãos de quem vai operá-lo.
- UI Strategy
- Design System modular
- Arquitetura de informação
- Mobile-first
- Varejo de luxo