TELEFÓNICA | VIVO
Ordenação do componente de filtros de acordo com a relevância
Análise de métricas para melhorar o componente de filtro no e-commerce
Introdução
Aplicado nativamente no e-commerce, o componente de filtros não estava organizado de maneira lógica e ocupava muito espaço da tela. A partir das métricas e heatmaps, pudemos entender o comportamento de uso para que pudéssemos aprimorar o uso da ferramenta.
Responsabilidade
Liderança de um time de cinco analistas e condução do processo de design relacionado a desenvolvimento de produto como análise de métricas no Content Square e Google Analytics, pesquisa de mercado, jornada do usuário e protótipos de alta fidelidade.
Escopo do projeto
Uma squad de designers, desenvolvedores front-end e back-end, analistas funcionais, Product Owner e Project Manager. Após o desenvolvimento e entrega do projeto, também envolvemos QA.
Posição
Product Design Lead
Produto
Desktop web
Mobile web
Timeline
Q3 2023 - Q2 2024
Ferramentas
Figma
Content Square
Google Analytics
Discovery
Clientes não conseguem usar os filtros corretamente por conta da ordem dos elementos e tamanho da ferramenta.
Ao analisar as vitrines de produtos no Content Square, notamos que muitos usuários não acessavam as categorias dos filtros que estavam nas últimas posições, uma vez que era necessário dar muita rolagem para chegar à informação. Quando comparamos esta hipótese com a quantidade de cliques extraídos do Google Analytics, pudemos perceber que muitos clientes não usavam mais de três filtros, o que reforçava a necessidade de ajustes.
Visão geral
Desde o lançamento do e-commerce em agosto de 2021, o componente de filtro foi aplicado de maneira nativa do sistema. Notamos que a ferramenta necessitava de ajustes para que os clientes pudessem utilizar corretamente.
Desafios
Diminuir a rolagem das vitrines de categorias
Entender quais eram os filtros mais utilizados e reordenar de acordo com esse dado
Analisar as métricas de cliques e heatmap das páginas para correta ordenação
Objetivos
Incluir botões de exibir mais/menos nos filtros
Organizar os filtros de acordo com as categorias mais utilizadas pelos clientes
Ajustar o componente de preço para que o cliente ajuste por faixas de valores
Como melhorar a usabilidade e acessibilidade?
Usuários tinham que buscar em uma extensa lista os filtros que eles queriam utilizar e ver inúmeras opções pouco relevantes antes de encontrar o que precisavam. Ao ordenar pelos mais utilizados, colocar os preços em uma faixa de valor e incluir um campo de busca, diminuímos a carga cognitiva do usuário, que vai poder filtrar diretamente o que precisa.
Como reduzimos a rolagem da página?
Quando a ferramenta foi implementada de maneira nativa, produtos com diferentes categorias seguiam o mesmo critério para os filtros e as páginas eram muito extensas por conta do componente ficar sempre aberto com todas as opções. Ao incluir um botão de exibir mais/menos, reduzimos o tamanho da página e deixamos a navegação fluída.
