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.

Meu papel

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.

Case

Framework

Design Thinking 101

Aqui estão algumas características que destacam o Design Thinking como um framework:

• Estrutura Organizada: Oferece uma sequência de etapas claras e definidas.
• Flexibilidade: Pode ser adaptado a diferentes problemas e setores.
• Iteratividade: Enfatiza a necessidade de repetição e refinamento contínuos.
• Centrado no Usuário: Centraliza as necessidades e perspectivas dos usuários em todas as fases.

User Story

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.

Empatia

Descobrir como o problema afeta o usuário.

Pesquisa

A realização de pesquisa direta com os usuários não era viável. No entanto, o cliente Elo tinha acesso a dados dos usuários do Caixa Tem que utilizavam o CompraOn. Além disso, o produto contava com as ferramentas Google Analytics e Hotjar, às quais nosso time tinha acesso. Os dados coletados e analisados pelo Product Manager eram transformados em relatórios, que, em alguns casos, passavam pelo CRO do nosso time, que adicionava informações complementares.

Diante desse cenário, realizava pesquisa de mesa um método de pesquisa secundária, o que me permitia ampliar e combinar conhecimentos. Através de:

• Estudo sobre a plataforma CompraOn para entender melhor nossa base de usuários.
• Avaliação de concorrentes por meio de navegação, reviews e feedbacks de usuários.
• Coleta e analise de dados em ferramentas como Google Analytics e Hotjar, relatórios de dados públicos sobre o Caixa Tem e seus serviços sociais, dados já existentes compartilhados pelo PM e CRO, artigos, relatórios de mercado focados em marketplaces e outras fontes relevantes.

O projeto já contava com um arquivo unificado para as entregas e design system, mas assim que iniciei no projeto, eu e o designer Arthur V. criamos um board no Figma para organizar, amadurecer e compartilhar o entendimento sobre o produto. Para isso, utilizamos diversas técnicas, como:

Proto-personas, para compreender melhor os usuários.
Matriz CSD (Certezas, Suposições e Dúvidas), para mapear o que já sabíamos, as hipóteses e as lacunas de conhecimento;
É, Não É, Faz, Não Faz, para definir claramente o escopo e os limites do produto;
Matriz Moscow, para clareza sobre o que o produto deve oferecer aos usuários;
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;

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

Proto-persona

O processo de criação da proto-persona do produto teve início com o entendimento da audiência do Caixa Tem. A partir dessa base, consolidamos as informações compartilhadas pelo cliente, garantindo que a criação da proto-persona fosse embasada em dados concretos. Sabíamos desde o início que essa versão poderia evoluir conforme novos insights surgissem, mas o conhecimento adquirido sobre a audiência nos permitiu tomar decisões mais informadas, reduzindo vieses e afastando suposições.

Audiência

Alguns dados sobre a audiência que foram relevantes para a definição, já que me ajudam a contextualizar os problemas e fundamentar as soluções.

Audiência do CompraOn: Com aproximadamente 3 milhões de acessos diariamente sendo majoritariamente classes D e E.

Classe D e E no Brasil

• Classificação socioeconômica: Baseada na renda familiar mensal e acesso a bens e serviços.
• Projeções populacionais: Estudo da Tendências Consultoria prevê que as classes D e E continuarão representando a maioria da população brasileira até 2024, apesar da retomada econômica favorecer inicialmente as classes mais altas.
• Educação e alfabetização:
  • UEPB: Revisão sistemática sobre dificuldades de aprendizagem na alfabetização, destacando barreiras linguísticas, dificuldades na leitura e escrita, e a precariedade da infraestrutura educacional.
  • Escribo: Discussões sobre desigualdade social e alfabetização, com dados da Avaliação Nacional da Alfabetização (ANA).
  • USP: Reflexões sobre desafios na prática da leitura e na administração de recursos educacionais.
• Impactos sociais: A desigualdade socioeconômica e a falta de políticas públicas eficazes perpetuam as dificuldades educacionais e limitam a mobilidade social nas classes D e E.

Análise de comportamento

Para um melhor entendimento do problema realizei a coleta e análise do comportamento do usuário, que foi essencial para trazer clareza sobre a navegação dos usuários em relação ao cenário atual relatado no user story e identificar pontos críticos.

Ferramentas

