Lançar três lojas ao mesmo tempo, com o mesmo código, para públicos opostos: premium (Dako), popular (Atlas) e exclusivo para colaboradores (Clube Eletro, B2E).
Avanti
Grupo Atlas: Dako, Atlas e Clube Eletro
Três marcas, uma arquitetura
Como lancei três e-commerces na mesma base VTEX sem que nenhum parecesse cópia do outro.
- Empresa
- Avanti
- Produto
- E-commerces Dako, Atlas e Clube Eletro
- Plataforma
- VTEX, web e mobile
- Meu papel
- UI Designer com foco em customização visual e UX nas áreas livres
- Time
- Eu, em parceria com o PO, validando cada etapa com o cliente
Criei uma base de componentes compartilhada e usei design tokens para mudar a comunicação de cada marca, de “oferta” a “exclusividade”.
Três lançamentos com custo de um, identidades claras para cada público e menos devoluções por compra errada de voltagem.
Três lojas, um só código e públicos opostos
O Grupo Atlas precisava lançar três e-commerces ao mesmo tempo, na mesma base VTEX: Dako, Atlas e Clube Eletro. A estrutura de código era a mesma, mas os públicos eram opostos: premium, popular e exclusivo para colaboradores.
Mesmo código, três públicos
Uma base compartilhada podia fazer as três lojas parecerem cópias umas das outras.
Restrições da plataforma
Árvore de departamentos, busca e PLP seguiam o padrão nativo da VTEX, com pouca margem para customização.
Alto ticket, alto risco
Eletrodomésticos são compras caras, e erros como escolher a voltagem errada viram devolução.
Objetivos do projeto
- Lançar as três lojas com uma base de componentes compartilhada
- Dar a cada marca uma identidade clara para o seu público
- Usar as áreas livres da VTEX para melhorar a experiência
- Dar segurança para compras de alto valor
Entender cada público e o que a plataforma permitia
Antes de desenhar, defini quem era o público de cada marca e mapeei onde a VTEX me dava liberdade e onde não dava. Trabalhei junto com o PO e validei cada etapa com o cliente.
Diretrizes visuais por persona
Defini diretrizes visuais para o público de cada marca, todas sobre a mesma estrutura de código.
O que isso me mostrouA diferença entre as marcas não estava na estrutura, e sim na comunicação: de “oferta” na Atlas a “exclusividade” na Dako e no Clube Eletro.
Mapeamento das restrições da VTEX
Separei o que era nativo da plataforma (árvore de departamentos, busca e PLP) do que tinha mais liberdade.
O que isso me mostrouHome, landing pages, minicart e rodapé eram as áreas com mais liberdade. Foi nelas que concentrei o trabalho de UX.
Um público para cada marca
Dako
Público premium.
Precisa de uma experiência de catálogo, com inspiração e lifestyle.
Atlas
Público popular.
Precisa achar o produto rápido, como o “Fogão 5 bocas”, e ver as ofertas com clareza.
Clube Eletro
Loja exclusiva para colaboradores (B2E).
Precisa sentir que tem acesso a algo exclusivo.
Três pilares para três marcas
Os pilares equilibram o que precisava ser compartilhado com o que precisava ser único em cada loja.
Base compartilhada
Uma biblioteca de componentes única para as três lojas, com design tokens para mudar a comunicação de cada marca.
Nasce deO mesmo código para três públicos.
Identidade por público
O mesmo componente pode se comportar de formas diferentes conforme a marca e o que o público precisa.
Nasce deOs públicos opostos de Dako, Atlas e Clube Eletro.
Segurança na compra
Validar escolhas críticas e dar referências para quem está comprando algo caro.
Nasce deO alto ticket e as devoluções por voltagem.
As decisões, uma a uma
Para cada decisão: o problema, o que eu fiz e por que fiz assim.
Identidade por público
Mesmo componente, comportamentos diferentes
Problema
O menu era o mesmo nas três lojas, mas os públicos procuravam produtos de formas diferentes.
Decisão
Na Dako, o menu usa ícones lineares como âncoras visuais. Na Atlas e no Clube Eletro, tipografia direta e alto contraste.
Por quê
Quem compra na Atlas quer achar o “Fogão 5 bocas” rápido. Na Dako, os ícones reforçam o tom mais sofisticado.
Segurança na compra
Minicart que evita devolução
Problema
Voltagem errada é uma das maiores causas de logística reversa em eletrodomésticos.
Decisão
A voltagem aparece em destaque no carrinho lateral, como uma validação antes do checkout.
Por quê
O cliente confere a escolha no último momento antes de pagar, quando ainda dá para corrigir.
Identidade por público
Uma home com a cara de cada marca
Problema
A home é a área mais livre da VTEX e a que mais comunica quem a marca é.
Decisão
Na Dako, um catálogo de lifestyle com imagens verticais, carrossel sincronizado e pins interativos. Na Atlas, categorias em GIFs e mosaicos de oferta.
Por quê
Cada público entra na loja e reconhece de imediato a proposta da marca: inspiração na Dako, oferta na Atlas.
Identidade por público
Clube Eletro: curiosidade que vira cadastro
Problema
A loja é exclusiva para colaboradores, e o acesso precisava parecer um benefício.
Decisão
Os preços ficam ocultos para quem não fez login.
Por quê
Esconder o preço desperta curiosidade e transforma a visita em cadastro, reforçando a sensação de exclusividade.
Segurança na compra
Mais referências para compras de alto valor
Problema
Antes de gastar muito, o cliente quer comparar e ter certeza da escolha.
Decisão
Autocomplete visual com miniatura e preço, comparador de até 4 produtos e card de produto com prova social.
Por quê
Cada recurso reduz a dúvida em um ponto da jornada: ao buscar, ao comparar e ao escolher.
Como validar e acompanhar
Estes são os indicadores que eu usaria para saber se as decisões funcionaram:
Devoluções por voltagem
O que medirO volume de trocas e devoluções motivadas por voltagem errada.
ObjetivoValidar se o destaque da voltagem no minicart evita a compra errada.
Uso do comparador
O que medirA % de sessões que usam o comparador antes de comprar.
ObjetivoConfirmar que o recurso ajuda na decisão de alto valor.
Cadastros no Clube Eletro
O que medirO número de colaboradores que se cadastram depois de ver os preços ocultos.
ObjetivoVerificar se a curiosidade vira cadastro.
Cliques no autocomplete
O que medirA % de buscas que terminam em um clique numa sugestão.
ObjetivoMedir se a busca visual encurta o caminho até o produto.
O que este projeto me ensinou
- Restrição de plataforma não impede identidade.
- Com design tokens e decisões de UI bem pensadas, o mesmo código pode comunicar propostas de valor opostas.
- Quando a liberdade é limitada, vale concentrar o esforço de UX nas áreas onde ela existe.
- VTEX
- Design tokens
- Sistemas multimarca
- UI Design
- E-commerce de alto ticket