18/12/2017

Layout Diamond: uma brilhante experiência de compra

Diamond Nuvem Shop

Nós, da equipe de Produto da Nuvem Shop, estamos constantemente investigando o comportamento das pessoas que navegam em lojas online para entender quais são as suas motivações e, assim, gerar mais vendas aos e-commerces que utilizam a nossa plataforma.

Desta vez, trabalhamos em um dos modelos de layout mais escolhidos por nossos clientes: o Lifestyle.

Tivemos como foco o processo de compra, procurando facilitar três momentos-chave:

  • Quando uma pessoa conhece a variedade de produtos existentes e combina essa informação com suas necessidades e motivações pessoais;
  • Quando se faz uma seleção e quer saber mais sobre um produto específico;
  • E, finalmente, quando a decisão de compra está quase feita e a pessoa decide adicionar mais um produto ao carrinho.

Facilitamos a pesquisa de produtos!

Para facilitar a pesquisa de produtos, modificamos a posição da barra de navegação, assim será mais fácil identificar as categorias e subcategorias das mercadorias.

Além disso, começamos a especificar os itens dentro do botão do carrinho de compras para que o cliente possa entender rapidamente quantos itens foram adicionados.

Também alteramos a cor da barra de pesquisa, desse modo o peso visual estará na navegação.

Diamond Nuvem Shop Barra de pesquisa

Quando todos os produtos são mostrados, o objetivo principal do usuário é poder encontrar de forma simples aqueles que mais o interessa. Portanto, priorizando a pesquisa, redesenhamos os botões de filtrar e classificar a lista de itens para que tenha o mesmo peso e que cada cliente possa procurá-los à sua maneira.

As pessoas agora interagem com as lojas: quando alguém para o cursor do mouse sobre um produto, adicionamos uma animação para facilitar o foco no que lhes interessam.

Na tela de detalhes do produto, o botão para adicionar ou subtrair mais itens semelhantes foi modificado, pois do celular não era muito fácil tocá-lo. Assim, consideramos que mais de 70% do tráfego nas lojas é através de smartphones. A tendência mobile no mundo do comércio eletrônico é tudo!

Diamond Nuvem Shop Product list

Carrinho completo, loja feliz 🙂

O momento em que um produto é adicionado ao carrinho é chave, pois é aí que a decisão é tomada para finalizar ou não uma compra. Neste caso, o peso visual foi reduzido para o botão “voltar” e, dessa maneira, os consumidores poderão se concentrar no momento da compra e não em navegar novamente.

O design do botão principal de compra também foi alterado para que ele seja preenchido com a cor principal da marca, e não com bordas. Nos casos em que o botão “continuar comprando” aparece, nós o movemos para a parte inferior da tela, desta maneira não interferirá na finalização da compra.

E, finalmente, adicionamos uma caixa em torno do cálculo do custo de envio para que cada componente da tela possa ser lido de maneira simples e ágil.

Bônus: colocamos o preço total do carrinho à direita para que ele esteja na mesma coluna dos outros valores.

Diamond Nuvem Shop cart

O que você achou dessas mudanças?

Estamos lançando essas mudanças nas lojas que possuem os modelos Diamond, Cosmetics, Studio e Fancy de forma gradual para podermos medir o impacto do que foi feito e nos certificarmos de que, com cada alteração, estamos melhorando a quantidade de vendas para aqueles que usam a Nuvem Shop.

Data da última atualização: 29/08/2018


O que você achou desse conteúdo?


Rocío Diez

Rocio é desenvolvedora de produtos digitais. É viciada em batatas fritas e adora fazer CrossFit.


    • Antonio Matos

      Na experiência para desktop, a navegação embaixo do logo não ficou tão bom. Ficava melhor à direita, mais visível. Na minha loja, a busca ficou também à esquerda, com o placeholder em espanhol, também ficou ruim. O carrinho ficou legal porém no “novo checkout” seria ótimo colocarem um botão para “aceite dos termos de compra” ou algo assim, para informações relevantes. Porém, no mobile ficou bom, realmente.

      • nuvemshop

        Olá, Antonio! Como vai?

        Muito obrigado pelo feedback! Porém, para que a equipe responsável possa analisá-lo, peço que envie-o para contato@nuvemshop.com.br, por gentileza.

        Até mais 🙂

    • claudegazotti

      No campo “pesquisa”, mudar o texto para português (está em espanhol). De resto, ficou muito bom.

      • nuvemshop

        Olá, como vai?

        Muito obrigado pelo feedback! Porém, para que a equipe responsável possa analisá-lo, peço que envie-o para contato@nuvemshop.com.br, por gentileza.

        Até mais 🙂

    layout-diamond-uma-brilhante-experincia-de-compra