• Google Analytics
• Hotjar

Descobertas

• Há uma preferência dos usuários em navegar através da opção “Ver mais”, indicando a necessidade de tornar esse caminho mais acessível e eficiente
• Lista de categorias “Ver mais” exibe ícones com baixa qualidade e representa a preferência de navegação dos usuários

Ações

• Priorizar a melhoria da lista de categorias “Ver mais” para aprimorar o acesso dos usuários e melhorar a navegação na plataforma

Para garantir que as melhorias na qualidade dos ícones sejam implementadas de forma eficaz e tragam o maior benefício possível para os usuários, decidimos abordar este processo em etapas.

Após tratar essa área prioritária e observar os resultados das melhorias, passaremos para os demais pontos identificados. Este método permite que possamos entregar valor de forma contínua e medir o impacto das mudanças, ajustando nossa abordagem conforme necessário.

Definição

Entender as causas do problema e formular um desafio claro.

Usabilidade

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

Ao analisar a lista de categorias “Ver mais” do CompraOn um ponto que levantei para me aprofundar foi sobre a efetividade dos ícones, apesar de que eles são apresentados acompanhados de rótulos para identificá-los, será que os ícones que foram escolhidos são 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.

• Questão levantada: Eficiência dos ícones para usuários.
• Limitação: Teste de usabilidade inviável.

Diagnóstico técnico

Diagnosticar o problema e validar possíveis soluções técnicas antes da ideação.

Ações

• Investigação com desenvolvedores especialistas em Vtex sobre a lista de categorias “Ver mais”.
• Análise da razão da baixa qualidade dos ícones de categorias.

Investigação

Após uma investigação com nossos desenvolvedores especialistas em Vtex, identificamos que a lista “Ver mais” estava sendo exibida através de um componente nativo da Vtex Legacy. Constatamos que os ícones das categorias estavam apresentando baixa qualidade de exibição, pois eram inseridos manualmente no formato SVG. Com a ajuda do chapter de desenvolvimento, descobrimos que esses ícones passavam por um processo de compressão automático aplicado pela Vtex, o que comprometia a qualidade visual dos ícones.

• Diagnóstico: Problemas de exibição de ícones (SVG) devido à compressão pela Vtex Legacy.

Teste técnico

Com base no diagnóstico realizamos testes com os ícones em SVG, alterando elementos definidos no código, como tamanho, cores e ícones, além de outros aspectos. Os testes confirmaram que, mesmo com essas alterações, o problema persistia devido à compressão aplicada pela Vtex.

• Contexto: Debates sobre a compressão dos ícones .svg na Vtex.
• Atividade: Testes técnicos para alterar tamanhos, cores e aspectos dos ícones no código.
• Resultado: Compressão da Vtex ainda afeta a qualidade dos ícones mesmo após ajustes no código.

Análise do Diagnóstico

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 Legacy faz com que os ícones svg passar por um tratamento para exibi-lo sem que este não comprometa a velocidade de carregamento da página.

Aprendizado sobre SVG

• Mais “pesado” computacionalmente, requer tratamento para não comprometer velocidade de carregamento.

Descoberta

• Buscar alternativas para exibir a representação visual da categoria.

Diretrizes

Quando você não tem a possibilidade de realizar testes de usabilidade formais para avaliar a efetividade de ícones, é possível adotar estratégias alternativas que ajudam a mitigar o risco de problemas na interpretação.

• Técnica utilizada: Buscar e aplicar convenções e boas práticas.
• Boas práticas: 10 Usability Heuristics for User Interface Design | NN/g

Convenções

• Coerência visual: Manter o estilo visual do produto, como paleta de cores, estilo gráfico (ilustrações, fotos ou ícones) e consistência com outras partes da interface.
• Significado claro: Utilizar de artifícios visuais intuitivos e representativos da categoria a que pertencem. Isso evita ambiguidade e garante que os usuários entendam a associação facilmente.
• Análise comparativa: Observando o que concorrentes ou produtos semelhantes estão utilizando para categorias. Isso pode servir como referência de convenção de mercado.
• Aprovação interna: Validar as escolhas com o time, considerando perspectivas de stakeholders como designers, PMs e especialistas em marketing.

Benchmarking

