Projeto

A SMMASH é uma loja de vestuário desportivo em que o produto é vendido não só pelo corte e pelo tamanho, mas também pela energia do padrão, pela cor, pela estampagem e pela adequação a uma atividade específica. A marca comunica através de coleções visuais fortes e de uma ampla segmentação desportiva: 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 de moda clássica. 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 uma segunda imagem, 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 uma forte identidade 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, incluindo Combat, OCR, Treino e Corrida, o que mostra que o cliente navega frequentemente pelos produtos de acordo com o estilo de atividade, e não apenas pelo tipo de peça.

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 a disposição da estampagem devem ser visíveis logo ao nível da listagem.

Desafio

O maior desafio neste tipo de catálogo é conciliar duas necessidades:

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

No vestuário desportivo, uma única imagem estática na listagem muitas vezes não é suficiente. O cliente quer ver rapidamente como o produto aparece noutra perspetiva, como a estampagem fica disposta, 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 extenso não pode carregar demasiadas imagens de imediato, pois isso sobrecarregaria a página, prejudicaria a experiência em mobile e poderia afetar 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 permanece leve no primeiro render, mas o utilizador pode pré-visualizar rapidamente a imagem seguinte sem sair da categoria.

Principais pressupostos:

• o primeiro carregamento da categoria permanece o mais leve possível,
• as imagens adicionais são descarregadas 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 logo na listagem: estampagem, cores, detalhe, perspetiva alternativa ou forma de apresentação do produto no corpo.

Efeito para o utilizador

O utilizador pode comparar produtos mais rapidamente sem abrir várias fichas de produto. Isto é especialmente importante quando o catálogo contém muitos tipos de vestuário semelhantes, mas cada produto tem um projeto gráfico diferente.

Benefícios:

• análise mais rápida das coleções,
• melhor exposição de cores e padrões,
• menos cliques necessários para comparar produtos,
• sensação mais dinâmica da loja,
• manutenção de um primeiro carregamento leve da categoria.

Porque se adequa à SMMASH

A SMMASH vende produtos com uma forte componente visual. No caso de rashguards, t-shirts, leggings, calções ou equipamentos 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,
• perspetivas alternativas do produto,
• detalhes da estampagem,
• diferenças entre produtos da mesma categoria,
• o caráter visual da coleção.

Direções de desenvolvimento recomendadas

• atributo de imagem hover dedicado para produtos, para que a equipa da loja possa indicar a melhor perspetiva 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,
• aperfeiçoamento da prioridade de prefetch para os primeiros produtos visíveis.

Resumo

A SMMASH é um exemplo de loja de vestuário em que a apresentação visual faz parte do produto. A cor, a estampagem 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.