CompraOn um marketplace da Elo Group criado com intuito de oferecer um serviço de compras para pessoas que utilizam benefícios sociais disponibilizados pelo banco Caixa Econômica Federal via Caixa Tem, uma plataforma com uma base de aproximadamente 12 milhões pessoas.

Contexto

Eu atuei no projeto CompraOn alocada no cliente Elo como Designer UX/UI Sênior em um time multidisciplinar, para aprimorar o aplicativo no âmbito UX/UI conforme as necessidades e dores dos usuários do Caixa Tem.

Pesquisa

A realização de pesquisa direta com os usuários não era viável do nosso lado. No entanto, o cliente Elo possuía acesso a dados dos usuários do Caixa Tem que utilizavam o CompraOn. Esses dados eram coletados, analisados e transformados em relatórios pelo Product Manager, e alguns passavam pelo CRO do nosso time, que adicionava informações complementares.

Diante desse cenário, realizei pesquisa secundária e pesquisa de mesa, o que me permitiu ampliar e combinar conhecimentos.

• Pesquisa secundária, utilizando ferramentas como Google Analytics e Hotjar.
• Pesquisa de mesa, analisando:
  • Dados já existentes compartilhados pelo PM e pelo CRO.
  • Coleta e análise de dados públicos sobre o Caixa Tem e seus serviços sociais.
  • Estudo sobre a plataforma CompraOn, para entender melhor nossa base de usuários.
  • Avaliação de concorrentes por meio de suas plataformas, reviews e feedbacks de usuários sobre produtos similares.
  • Relatórios de mercado focados em marketplaces.
  • Artigos e outras fontes relevantes.

Com os dados coletados, analisados e transformados, validei entendimentos junto ao Product Manager.

Assim que iniciei no projeto, criei um board no Figma para amadurecer e compartilhar o entendimento sobre o produto. Para isso, utilizei diversas técnicas, como:

• Dados e Proto-personas, para compreender melhor os usuários.
• Matriz CSD (Certezas, Suposições e Dúvidas);
• É, Não É, Faz, Não Faz;
• Matriz Moscow, para priorização;
• Hipóteses, para guiar descobertas;
• Mapa de calor, para análise de comportamento;
• Princípios de Design, para alinhar decisões;
• Objetivo do Produto, para orientar a estratégia;

Case

Problema

Como gerente de produto,
Desejo melhorar a qualidade dos ícones no produto,
Para que possamos melhorar a experiência visual e a clareza de navegação para os usuários.

Cenário atual:
Atualmente, encontramos ícones de baixa qualidade em diversas áreas, incluindo o menu hambúrguer, o botão de voltar, categorias, “Ver Mais”, card grid e setas em dropdowns. Esses ícones comprometem a estética e a usabilidade da plataforma, afetando a experiência do usuário.

Descoberta

Análise de Comportamento do Usuário

Com base nos relatórios e dados que coletei sobre o comportamento dos usuários no CompraOna respeito da navegação, utilizando Google Analytics e Hotjar, identifiquei que a maioria dos usuários acessava as categorias por caminhos alternativos. Esses caminhos não eram considerados pelo nosso time como destaque ou formas de acesso rápido, como as vitrines. Em vez disso, os usuários navegavam por rotas que poderiam ser interpretadas como menos óbvias.

Os dados extraídos da plataforma Hotjar mostraram que a preferência de navegação para acessar as categorias era a ação de “Ver Mais”, que exibia uma das nossas listas de categorias. No entanto, essa lista apresentava problemas relacionados aos padrões de qualidade, algo que consegui validar com os dados coletados.

Com base nesse entendimento, priorizamos a melhoria dessa lista, visto que ficou evidente que ela era um ponto crítico na navegação dos usuários e apresentava, de fato, problemas que comprometiam sua eficiência e qualidade.

Análise do Problema

Investigação técnica

Sobre os padrões de qualidade, depois de investigar com nossos desenvolvedores especialistas em Vtex, descobri que a lista “Ver mais” era exibida conforme componente nativo da Vtex Legacy, porém o componente foi adaptado para atender ao produto e os ícones de categorias apresentavam baixa qualidade de exibição por serem inseridos manualmente como .svg, após auxílio do chapter de desenvolvimento descobrimos que os ícones estavam passavam por processo compressão que a Vtex aplicava automaticamente e essa compressão afetava a qualidade de exibição dos ícones.