O Benchmarking aplicado nesse contexto ajuda a analisar como outras empresas resolvem problemas similares, trazendo referências para identificar padrões reconhecidos e oportunidades de inovação.

Recorte benchmarking

Ações

• Avaliação de plataformas de outras empresas que usam Vtex Legacy.

Descoberta

• Identifiquei que, devido a limitações técnicas e de desempenho, muitas empresas preferem manter as listas de categorias em texto simples, sem a utilização de ícones.

Observações

• Impacto no Desempenho: A decisão de não usar ícones também diminui a complexidade do desenvolvimento e manutenção da interface.
• Experiência do Usuário: A ausência de ícones pode reduzir a carga cognitiva do usuário, uma vez que o texto simples é mais rápido de ser processado visualmente. No entanto, a falta de elementos visuais pode tornar a navegação menos intuitiva e engajadora, especialmente em categorias mais complexas.
• Oportunidades de Inovação: Exploração de alternativas como o uso de imagens reais de produtos, que podem atrair mais os consumidores e melhorar a experiência de navegação.

Elementos Visuais (UI)

Com base nesse estudo e nos conhecimentos adquiridos previamente sobre a biblioteca do design system, foi possível estabelecer:

• Mapeamento da Estrutura:: Consolidei tudo o que tínhamos sobre os ícones para entender a extensão da demanda, organizar os elementos de interface e identificar como estavam estruturados no código.
• Consistência Visual: Visando manter um estilo uniforme, com tamanhos, formatos e qualidades consistentes, a fim de evitar desorganização visual.
• Padronização de Rótulos: Alguns rótulos precisam ser ajustados para evitar a hifenização indevida em determinadas 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:

• Relevância da Imagem: Escolher imagens que representem claramente a categoria, seguindo convenções para assegurar que os elementos sejam familiares e compreensíveis para os usuários.
• Texto Descritivo: Validar rótulos para que sejam legíveis e suficientemente descritivos para cada categoria, reforçando o entendimento do usuário.
• Facilidade de Navegação: Organizar a navegação de maneira simples e fluida, considerando a inclusão de filtros ou menus suspensos que facilitem o acesso às categorias.

Screenflow “As Is”

O Screen Flow “As Is” ajuda entender o contexto da navegação, identificando possíveis fricções ou oportunidades de melhoria no acesso à página.

Descobertas

Screen Flow “As Is” mapeado:
O usuário acessa o CompraOn → Navega pelo Ver mais → Encontra a categoria desejada → Clica em um item → Chega na página de produto.

Tarefa do Usuário baseada nisso:
O usuário deseja encontrar um produto específico navegando pelo menu “Ver mais”.

Tarefa de usuário

Exercício

• Análise da navegação dos usuários através da ação “Ver mais”.

Tarefa

• O usuário deseja encontrar um produto específico.

Observação

• Ícones ajudam o usuário a processar informações mais rápido. Se não estão visíveis ou são irreconhecíveis, o usuário precisa ler cada rótulo, aumentando o esforço cognitivo, o que pode ser mais complexo com a hifenização .
• Oferecemos caminhos que permitem que o usuário volte para a página anterior.
  • Atualmente, para acessar outra categoria, ele precisa voltar duas vezes da página do produto na navegação, o que adiciona um passo extra e pode causar frustração.

Descoberta

• Não oferecemos um fluxo contínuo e intuitivo entre categorias.

Possível melhoria

• Facilitar o acesso às categorias, evitando a necessidade de múltiplos retornos na navegação.

Ideação

Explorar soluções possíveis.

How Might We

Como melhorar a renderização dos visual das categorias para proporcionar uma navegação mais fluida?

• Testar abordagens alternativas sem comprometer a performance da plataforma.
• Testar formatos alternativos, como JPEG ou PNG, dependendo do caso.
• Como podemos tornar a navegação entre categorias mais intuitiva e rápida.

Benchmarking

Analisando práticas de mercado e soluções adotadas por concorrentes para inspirar novas ideias.

Recorte benchmarking

Análise

• Avaliação de outras empresas no ramo Marketplace.

Descoberta

• Uso de imagens reais de produtos para representação visual de categorias.
• Categorias com apenas texto com subcategorias com imagens reais de produtos.
• Lista exibida no formato de galeria de cards.

Suposições

