Projeto
Redesign
Data
Abril | 2021
Pimpolho calçados
e-commerce
Sobre o projeto
Pimpolho é um e-commerce dedicado ao público infantil, no qual vende desde calçados a brinquedos.
Objetivo
O objetivo do projeto foi propor uma nova experiência ao e-commerce atual, reformulando toda a base estrutural e estética visual.
Diagnóstico
Abaixo vemos os dados extraídos do e-commerce via Google Analytics. As informações coletadas foram cruciais para entendermos o público e quais os meios utilizados para acessar o e-commerce, afim de termos uma direção mais consciente nas demais etapas do projeto.
Dados Google Analytics
Feminino
81,08%
10,26%
48,31%
22,52%
8,38%
6,87%
Masculino
35,37%
16,88%
37,50%
21,13%
12,55%
7,27%
26,97%
São Paulo
12,72%
Minas Gerais
10,63%
Rio de Janeiro
6,25%
Bahia
7,25
segundos
Tempo ideal
0,5 a 2
segundos
Análise Heurística
Uma vez feito o diagnóstico, partimos para a análise do e-commerce atual, usando como auxílio as dez heurísticas de Nielsen, afim de mapear pontos na interface que infligem uma usabilidade ideal.
Foram analisadas as principais telas do e-commerce: Home, Categoria e Página de produto.
Benchmark
Feita a análise heurística, partimos para uma análise de benchmark, afim de captar boas referências de outros e-commerces que atuam no mesmo nicho de mercado. A ideia é identificar recursos presentes nos e-commerces analisados que possam servir de insumos para as próximas etapas do projeto.
Categoria: Moda infantil (Brasil)
Referência: Uso de cores, formas e detalhes em “rabiscos”. Ótima referência visual que conversa com o nicho do e-commerce.
Categoria: Moda infantil (EUA)
Referência: Uso de banners. É um site com uma pegada mais moderna, além de possuir boa descrição nas páginas de produtos.
Categoria: Moda infantil (Brasil)
Referência: No geral, o e-commerce não é uma grande referência, mas um ponto em específico chama a atenção, a opção de filtros “verão” e “inverno”.
Categoria: Moda infantil (EUA)
Referência: Podemos utilizar tags para destacar os modelos que tem mais saídas, além de possibilitar a visibilidade de produtos específicos.
Categoria: Moda infantil (Brasil)
Referência: Em categorias, possui um filtro fixo, ótimo para auxiliar na filtragem de produtos, pois continua visível (por completo) durante o scroll na página.
Wireframes
Uma vez reunidos os insumos necessários, chegou o momento de começar a elaborar a base estrutural do novo e-commerce por meio de wireframes, no qual foram elaborados os wireframes das páginas Home, Categoria e Produto.
Para home, ocorreram diversas mudanças. Dentre as principais, foi trago a tona a opção de escolher produtos por determinadas ocasiões (ex: festas e eventos) afim de auxiliar o usuário a escolher o produto ideal para determinada ocasião de forma mais precisa. A vitrine principal passa a ter opções de filtros, possibilitanto ao usuário um leque de opções de produtos concentrados em apenas uma seção. Foi mantido apenas uma seção dedicada para categorias / departamentos, afim de não confundir o usuário. Fora acrescentado o minicart, com opções de cálculo de frete, e vitrine de produtos.
Para categoria, as principais mudanças foram a adição do filtro fixo, e junto a ele, as opções de filtrar produtos por verão ou inverno, além de modos de ordenação e visualização de produtos. Os cards de produtos agora comportam além da opção “ver produto”, a opção de favoritar.
Para página de produtos, as principais mudanças foram, além de uma melhora na hierarquia de elementos, a adição de tags de sugestão para uso, conforme ocasiões específicas. A seção dedicada para a descrição dos produtos também passou por mudanças, dentre elas, a possibilidade de acrescentar ícones que reforcem o contexto da mensagem na qual o produto deve passar. Foi acrescentado também, uma vitrine com produtos que possam ser complementares ao apresentado na página, trazendo ao usuário, mais um leque de possibilidades de compra.
UI Design
Após algumas mudanças na etapa de wireframes, é chegado o momento de dar vida ao novo visual do e-commerce. Como o Brandbook da marca possui uma gama de cores ampla, foi necessário escolher com cautela o uso de cada cor em cada elemento, desde seletores até os botões de ação.
Omnes
Principal
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Wink Script
Decorativa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Principais
#00B7CE
#F7941D
#ED037C
#80C342
Secundárias
#8CA2D3
#822891
#FFC30F
Escala de cinza
#1B2426
Botões
Botão
Primário | Padrão
Botão
Primário | Desativado
Botão
Primário | Outline
Botão
Primário | Outline Desativado
Botão
Secundário | Padrão
Botão
Secundário | Desativado
Botão
Secundário | Outline
Botão
Secundário | Outline Desativado
Formulários
Label
Input
Padrão
Label
Input
Ativado
Label
Input
Desativado
Desktop
1280px
650px
64px
1
2
56px
3
16px
4
5
6
7
8
9
10
11
12
13
14
15
16
64px
Mobile
360px
640px
24px
1
2
32px
3
8px
4
5
6
7
8
24px
Toda a reestruturação da interface ajudou a reduzir fricções na jornada do usuário, por meio de melhorias visuais estratégicas (respeitando o Manual da marca da empresa), na reorganização do catálogo de produtos (junto a inclusão de filtros mais bem elaborados), e no refinamento da usabilidade geral (como na adição de Breadcrumbs e reformulação dos menus).
Este projeto foi desenvolvido durante minha passagem pela consultoria de e-commerces ENEXT