Ao me aprofundar sobre o formato SVG, pude compreender que imagens PNG ou JPEG o navegador apenas exibe a imagem, sem necessidade de interpretar elementos internos, já o SVG pode ser considerado mais “pesado” computacionalmente e então a Vtex faz o SVG passar por um tratamento para exibi-lo sem que este não comprometa a velocidade de carregamento da página.

Ponto de atenção identificado

• Falta de legibilidade dos ícones com formato .svg devido a compressão.

Iconografia

O que é um ícone? 
O Google, no guide line do Material Design, descreve ícones como formas geométricas básicas, intuitivas que representam visualmente ideias, recursos ou tópicos.

Heber Alvares | UX Collective

Efetividade dos ícones

Analisando a lista de categorias do CompraOn um ponto que levantei para me aprofundar era sobre a efetividade dos ícones, apesar de que eles são apresentados acompanhados de rótulos para identificá-los, será que sua aplicação estava sendo eficiente para os usuários? Uma forma de responder essa dúvida seria fazer um teste de usabilidade com iconografia, o que seria inviável no momento.

Ponto de atenção identificado

Ao analisar o componente como um todo foi observado que algumas categorias eram exibidas com hifenização.

Investigação da arquitetura de UI

Reuni tudo o que tínhamos sobre os ícones para que pudesse entender a extensão da demanda e na organização dos elementos de interface (UI), e como eles estão estruturados no código.

Teste técnico

Ao debater sobre as descobertas com o time surgiu uma dúvida se era possível diminuir a complexidade que estava sendo entendida pela Vtex ao exibir o ícone .svg.

Realizamos testes para tentar exibir ainda em formato SVG alterando o que era definido no código como tamanho, cores e ícones com outros aspectos. O teste confirmou que mesmo ao realizando alterações no código o problema a compressão da Vtex permanecia.

Proto-persona

Dados

• Público do CompraOn: Com aproximadamente 3 milhões de acessos diariamente sendo majoritariamente classes D e E.

• Classe D e E: As classes D e E no Brasil são categorias socioeconômicas usadas para descrever segmentos da população de menor renda. Essa classificação é baseada principalmente na renda familiar mensal e no acesso a bens e serviços.
  • Os brasileiros mais pobres (classes D e E) continuarão a ser mais da metade da população até 2024 e a retomada da economia tende a favorecer inicialmente as classes sociais mais altas (A), aponta estudo da Tendências Consultoria. (Infomoney)

• Classe E: A educação da classe E no Brasil enfrenta diversos desafios que impactam diretamente a aprendizagem, incluindo barreiras linguísticas e dificuldades na leitura e escrita. A precariedade do sistema educacional, a falta de infraestrutura adequada, e a ausência de políticas públicas eficazes agravam essas questões.
  • Escribo – Discussões sobre desigualdade social e alfabetização no Brasil, incluindo dados sobre a Avaliação Nacional da Alfabetização (ANA)​ (Escribo – Innovation for Learning).
  • Universidade de São Paulo (USP) – Reflexões sobre os desafios da prática da leitura e a administração de recursos educacionais​ (USP – Universidade de São Paulo).
  • Repositório Digital da Universidade Estadual da Paraíba (UEPB) – Revisão sistemática sobre dificuldades de aprendizagem no processo de alfabetização​ (UEPB DSpace).

Benchmarking

Olhando para lista de categorias Vtex Legacy de outras empresas, que não eram muitas por ser legado, um ponto curioso foi perceber que as empresas optam por não utilizar ícones e nem imagens, as empresas apenas exibem o componente nativo, lista em texto, sem nenhum tipo de alteração ou adaptação manual.

Já no caso de concorrentes e líderes de marketplace identifiquei que o ícone muitas vezes acaba por ser substituído por imagens reais de produtos.

Hipótese

• Foto do produto real atraem o consumidor.
• Rótulos de categorias com hifenização dificultam o entendimento e a navegação.
• Ícones de borda (outline) podem ser menos visíveis e isso pode prejudicar a legibilidade e a usabilidade.

Tarefa de usuário

Eu fiz um exercício de olhar para a tarefa de usuário com foco na navegação da categoria pela ação “Ver mais” para entender o que os nossos usuários fazem ou poderiam fazer ao entrar uma categoria, e então entrando nessa categoria nós permitíamos o usuário de navegar em uma outra de forma intuitiva? Nós oferecia-mos uma forma de voltar?

