Projeto

Slumbersac é uma loja de sacos de dormir para crianças, em que o produto pertence ao setor do vestuário, mas a decisão de compra é mais técnica do que na moda clássica. O pai ou a mãe escolhe não só o padrão e o tamanho, mas também a construção do saco de dormir, a espessura TOG, a estação, o material e detalhes práticos relacionados com a segurança e o conforto da criança.

A oferta inclui, entre outros, sacos de dormir com pernas, sacos de dormir clássicos, variantes sazonais 0.5 TOG, 1.0 TOG, 2.5 TOG e 3.5 TOG, bem como soluções como mangas amovíveis e pernas dobráveis com ABS.

Contexto de negócio

Na Slumbersac, o produto tem de ser explicado visualmente. O pai ou a mãe quer perceber rapidamente em que difere um determinado modelo: se tem pernas, se as mangas são amovíveis, que intervalo de temperaturas suporta, se é adequado para o verão, o inverno ou todo o ano.

No site são visíveis mensagens de produto e de confiança, incluindo mangas amovíveis, pernas dobráveis com ABS, avaliação Google de 4,8, envio rápido e comunicação do saco de dormir mais escolhido. Isto mostra que a loja combina uma apresentação emocional dos padrões com uma argumentação muito prática.

Desafio

Numa loja de sacos de dormir para crianças, a lista de produtos tem de tratar vários tipos de informação em simultâneo:

• padrão e cor do produto,
• tipo de construção,
• categorias TOG,
• sazonalidade,
• detalhes funcionais, por exemplo mangas, pernas, fecho, material,
• confiança e sensação de segurança.

Uma única imagem na listagem pode mostrar o estampado, mas nem sempre explica a construção. Para o pai ou a mãe, é importante distinguir rapidamente um saco de dormir clássico de um saco de dormir com pernas ou de uma variante com mangas amovíveis.

O segundo desafio é o mobile. As compras de produtos para crianças são muitas vezes feitas no telemóvel, por isso a interação tem de funcionar de forma natural: o scroll da página não pode ser bloqueado e a passagem para a fotografia seguinte deve ser simples.

Solução

Para a Slumbersac, é valioso alargar a listagem de produtos com uma pré-visualização rápida da fotografia seguinte do produto. Ao passar o cursor ou deslizar no mobile, o utilizador pode ver uma imagem adicional que mostra a construção do saco de dormir ou um detalhe prático.

Pressupostos principais:

• o primeiro carregamento da categoria mantém-se leve,
• a segunda fotografia é preparada antecipadamente para os produtos visíveis,
• os produtos seguintes carregados durante o scroll também entram no mecanismo de prefetch,
• no mobile, o gesto horizontal serve a galeria e o movimento vertical continua a fazer scroll da página,
• a loja pode indicar uma fotografia hover dedicada, por exemplo uma imagem que mostre mangas amovíveis ou pernas.

Papel do atributo de imagem hover

Numa loja deste tipo, é particularmente útil um atributo de imagem dedicado, por exemplo on_hover. Graças a ele, a equipa da loja pode decidir autonomamente que fotografia explica melhor o produto na listagem.

Exemplos de utilização:

• primeira imagem: um padrão apelativo do saco de dormir,
• imagem hover: fotografia com as pernas desdobradas,
• imagem hover: apresentação das mangas amovíveis,
• imagem hover: detalhe do material ou do fecho,
• imagem hover: imagem que mostra o formato do saco de dormir na criança.

Isto é importante porque a segunda fotografia automática da galeria nem sempre tem de ser a melhor imagem de venda. No caso de produtos técnico-vestuário, é melhor dar ao merchandiser controlo sobre o que o cliente vê como primeira interação.

Efeito para o utilizador

O pai ou a mãe pode avaliar mais rapidamente se o produto corresponde a uma necessidade concreta: um saco de dormir mais quente para o inverno, um modelo leve para todo o ano, um saco de dormir com pernas para uma criança que anda, ou um modelo com mangas amovíveis.

Benefícios:

• reconhecimento mais rápido da construção do produto,
• menos entradas nas fichas de produto apenas para verificar um detalhe,
• melhor comparação de modelos TOG e tipos de sacos de dormir,
• listagem mais compreensível no mobile,
• possibilidade de controlar a primeira imagem hover pela equipa da loja.

Porque isto se adequa à Slumbersac

