Redesign
E-commerce
Projeto
Redesign
Data
Novembro 2020
01
Sobre o projeto
Trata-se de um estudo feito no E-commerce da KaBuM! no qual proponho um redesign em toda a sua interface com base em uma análise de heurísticas pendentes ou mal aplicadas no site atual, além de possíveis “Gap’s”.
02
Análise do site atual
Estão listados abaixo, algumas heurísticas que não foram aplicadas coretamente no site atual da KaBuM!.
Não responsivo
Dificultando o acesso atráves de dispositivos móveis, tais como tablet e mobile.
Falta: Heurística #3 - Controle e liberdade para o usuário)
Inconsistência
• Falta maior clareza na hierarquia de informações; • Além de inconsistência visual nos botões como “Comprar” e “Detalhes”.
Falta: Heurística #4 - Consistência e padronização)
Sem minimalismo
• Embaralhamento de cores, no qual estas deveriam ter sido aplicadas usando da técnica 60/30/10, afim de garantir um destaque de forma coesa aos botões de ação e interações; • A cor dos botões possuem um contraste visual muito baixo em relação a tipografia, ocasionando em uma leitura dificultosa; • Não há respiro visual no site devido a massante quantidade de banners promocionais; • Informações não relacionadas muito próximas umas as outras; • Menu lateral roubando muito espaço branco do site.
Falta: Heurística #8 - Estética e design minimalista
Opções ausentes
• Mesmo estando logado em uma conta, não há opção de “adicionar ao carrinho” para que o usuário continue sua navegação afim de analisar outros produtos, até tomar a decisão de compra por definitivo.
Falta: Heurística #7 - Eficiência e flexibilidade de uso)
Excesso de informações
Informações técnicas e comentários estão ocupando muito espaço na página.
Falta: Heurística #7 - Eficiência e flexibilidade de uso)
03
Wireframes
Abaixo temos a amostra dos wireframes da página home e página para produto selecionado.
*Obs: Alguns elementos e informações foram modificados durante o desenvolvimento do protótipo em alta.
Home
Produto
04
Protótipo em alta
Abaixo temos o resultado final do redesign, e junto, as justificativas para as melhorias.
Home (Desktop)
Produto (Desktop)
Home (Mobile)
Produto (Mobile)
Considerações sobre a solução
Abaixo deixo listado algumas informações sobre as soluções proposta para o novo visual
Sem excesso de informações
• Design limpo e organizado, com melhora na distribuíção de informações; • Cores distribuídas conforme a ténica 60/30/10, afim de garantir um destaque de forma coesa em botões CTA e interações; • A cor dos botões e fontes destes, com bom constraste visual; • Respiro visual no site (mais espaço branco); • Informações diferentes melhor organizadas; • Menu lateral removido, garantindo maior constraste para apresentação dos produtos;
Heurística #8 - Estética e design minimalista
Adicionando funcionalidades
• No lugar do botão “comprar” foi adicionado o botão “adicionar ao carrinho” para que o usuário possa adicionar o produto ao seu carrinho de compras, mas continuar navegando pelo site até tomar a decisão final de compra. • Foi adicionado o botão “Adicionar aos desejos” para que o usuário possa optar por manter salvo o produto em questão, até tomar a decisão final de compra.
Heurística #7 - Eficiência e flexibilidade de uso)
Responsividade
Site responsivo, possibilitando acesso em qualquer dispositivo
Heurística #3 - Controle e liberdade para o usuário)
Informações compactadas
• Descrições, especificações e avaliações do produto foram compactadas afim de evitar o cansaso visual por parte do usuário.
Heurística #7 - Eficiência e flexibilidade de uso)
Consistência visual
• Maior clareza na hierarquia de informações; • Consistência visual entre os ícones e botões.
Heurística #4 - Consistência e padronização)
05
Styleguides
Cores
055EB2
377EC2
699FD1
9BBFE1
CDDFF0
057CBC
2B90C6
50A3D0
75B7DA
9BCBE4
F74F12
F97441
FB9871
FCBDA0
FEE1CF
FC6B0F
FD893F
FDA66F
FEC39F
FEE1CF
3F3C3B
6F6560
9F8F85
CEB8AA
FEE1CF
Botões
Default
Hover
Pressed
Ícones
Tipografia
Fontes: H1 / H2 / H3 (Montserrat) | Text 1 / 2 / 3 (Helvetica)
Headline 1
Headline 2
Headline 3
Text 1
Text 2
Text 3
Headline 1
Headline 2
Headline 3
Text 1
Text 2
Text 3
Headline 1
Headline 2
Headline 3
Text 1
Text 2
Text 3
Headline 1
Headline 2
Headline 3
Text 1
Text 2
Text 3