Ao analisar o produto pude descobrir que:

• Oferecemos caminhos que permitem que o usuário volte para a página anterior
• Não oferecemos um caminho de fluxo contínuo e intuitivo entre categorias

Arquitetura da informação

Procurei aplicar as melhores práticas possíveis dentro do nosso ambiente, com o objetivo de organizar e apresentar as informações de maneira intuitiva e fácil de entender para o usuário, como:

• Consistência Visual: Para que todas as imagens seguissem um estilo visual consistente (tamanho, formato, qualidade) para manter a uniformidade e evitar uma aparência desorganizada.
• Relevância da Imagem: Para que todas as imagens representassem claramente a categoria.
• Texto Descritivo: Para que rótulos de cada imagem fossem legíveis e suficientemente descritivos.
• Facilidade de Navegação: Para garantir que a navegação entre categorias seja simples e buscando considerar adicionar filtros ou menus suspensos.
• Análise de Dados: Monitorar como as categorias são usadas e ajustar a organização ou a apresentação das imagens conforme necessário para melhorar a experiência do usuário. (feito através da plataforma Hotjar e Google Analytics)

Solução

Conforme os aprendizados citados anteriormente descobrimos que era possível exibir imagens .jpeg ou .png sem comprometer os padrões de qualidade da nossa listagem de categoria, basicamente as imagens não iriam passavam por um processo de compressão automático igual ocorria com os ícones em .svg.

Escolhemos por seguir com imagens de produto reais por representarem um papel significativo no momento de compra, facilitando a compreensão do nosso perfil de cliente e ajudando com tomada de decisão.

Defini padrões de interação para que o usuário possa encontrar a categoria desejada, são eles:

• Comportamento nativo do gesto para realizar a rolagem da tela (scroll);
• Seguindo comportamento nativo do componente realizei a inclusão de campo que simula uma busca simples; (imagem 2)
  • Os resultados da busca serão indicados por meio de respostas visuais e animações, direcionando a atenção do usuário para o resultado desejado (imagem 2). Isso visa atender à necessidade de busca imediata, até que seja possível desenvolver e implementar um mecanismo de busca mais robusto (imagem 3), devido as limitações do componente nativo.

O aprimoramento no componente de lista de categoria “Ver mais” foi realizada de acordo com a viabilidade técnica no momento. Para possibilitar o acompanhamento contínuo e a realização de ajustes com base na resposta e aceitação dos usuários, utilizei métricas coletadas através do Hotjar.

Sobre as categorias em destaque, como o problema nos trouxe o entendimento de que as categorias em destaques não estavam com engajamento esperado, através de teste a/b as categorias em destaques foram alteradas.

Handoff

Antes de realizar o handoff da solução, no nosso processo com a Elo, sempre alinhavámos em reuniões diárias sobre o andamento, assim que pronta a proposta ela passava por validação técnica, posteriormente marcávamos uma reunião para apresentar a proposta para o PM e quando aprovada a versão aprovada era enviada em formato documento de design handoff através do Jira e compartilhada com o time de desenvolvimento.

No handoff de design era incluído os dados das pesquisas, componentes, fluxos, telas, tudo que fosse necessário para manter o histórico do processo de design realizado e também as informações pertinentes para que a implementação fosse um sucesso. Também me colocava sempre à disposição para alinhar com o time e tirar dúvidas.

Oportunidades

Inclusão no menu de rodapé a opção de “Categorias” para permitir que o usuário navegue rapidamente entre categorias. (dor identificada em tarefa de usuário)

Inclusão de ações rápidas no topo da lista de produtos visando aumentar as possibilidades do fluxo contínuo e intuitivo dentro da categoria vigente. Uma oportunidade que conversa com o 7: Flexibility and Efficiency of Use de 10 Usability Heuristics for User Interface Design (imagem abaixo) e também com métricas de negócio. (dor identificada em tarefa de usuário)

Obrigada por ler!

Referências

Introdução ao SVG – Scalable Vector Graphics – https://www.devmedia.com.br/introducao-ao-svg-scalable-vector-graphics/27280

Teste de compreensão de ícones – https://brasil.uxdesign.cc/iconografia-e-a-regra-do-80-10-3f3fcc90fc4c

10 Usability Heuristics for User Interface Design – https://www.nngroup.com/articles/ten-usability-heuristics