A Slumbersac vende produtos que são simultaneamente vestuário, acessório de sono e produto funcional para a criança. A estética do padrão é importante, mas o pai ou a mãe presta igualmente muita atenção às soluções práticas.

A galeria hover/swipe ajuda a mostrar:

• diferenças entre um saco de dormir clássico e um saco de dormir com pernas,
• mangas amovíveis,
• pernas dobráveis com ABS,
• sazonalidade e categorias TOG,
• padrões e coleções de uma forma mais envolvente.

Direções de desenvolvimento recomendadas

• utilização do atributo on_hover para indicar a melhor fotografia funcional,
• regras separadas para categorias: sacos de dormir com pernas, sacos de dormir, algodão orgânico,
• teste para verificar se a fotografia de construção no hover aumenta as entradas nos produtos,
• análise do comportamento mobile: swipe versus clique no cartão do produto,
• adição de mensagens de produto mais curtas junto dos filtros TOG.

Resumo

A Slumbersac é um exemplo de uma loja de vestuário em que a fotografia do produto tem de explicar a função, não apenas a aparência. Uma segunda imagem bem escolhida na listagem pode mostrar o detalhe que decide a compra: pernas, mangas, material ou formato do saco de dormir. O mecanismo hover/swipe e a imagem dedicada on_hover dão à loja maior controlo sobre a rapidez com que o cliente compreende o produto.

slumbersac.pl é uma loja que oferece sacos de dormir para crianças. Neste caso, a comunicação não se concentra principalmente em ações promocionais, mas em transmitir aos clientes as informações mais importantes sobre os produtos e o apoio ao cliente.
A implementação do Kowal Announcement Bar permitiu destacar mensagens-chave logo na primeira interação do utilizador com a loja. A barra é utilizada para comunicar informações como:

• as características mais importantes dos produtos,
• orientações de compra,
• informações relacionadas com o apoio ao cliente,
• comunicações organizacionais e de compra.

Numa loja com uma gama de produtos mais especializada, esta barra ajuda a criar uma sensação de transparência e organização. O cliente recebe mais rapidamente informações básicas que podem influenciar a decisão de compra ou esclarecer dúvidas ainda antes de consultar os detalhes do produto. Desta forma, o módulo apoia não só as vendas, mas também a qualidade da comunicação com o cliente.

A loja Slumbersac.pl é especializada na venda de sacos-cama infantis e acessórios de sono para os mais pequenos. Os produtos desta marca distinguem-se pela elevada qualidade dos materiais, por diferentes níveis de espessura (TOG) e por uma vasta gama de modelos adaptados à idade e altura da criança.

Problema

No caso dos sacos-cama infantis, escolher o tamanho adequado é muito mais complexo do que no caso do vestuário padrão.

Os pais têm frequentemente dúvidas:

• que tamanho de saco-cama será adequado para a idade da criança

• se o comprimento do saco-cama será adequado para uma determinada altura

• se o modelo escolhido não será demasiado justo ou demasiado largo

Uma dificuldade adicional é o facto de o ajuste dos sacos-cama se basear muitas vezes não só na idade da criança, mas também na sua altura e na construção do modelo específico do produto.

Sem uma tabela de tamanhos clara, os clientes têm frequentemente de contactar o apoio da loja ou tomar a decisão de compra com muita incerteza.

Solução

Na loja Slumbersac.pl foi implementado o módulo Tabela de tamanhos para Magento 2, que permite apresentar informações detalhadas sobre o ajuste dos sacos-cama diretamente na página do produto.

O módulo permite:

• apresentar uma tabela de tamanhos adaptada à especificidade dos produtos infantis

• mostrar facilmente informações sobre o ajuste à altura da criança

• apresentar os dados de forma clara numa tabela disponível para os clientes durante a compra

Desta forma, os pais podem verificar rapidamente qual o tamanho adequado para a sua criança.

Resultado

Após a implementação do módulo, a tabela de tamanhos tornou-se um elemento importante das páginas de produto na loja Slumbersac.

Principais benefícios:

• os clientes podem escolher facilmente o tamanho certo do saco-cama

• reduz-se o número de perguntas sobre o ajuste do produto

• aumenta a confiança dos clientes ao tomar a decisão de compra

No caso dos produtos infantis, em que a segurança e o conforto são essenciais, uma tabela de tamanhos clara melhora significativamente a experiência de compra dos clientes.