UX/UI Design • E-commerce • CMS • Responsive Design
Desenvolvimento de experiência sazonal para e-commerce dentro da plataforma VTEX, com foco em modularidade CMS, ambientação visual natalina e escalabilidade para campanhas promocionais.
O Desafio das Campanhas Sazonais
As campanhas sazonais exigem agilidade extrema na atualização da identidade visual e na gestão de conteúdos dinâmicos. A dependência técnica pode comprometer o timing das promoções.
O Natal representa o maior pico de faturamento, demandando uma plataforma capaz de atuar como o motor principal da operação, eliminando gargalos técnicos e garantindo performance ininterrupta.
Desenvolvimento de experiência sazonal para e-commerce dentro da plataforma VTEX, com foco em modularidade CMS, ambientação visual natalina e escalabilidade para campanhas promocionais.
Agilidade na troca visual.
Autonomia total para o marketing.
Independência total para gestão de banners, prateleiras dinâmicas e vitrines personalizadas em tempo real.
Landing Page
Natal
Redesign de uma experiência de compra sazonal para o e-commerce Oba Hortifruti — da dispersão de produtos a um fluxo de descoberta contínuo, pensado para o maior pico de vendas do ano.
O que foi este projeto
O objetivo era transformar uma vitrine de produtos dispersos em uma jornada de compra coesa para a época mais importante do calendário do varejo alimentar. O desafio estava em equilibrar dezenas de categorias, campanhas e ofertas dentro de um único fluxo, sem perder escaneabilidade. Estruturei a página em blocos modulares — do apelo emocional do hero à urgência funcional do cupom — testando hierarquia e agrupamento em cada etapa. O resultado é uma landing que guia o visitante da inspiração à decisão de compra sem fricção visual.
Um pico de vendas, uma única página
Datas comemorativas representam um dos maiores períodos de faturamento do varejo. Para o Natal, isso significa concentrar em uma única landing a força de todo o catálogo sazonal — sem transformar a experiência em um mural de banners.
Era necessário criar uma experiência que:
- Facilitasse a descoberta de produtos entre dezenas de categorias natalinas
- Organizasse categorias de forma clara, sem sobrepor campanhas
- Aumentasse a conversão em um período de altíssima concorrência por atenção
- Destacasse campanhas e kits sem competir visualmente com a vitrine de produtos
- Melhorasse a escaneabilidade em uma página naturalmente longa
O que o diagnóstico revelou
Antes de desenhar qualquer tela, mapeei os pontos de atrito da experiência sazonal existente.
Produtos dispersos
Itens de categorias distintas apareciam sem critério de proximidade, dificultando comparação.
Pouca hierarquia
Títulos, preços e selos de oferta disputavam o mesmo peso visual em quase todos os blocos.
Muitos banners
O excesso de peças promocionais criava ruído e competia com a vitrine principal de produtos.
Descoberta difícil
Não havia um caminho claro entre “o que é a campanha” e “o que eu posso comprar agora”.
Baixa organização
Categorias natalinas (ceia, presentes, sabores) não tinham fronteiras visuais definidas.
Pouco destaque para kits
Kits — item de maior ticket médio — apareciam com o mesmo tratamento de um produto avulso.
O que a página precisava resolver
Melhorar navegação
Criar blocos com início, meio e fim claros dentro do scroll.
Facilitar a compra
Aproximar decisão e ação — do interesse ao carrinho, em poucos gestos.
Valorizar campanhas
Dar peso visual proporcional ao impacto comercial de cada campanha.
Organizar categorias
Separar ceia, presentes e sabores em territórios visuais distintos.
Criar fluxo contínuo
Fazer a página se ler como uma narrativa, não como uma coleção de seções soltas.
Melhorar experiência mobile
Garantir que a hierarquia sobrevivesse à quebra de grade em telas menores.
Do diagnóstico à entrega
Seis etapas, uma única direção: da descoberta do problema à validação da solução final.
Descoberta
Mapeamento de dores da campanha anterior e do catálogo sazonal.
Arquitetura
Definição da ordem dos blocos e da hierarquia entre categorias e campanhas.
Wireframe
Estruturação de baixa fidelidade para validar fluxo antes da camada visual.
UI
Aplicação da identidade natalina — paleta, tipografia e fotografia de produto.
Validação
Revisão de hierarquia, contraste e legibilidade em diferentes larguras.
Entrega
Handoff de componentes para implementação modular em VTEX.
Como comecei
Comecei pelo topo por ser o ponto de maior decisão do visitante: ficar ou sair. O hero foi desenhado como um bloco de imagem em tela cheia, deliberadamente vazio de texto competindo — o wireframe usa apenas um placeholder, para forçar a decisão de que a força da campanha viria da fotografia, não de blocos de texto sobrepostos.
“Detalhes que encantam” foi posicionado logo após o hero como uma ponte emocional antes da primeira vitrine de produtos — o vídeo prepara o terreno para a venda.
Como organizei os blocos
- Imagem-âncora + grade de produtos. Cada vitrine recebeu uma foto de destaque à esquerda e uma grade de 4 produtos à direita, para dar contexto antes do preço.
- Kits em pares. Kit Ceia e Kit Presente foram isolados em dois blocos grandes, lado a lado — o tamanho generoso comunica maior valor percebido.
- Fundo como fronteira de categoria. Cada vitrine recebeu uma cor de fundo própria (vinho, verde, bege), criando territórios visuais sem precisar de títulos extras.
A lógica por trás da sequência
A ordem dos blocos segue a jornada natural de decisão de uma ceia: primeiro a inspiração (vídeo e categorias), depois a completude (kits e sabores), em seguida a novidade (lançamentos) e por fim o suporte à decisão (receitas). O cupom aparece só ao final, como um último empurrão — nunca como a primeira mensagem da página.
Do esqueleto à interface final
Arraste o controle para comparar o wireframe estrutural com o layout final aplicado.
Princípios aplicados em cada decisão
Hierarquia Visual
Tamanho, peso e contraste guiam o olhar do título ao preço em ordem de importância.
Agrupamento
Produtos da mesma categoria compartilham fundo e proximidade espacial.
Escaneabilidade
Blocos curtos e repetíveis permitem varrer a página sem esforço de leitura.
Consistência
Mesmo padrão de card, selo e CTA se repete em todas as vitrines de produto.
Design Responsivo
A hierarquia da grade se reorganiza em coluna única sem perder significado.
Uso de Espaço
Espaço em branco intencional separa territórios de categoria e reduz fadiga visual.
Padrões Visuais
Selos de oferta, ícones de ação e tipografia repetem-se de forma previsível.
Arquitetura da Informação
A ordem dos blocos segue a jornada de decisão de compra da ceia.
Leis da Gestalt
Proximidade e similaridade organizam produtos em unidades reconhecíveis à primeira vista.
As peças por trás da interface
A landing completa, do topo ao rodapé
Clique na imagem para dar zoom e navegar por todos os blocos em alta resolução.
clique para zoom · arraste para navegar
Uma hierarquia, três larguras
O layout foi pensado para reorganizar densidade sem perder a lógica de agrupamento por categoria.
O que este projeto me ensinou
- ＋Planejamento antecipado evita retrabalho em campanhas com prazo curto.
- ＋Organização visual é tão importante quanto o conteúdo em si.
- ＋Priorização de blocos define o sucesso comercial de uma campanha.
- ＋Escalabilidade do sistema importa mais do que a tela isolada.
- ＋Design para campanhas exige equilíbrio entre urgência e elegância.
O que a nova estrutura trouxe
- ✓Maior organização percebida entre categorias e campanhas.
- ✓Fluxo de leitura contínuo, do hero ao cupom final.
- ✓Experiência de compra mais intuitiva e menos fragmentada.
- ✓Maior destaque visual para kits e campanhas sazonais.
- ✓Melhor percepção visual geral da marca durante o período.