1. Foto de Produto Real: Atraem o consumidor e auxiliam no processo de decisão de compra.
2. Ícones tipo Outline (contorno): Podem prejudicar a legibilidade e usabilidade.
3. Rótulos com Hifenização: Dificultam o entendimento e a navegação.

Validação

Com base nas suposições levantadas, realizei pesquisas para validar os impactos na experiência do usuário.

1. Foto de Produto Real: Atraem o consumidor e auxiliam no processo de decisão de compra.

• E-commerce Brasil: 93% dos consumidores consideram a aparência visual um fator-chave na tomada de decisão de compra de um produto. No e-commerce, as fotos são essenciais para esse objetivo.
• Nosso Meio: 83% dos consumidores passaram a prestar mais atenção às fotos e vídeos dos produtos durante a pandemia, indicando a crescente importância das imagens na decisão de compra
• N/N Group: In ecommerce, product photos help users understand products and differentiate between similar items.
  

✅ Validado → Imagens reais e detalhadas são essenciais para substituir a experiência física e auxiliar na decisão de compra.

2. Ícones tipo Outline (contorno): Podem prejudicar a legibilidade e usabilidade.

• UX Movement: Solid icons are faster to recognize unless their cues are subtle and not salient enough. Outline icons are more recognizable when they have wide inner spacing.
• Universidade St Andrews: Solid icons were generally faster to recognise than outlined hollow icons as they are often silhouettes of real-life objects. There were some instances where outlined hollow icons performed better. The main identifier was due to certain characteristic cues that the icons had.
• Uxcel: […]Filled icons can work really well at small sizes, but may not hold much visual interest at larger sizes.

⚠️ Parcialmente validado →Embora não haja um consenso absoluto sobre qual estilo é superior, ao projetar ícones para aplicativos móveis, é essencial focar na simplicidade, clareza e consistência, garantindo que todos os elementos sejam facilmente reconhecíveis e acessíveis a uma ampla gama de usuários.

3. Rótulos com Hifenização: Dificultam o entendimento e a navegação

• UX Planet: Should be used as little as possible. People use them incorrectly all the time and the meaning is usually clear without. Just avoid the whole issue.
• Content Design London: Hyphens slow online comprehension as words with hyphens take longer to scan. They can make the reader need to stop to unpick meaning.
• Material Design: Dashes and hyphens can interrupt a sentence and lead to a fragmented experience, so they should be used with caution

⚠️ Parcialmente validado → Algumas palavras tem a necessidade do uso do hífen, porém em muitos casos é possível reescrever a frase ou utilizar outra palavra para evitar o uso do hífen que pode acabar por reduzir a velocidade de leitura do usuário. Agora se não for possível evitar o uso do hífen é permitido utilizá-lo, porém no caso de botões devemos evitar a quebra de linha.

UX Design World

Prototipagem

Experimentação

Esse processo permite testar diferentes alternativas antes de solidificar o design final, podendo ser modificado e ajustado conforme o feedback recebido.

O fluxo de telas e a representação inicial da solução são essenciais para validar e melhorar a experiência do usuário na fase de Prototipagem. Isso ajuda a entender se a solução proposta funciona de forma fluida e se cumpre os objetivos definidos na fase anterior.

Foi através dessa etapa que pude compreender e explorar melhor como a solução poderia ser mais continua e intuitiva. Conforme alinhamento técnico e feedbacks pude realizar ajustes e prosseguir com a entrega.

Entrega

Apresentar a proposta, validar e ajustar.

Proposta

Antes

Depois

Decisão

• Representação visual com imagens reais de produtos, facilitando a compreensão e ajudando na tomada de decisão.
• Exibir imagens sem comprometer a legibilidade.
• Mapear realização de melhorias com base nas métricas do Hotjar e Google Analytics.

Interação

• Garantir que imagens e textos tenham padrões definidos para evitar desalinhamento.
• Destacar a categoria ativa para melhor orientação do usuário.
• Manter comportamento nativo do gesto para realizar a rolagem da tela (scroll).
  • Scroll infinito para carregar mais produtos automaticamente.
• Garantir áreas clicáveis adequadas e interações suaves.
• Incluir novas categorias seguindo padrão de organização para manter a lógica.

Melhoria

Parte 1 – Melhorias iniciais na usabilidade

