Projeto

A SMMASH é uma loja de vestuário desportivo, onde o produto é vendido não só pelo corte e tamanho, mas também pela energia do padrão, cor, estampado e adequação a uma atividade específica. A marca comunica através de coleções visuais fortes e de uma ampla divisão por modalidades desportivas: MMA, OCR, Crossfit, corrida, BJJ, Muay Thai, judo, boxe e kickboxing.

A loja opera no setor do vestuário, mas o seu catálogo exige uma apresentação mais dinâmica do que uma loja clássica de moda. Os produtos diferem frequentemente em detalhes gráficos, construção, finalidade de treino e forma de utilização. Para o utilizador, uma pré-visualização rápida de um segundo ângulo, cor ou variante visual pode ser mais importante do que o próprio nome do produto.

Contexto de negócio

A SMMASH combina a venda de vestuário técnico com um forte caráter visual da marca. A oferta inclui produtos para homem, mulher e criança, bem como vestuário de clube e projetos personalizados. No site são visíveis categorias lifestyle e desportivas, entre as quais Combat, OCR, Treino e Corrida, o que mostra que o cliente navega frequentemente pelos produtos segundo o estilo de atividade, e não apenas segundo o tipo de roupa.

Um elemento importante da loja é também a apresentação de projetos e visualizações. No caso do vestuário desportivo, a decisão de compra está fortemente ligada ao aspeto do produto: cores intensas, padrões, contrastes e disposição do estampado têm de ser visíveis já ao nível da listagem.

Desafio

O maior desafio num catálogo deste tipo é conciliar duas necessidades:

• carregamento rápido das listas de produtos,
• apresentação visual atrativa sem necessidade de entrar na página de cada produto.

No vestuário desportivo, uma imagem estática na listagem muitas vezes não é suficiente. O cliente quer ver rapidamente como é o produto noutro ângulo, como assenta o estampado, se a cor é suficientemente expressiva e se o produto se adequa a um estilo de treino específico.

Ao mesmo tempo, uma loja com um catálogo alargado não pode carregar demasiadas imagens logo de início, porque isso sobrecarregaria a página, pioraria a experiência em mobile e poderia influenciar negativamente os Core Web Vitals.

Solução

Para este tipo de loja, funciona particularmente bem um mecanismo de galeria de produto ativado ao passar o cursor ou ao tocar no produto. A listagem mantém-se leve no primeiro render, mas o utilizador pode pré-visualizar rapidamente a imagem seguinte sem sair da categoria.

Pressupostos principais:

• o primeiro carregamento da categoria mantém-se o mais leve possível,
• as imagens adicionais são obtidas apenas após o carregamento da página ou quando o produto se aproxima da área visível,
• a segunda imagem é preparada antecipadamente, antes de o cliente passar o cursor sobre o produto,
• a galeria também funciona para listas de produtos carregadas durante o scroll,
• em mobile, o funcionamento da galeria não bloqueia o scroll natural da página.

No caso da SMMASH, este mecanismo permite mostrar mais valor do produto já na listagem: estampado, esquema de cores, detalhe, ângulo alternativo ou forma de apresentação do produto no corpo.

Efeito para o utilizador

O utilizador pode comparar produtos mais rapidamente sem abrir várias páginas de produto. Isto é particularmente importante quando o catálogo inclui muitos tipos de vestuário semelhantes, mas cada produto tem um design gráfico diferente.

Benefícios:

• leitura mais rápida da coleção,
• melhor exposição de cores e padrões,
• menor número de cliques necessários para comparar produtos,
• perceção mais dinâmica da loja,
• manutenção de um primeiro carregamento leve da categoria.

Porque é que isto se adequa à SMMASH

A SMMASH vende produtos com uma forte componente visual. No caso de rashguards, t-shirts, leggings, calções ou maillots desportivos, o cliente reage frequentemente ao aspeto antes de analisar os detalhes técnicos. Por isso, a listagem deve funcionar não apenas como catálogo, mas também como um lookbook rápido.

O mecanismo hover/swipe ajuda a mostrar:

• padrões e cores intensos,
• ângulos alternativos do produto,
• detalhes do estampado,
• diferenças entre produtos da mesma categoria,
• o caráter visual da coleção.

Direções de desenvolvimento recomendadas

• atributo dedicado de imagem hover para produtos, para que a equipa da loja possa indicar o melhor ângulo para a listagem,
• lógica separada para coleções desportivas e lifestyle,
• análise de cliques após interação com o hover,
• teste A/B: listagem clássica versus listagem com segunda imagem ativa,
• otimização da prioridade de prefetch para os primeiros produtos em vista.

Resumo

A SMMASH é um exemplo de uma loja de vestuário em que a apresentação visual faz parte do produto. A cor, o estampado e a energia do design têm impacto direto na decisão de compra. A galeria ativada na listagem permite mostrar estes elementos mais rapidamente, sem sobrecarregar o primeiro carregamento da página.

Na loja smmash.pl, o cliente encontra categorias de vestuário desportivo, onde a decisão de compra começa muitas vezes por uma escolha rápida: disciplina, coleção, finalidade (por exemplo, «BJJ», «MMA», «ginásio», «outdoor»). A navegação por camadas clássica é correta, mas exige aceder aos filtros laterais e fazer vários cliques.

A implementação do Kowal Tags Bar adicionou acima da listagem uma barra de «tags» baseada num atributo dropdown (por exemplo, «Desporto / Coleção»). Efeitos:

• o utilizador vê de imediato as escolhas mais importantes e filtra a lista com um clique,

• desapareceram as frustrações associadas a clicar em filtros sem resultados (as tags sem produtos não são apresentadas),

• no modo Amasty, os links são amigáveis para SEO e coerentes com a estrutura de endereços existente,

• a legibilidade da listagem em mobile aumenta, porque o filtro mais importante fica «acima dos produtos» e não escondido no painel lateral.