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.
Etapa
1
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
Acessos por dispositivos
Gênero e idade
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%
Dados geográficos
26,97%
São Paulo
12,72%
Minas Gerais
10,63%
Rio de Janeiro
6,25%
Bahia
Tempo médio de carregamento
7,25
segundos
Tempo ideal
0,5 a 2
segundos
Etapa
2
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.
Home
Liberdade e controle do usuário
Carrossel das vitrines não possuem setas.
Consistência e padrões
Na vitrine de produtos, alguns cards possuem seletor de tamanho, e outros não.
Reconhecimento em vez de memorização
Eficiência e Flexibilidade de uso
Confilto entre taxonomias. “Principais categoriais” e “Nossos departamentos” soa redundante e possuem o mesmo propósito.
Prevenção de erros
Liberdade e controle do usuário
Não possui minicart no e-commerce atual.
Categoria
Liberdade e controle do usuário
Não possui breadcrumbs, afim de guiar a navegação do usuário.
Eficiência e Flexibilidade de uso
Vitrine no final da lista de produtos, porém sem crossover com produtos complementares.
Estética e design minimalista
Texto de SEO muito extenso.
Eficiência e Flexibilidade de uso
Filtro de idade muito extenso e pouco usual.
Página de produto
Ajuda e documentação
Estética e design minimalista
Tabela de medidas extensa e pouco usual.
Consistência e padrões
Vitrines repetidas
Correspondência entre o sistema e o mundo real
Imagens do produto precisam de maior resolução.
Etapa
3
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.
A Fábula
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.
Zappos Kids
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.
Dudalui
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”.
The Totem
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.
Pucket
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.
Etapa
4
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.
Home
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.
Categoria
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.
Página de produto
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.
Etapa
5
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.
Home
Categoria
Página de produto
Demais telas
Telas padrões da plataforma VTEX
Styleguides
Tipografias
Omnes
Principal
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Wink Script
Decorativa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Cores
Principais
#00B7CE
#F7941D
#ED037C
#80C342
Secundárias
#8CA2D3
#822891
#FFC30F
Escala de cinza
#1B2426
Botões e Formulários
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
Grids
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
Considerações finais
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