• Inclusão de um campo de busca simples, seguindo o comportamento nativo do componente.
• Resultados de busca indicados por respostas visuais e animações para direcionar a atenção do usuário.

Parte 2 – Aprimoramento da busca

• Evolução do mecanismo de busca para uma versão mais robusta.

Iteração

• Teste A/B: Alterações nas categorias em destaque (página inicial) para melhorar o engajamento.

Implementação

A fase onde as soluções deixam de ser conceitos e protótipos para se tornarem produtos reais, sendo testadas e refinadas na prática.

Handoff

O processo foi conduzido de forma colaborativa, garantindo alinhamento contínuo com a equipe. Além de validações técnicas para assegurar a viabilidade da proposta, reuniões foram realizadas para esclarecer dúvidas e alinhar expectativas. Após a reunião com o Product Manager (PM) para apresentação da proposta, por fim, a versão aprovada foi documentada e compartilhada por meio do Jira, no formato de design handoff.

Documentação

• Proposta
• Links úteis
• Arquivos de design

As informações documentadas garantem o registro completo do histórico do processo de design.

Benefícios

• Garantir a coesão e a rastreabilidade.
• Assegurar que as informações essenciais estejam disponíveis para o sucesso da implementação.

Oportunidades

Oportunidades identificadas que colaboram para que o fluxo do usuário seja contínuo, intuitivo e favoreça o fácil acesso às páginas de maior interesse, reduzindo fricções na navegação.

Atualmente, o usuário pode ter dificuldade em retornar rapidamente para a visão geral das categorias ao explorar produtos. A inclusão de um link “Categorias” no menu de rodapé permitiria um acesso mais direto, sem a necessidade de múltiplos toques ou voltar várias telas.

Oportunidade: Inclusão no menu de rodapé a opção de “Categorias” para navegação rápida.

Benefícios: Menos fricção na jornada do usuário e maior descoberta de produtos.

Como poderia funcionar?

No rodapé, junto a links como “Home” e “Carrinho”, adicionar uma nova opção: “Categorias”.
Ao clicar, o usuário seria levado para a página de categorias, melhorando a descoberta de novos produtos sem precisar retornar manualmente à navegação principal.

Impacto esperado: Facilitar a busca por itens específicos, reduzindo o tempo gasto na navegação.

Status: Ainda não priorizado, mas mapeado para futuras discussões

Imagine que um usuário está navegando dentro da categoria “Eletroportáteis”. Para facilitar a interação sem sair da página, incluiríamos ações rápidas no topo da lista, como filtros ou até um botão “Ver Mais Vendidos”.

Oportunidade: Inclusão de ações rápidas no topo da lista de produtos.

Como poderia funcionar?

• No topo da lista de produtos, um menu fixo com botões de ações rápidas:
  • “Melhores ofertas”
  • “Ordenar por Popularidade”
  • “Ver Novidades”
  • “Ver Categorias“
• Isso permite que o usuário refine sua busca com base em ações mais utilizadas com base em análise de dados.

Alinhamento com o Princípio #3 – “User Control and Freedom”

• O usuário pode ajustar sua busca rapidamente sem se sentir preso ou forçado a navegar por um caminho específico.
• A experiência se torna mais fluida e adaptável às necessidades individuais.

Impacto esperado: Aumentar possibilidades de fluxo contínuo e intuitivo dentro da categoria vigente, alinhado com o princípio #3 “User Control and Freedom” das 10 Usability Heuristics for User Interface Design.

Status: Ainda não priorizado, mas mapeado para futuras discussões

Essa heurística enfatiza a importância de fornecer maneiras claras para os usuários navegarem e recuperarem-se de ações indesejadas, o que é crucial para criar um fluxo contínuo e intuitivo.

Obrigada por ler!

Referências

Introdução ao SVG – Scalable Vector Graphics – Dev Media

Teste de compreensão de ícones – Brasil UX Design

10 Usability Heuristics for User Interface Design – NN/g

Classes D e E continuarão a ser mais da metade da população até 2024, projeta consultoria – Infomoney Informações que Valem Dinheiro

Revisão sistemática sobre dificuldades de aprendizagem no processo de alfabetização​ – UEPB DSpace

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

Reflexões sobre os desafios da prática da leitura e a administração de recursos educacionais​ – USP – Universidade de São Paulo