Projeto

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

A oferta inclui, entre outros, sacos-cama com pernas, sacos-cama 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 modelo específico: se tem pernas, se as mangas são amovíveis, que intervalo de temperaturas suporta, se é adequado para o verão, inverno ou todo o ano.

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

Desafio

Numa loja de sacos-cama infantis, a lista de produtos tem de suportar vários tipos de informação ao mesmo tempo:

• 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 imagem no listing pode mostrar a estampa, mas nem sempre explica a construção. Para o pai ou a mãe, é importante distinguir rapidamente um saco-cama clássico de um saco-cama com pernas ou de uma variante com mangas amovíveis.

O segundo desafio é o mobile. As compras de produtos infantis acontecem frequentemente 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 imagem seguinte deve ser simples.

Solução

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

Pressupostos principais:

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

O papel do atributo da imagem hover

Numa loja deste tipo, um atributo dedicado de imagem, por exemplo on_hover, é especialmente útil. Graças a ele, a equipa da loja pode decidir por si própria qual a imagem que melhor explica o produto no listing.

Exemplos de utilização:

• primeira imagem: padrão bonito do saco-cama,
• imagem hover: fotografia com as pernas abertas,
• imagem hover: apresentação das mangas amovíveis,
• imagem hover: detalhe do material ou do fecho,
• imagem hover: imagem que mostra a forma do saco-cama na criança.

Isto é importante, porque a segunda imagem 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 aquilo que o cliente verá como primeira interação.

Efeito para o utilizador

O pai ou a mãe pode avaliar mais rapidamente se o produto responde a uma necessidade específica: um saco-cama mais quente para o inverno, um modelo leve para todo o ano, um saco-cama 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 páginas de produto apenas para verificar um detalhe,
• melhor comparação dos modelos TOG e dos tipos de sacos-cama,
• listing mais compreensível em mobile,
• possibilidade de controlar a primeira imagem hover pela equipa da loja.

Porque é que isto se adequa à Slumbersac

A Slumbersac vende produtos que são ao mesmo tempo roupa, 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 observa com igual atenção as soluções práticas.

A galeria hover/swipe ajuda a mostrar:

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

Direções de desenvolvimento recomendadas

• utilização do atributo on_hover para indicar a melhor imagem funcional,
• regras separadas para categorias: sacos-cama com pernas, sacos-cama, algodão orgânico,
• teste para verificar se uma imagem de construção em hover aumenta as entradas nos produtos,
• análise do comportamento em mobile: swipe versus clique na ficha de 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 imagem do produto tem de explicar a função, não apenas o aspeto. Uma segunda imagem bem escolhida no listing pode mostrar o detalhe que decide a compra: pernas, mangas, material ou forma do saco-cama. 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.