Web ・ E-commerce

Como tornar a página inicial do seu E-commerce mais limpa?

Como tornar a página inicial do seu E-commerce mais limpa?

Meu cargo

Product Designer

Tempo de projeto

1 semana

Atividades

UI Design

Wireframe

Heurísticas de Nielsen

Princípios de Design

Introdução

As Lojas Americanas é uma das maiores varejistas do Brasil, possuindo tanto loja física como E-commerce. Black Friday é uma data muito importante nesse ramo, sendo o período do ano em que ocorre o maior número de vendas.

Em 2022 enquanto estava navegando pelo site das Lojas Americanas, me deparei com uma página extremamente carregada e que não me trouxe uma boa experiência.

Meu objetivo

Esse estudo tem como objetivo explorar as possibilidades que temos de deixar a página inicial das Lojas Americanas mais limpa e organizada mantendo todas as informações que são mostradas atualmente.

Processo de descoberta

Análise inicial

Comecei meu processo analisando a página atual buscando entender o que estava deixando ela sobrecarregada e com um aspecto não tão refinado.

1- Grid e alinhamento

O alinhamento do site como um todo e o grid parece que acabaram se perdendo. Não existe constância.

2- Estética e design minimalista

Na primeira dobra são apresentados 6 banners, sendo que vários acabam se repetindo.

3- Contraste

O contraste do site no geral é extremamente baixo, principalmente pelo uso do fundo vermelho.

Análise de Competidores

Para complementar meu estudo, procurei entender como os competidores trabalham a página inicial dos seus E-commerces.

É importante lembrarmos que as pessoas passam mais tempo em outros sites do que o seu, por isso é interessante mantermos padrões que já são usados nesse segmento.

A solução

Uma nova página

Para redesenhar essa página, procurei me atentar a 3 pontos principais que estavam muito perdidos no site das Lojas Americanas:

Contraste

Grid

Design Minimalista

A marca

Também busquei entender como a equipe da Americanas usa a marca nas redes sociais e outras postagens. É importante que o Site não tenha apenas um bom visual, mas que conecte bem com a marca.

Wireframing

No wireframe foquei em entender como podemos trabalhar melhor o alinhamento do header e também como ajustar os banners para não pesar tanto a página com o restante dos elementos.

Página antiga

Nova página

Impacto

Validação

A página inicial de um E-commerce é muito estratégica e interfere em todo o fluxo de compra do usuário.

Portanto, esse estudo é apenas o começo para entender como podemos melhor a página de um E-commerce. É importante testarmos essa nova experiência e também acompanhar o comportamento dos usuários.

Vamos construir um produto juntos?

Vamos construir um produto juntos?

Vamos construir um produto juntos?