Barra de Notificação - UI - Global indica um tamanho maior e a cor primária Asics blue
Entretanto, o cliente retornou pedindo que a barra fosse mais estreita e na cor atual do site que é o Asics lighest indigo -
No canto direito - Ajuda | Lojas | Minha Conta (com ícone do global)
Logo | Categorias | Barra de Pesquisa pequena e arredondada com lupa à esquerda com Texto: Procurar em Asics.com.br | Sacola
Full Banner / Hero
O Guide Global indica as dimensões 1600px x 616px para a imagem.
Em nossa análise no Hotjar, verificamos que os usuários interagiram com o fullbanner, conforme vemos abaixo:
Seguindo o Guide Global, eles orientam um banner, com título, subtítulo e texto, e CTA conforme abaixo:
Analisando a concorrência e as referências Nike e Adidas, é interessante ter um fullbanner com as dimensões recomendadas pelo Global (para não gerar o efeito de false floor da Nike e deixar intuitivo que há mais elementos abaixo) e um título, subtítulo e CTA ou apenas um texto e CTA, dependendo do conteúdo do banner.
Referência:
3 Banners Pequenos Estáticos de Categoria
Título H2: Compre por Categoria
Banners: Feminino | Masculino | Esportes
Hover com efeito para diferenciar os banners
Link clicável - Feminino | Masculino | Esportes
*Os banners de categoria ajudam na navegação do usuário, deixando a jornada mais rápida e fluída.
Obs1.: Usar cores nas Seções que conversem entre si, como o Guide orienta abaixo.
*A vitrine diferenciada é intuitiva e deixa as principais categorias visíveis ao usuário com apenas um clique.
Card de Produto (hierarquia das informações abaixo)
Tags dos produtos - ideal que siga as orientações do Guide Global:
Então, para produtos com desconto e, dando maior destaque, o ideal é seja na cor vermelha. Hoje está na cor primária, conflitando com as orientações.
Ideal que a tag de desconto, para ficar ainda mais intuitiva para o usuário e deixar o design mais clean seja alterada de 20% OFF para -20%.
Imagem do produto.
Informações abaixo da imagem:
Título do produto na cor primária e em tamanho adequado para leitura;
Feminino | Masculino | Infantil | Unissex na cor primária e no mesmo tamanho do título;
Categoria - exemplo: Corrida | Futebol na cor cinza e em tamanho menor que o título;
Valor do produto na cor primária e no mesmo tamanho do título. Obs.: Ideal é deixar a informação do valor parcelado para a PDP. E, ainda, quando tiver desconto, deixar o valor antigo na cor cinza com um risco por cima, como na referência 2.
Ideal é deixar sem o CTA “comprar”, deixando apenas um CTA de “Ver Detalhes” no estado de hover, abrindo um modal de Quick View, com seletor de tamanho e botão “comprar”, encurtando a jornada do usuário e facilitando a jornada, seguindo o Global, conforme referência 3.
Avaliações (referência 3) - se tiver ou se desejarem no futuro. É sempre interessante ter avaliação no produto, pois os usuários estão sempre verificando o que outras pessoas disseram sobre o produto para tomarem a decisão e comprar.
Setas indicativas.
*O redsign do card de produto é necessário, pois atualmente está fora das orientações do Guide Global, bem como não atende as regras de acessibilidade.
Referência 1:
Referência 2:
Referência 3:
Banners de Coleções
Título: Coleções
3 full banners com imagem, título, subtítulo e CTA “Ver Coleção”
Título: Gel-Nimbus
Subtítulo: Conforto e máxima absorção de impacto
CTA “Ver Coleção”
Título: Gel-Kayano
Subtítulo: Pisada estável para um mindset mais equilibrado
CTA “Ver Coleção”
Título: Gel-Cumulus
Subtítulo: Para uma corrida ainda mais suave e macia
CTA “Ver Coleção”
*A sugestão da utilização de banners de coleção é com base no estudo de CRO que apurou os produtos mais buscados pelos usuários, então, já deixando coleções com os produtos mais procurados, facilitamos a jornada. E, também atende as orientações do Global.
Banners de Departamentos
3 full banners com imagem, título, subtítulo e CTA “Ver Produtos”, conforme a Referência da Nike abaixo.
Título: Volta às Aulas
Subtítulo: Tudo para você brilhar no primeiro dia
CTA “Ver Produtos”
Título: Lançamentos
Subtítulo: Conheça nossos novos produtos
CTAs de igual relevância (na mesma cor) “Mulheres” e “Homens”
Título: Outlet
Subtítulo: Até 64% OFF
CTA “Ver Produtos”
*Os banners de departamentos foram pensados para dar visão aos usuários dos produtos de uma maneira mais visual e categorizado, deixando a navegação fluída e atrativa. E, também atendem as orientações do Global.
Referência:
Vitrine de Produtos
Título: Você também pode se interessar
*É interessante manter a vitrine com o título acima, por ter gerado 6,3% dos cliques em desktop, segundo o estudo de CRO. Apesar do Guide Global não mencionar as vitrines de produtos, e o site americano não possuir, em outras análises que realizamos, verificamos que as vitrines auxiliam o usuário na decisão de compra, pois elas encurtam a jornada daqueles usuários que estão buscando um produto com mais rapidez. Com base em nosso benchmarking, as grandes marcas possuem até 2 vitrines de produtos, então, nosso design ficará no mesmo patamar.
Texto de Apoio da Marca
Título: Eleve sua performance com a ASICS
Subtítulo: Tênis de corrida, tênis de treino, roupas esportivas, acessórios e mais.
Texto: Desde 1949 nosso objetivo é melhorar o bem estar mental por meio do movimento. É por isso que somos chamados de ASICS, que é um acrônimo para a frase em latim "Anima Sana In Corpore Sano", mente sã em corpo são.
Newsletter
Hoje está assim:
Nossa sugestão:
Título H2: Receba nossas Novidades!
Subtítulo Body: Saiba, em primeira mão, sobre novos produtos, eventos exclusivos e ofertas online. - O texto atual está no masculino, então, para evitar que os usuários fiquem ofendidos, outra abordagem é o ideal.
Checkbox com o texto: “Li e concordo com os Termos de Uso e com a Política de Privacidade.”
CTA “Cadastrar” somente ativado após o preenchimento do checkbox, em razão da LGPD.
*Nossa sugestão atende as regras de acessibilidade, que hoje não estão sendo atendidas, bem como deixa a jornada do usuário que quer receber a newsletter mais rápida, pois ao invés de realizar 4 cliques, ele realiza 3.
Referência:
Redes Sociais
Facebook
Instagram
YouTube
LinkedIn
Rodapé/Footer
Institucional
Sobre a ASICS
Ética na ASICS
Trabalhe Conosco
Visão Geral
Ajuda e Suporte
Dúvidas Frequentes
Encontre uma Loja
Guia de Medidas
Regulamentos
Trocas e Devoluções
Segurança
Política de Privacidade
Termos de Uso
Contato
Atendimento por E-mail
Central de Relacionamento
Formas de Pagamento
Boleto
Visa
Master Card
American Express
Elo
*Sugerimos a divisão de temas acima, para facilitar a busca do usuário e deixar as informações corretamente dentro dos temas.
Política de Cookies | Preferências de Cookies | Editar Consentimento
*Necessário ajustar o tamanho da fonte para Copyright, pois hoje o tamanho é 10px, incompatível com o tamanho mínimo para desktop que é 12px e com as regras básicas de acessibilidade.
Desktop
