Superando
limitações
Como podemos melhorar a experiência e aumentar as taxas de conversão?
CLIENTE
ELO
About Me.
Experiência
2022-2022
Designer UX/UI Sr.
Responsabilidades
-
Projetar experiências do consumidor
-
Contribuir com a taxa de conversão
-
Implementar decisões orientadas a dados
-
Fomentar e estruturar processo de design
-
Realizar pesquisa e descoberta
-
Estabelecer colaboração
Contexto
O CompraOn foi um produto em fase piloto desenvolvido pela Elo, incorporando características de MVP no ambiente Vtex. Inicialmente, estava disponível apenas em um aplicativo federal, visando uma base de usuários de mais de 12 milhões de pessoas.
Embora inicialmente integrado a essa plataforma especializada, o plano de negócios abrangente visava sua rápida expansão para diversas plataformas. Essa iniciativa nos proporcionou liberdade significativa para explorar uma gama de estratégias, todas meticulosamente alinhadas à visão de longo prazo da empresa.
Desafios
-
Restrições de ambiente
-
Falta de acesso direto ao usuário
-
Lacuna nos padrões de design
-
Informações escassas sobre o produto
-
Dinâmica de marktplace
Ferramentas
-
Figma
-
GA4
-
Jira
-
Hotjar
Impacto
3 milhões de acessos diários de uma base de ~12 milhões
Meu papel
Minha função envolvia aplicar atividades de design para entregas que seriam implementadas no ambiente Vtex, visando atingir os objetivos de negócio e, ao mesmo tempo, aprimorar a experiência do usuário. Para isso, trabalhamos em estreita colaboração com o Product Manager do Grupo Elo.
Também fui responsável por construir um processo de validação. Cada solução precisava ser validada por nossos desenvolvedores e, em seguida, pelo PM, e como a aplicação era incorporada a um aplicativo principal, todas as entregas exigiam a aprovação da equipe do aplicativo principal para mantivéssemos o alinhamento com seus padrões e requisitos de integração. A validação é um processo padrão para um designer de UX/UI, mas era importante adaptar o cronograma das propostas às diversas etapas validação do produto.
Minhas propostas incluíam insights e pontos críticos que exigiam atenção da equipe para que obtivéssemos o sucesso das soluções. As entregas eram projetadas para refinamento contínuo com base em dados e na evolução da dinâmica de negócios e mercado.
Período
2022-2022
Metas
Reunir, analisar e sintetizar informações sobre o produto em constante evolução.
Identificar e manter padrões de design consistentes à medida que a visão do produto se torna mais definida, garantindo uma experiência unificada para o usuário.
Transformar limitações em oportunidades para soluções de design inovadoras e não convencionais, expandindo limites para criar experiências únicas e envolventes.
Problem Statement
Atualmente, a plataforma apresenta ícones com baixa qualidade em diversas áreas, o que compromete tanto a estética quanto a clareza na navegação. Isso impacta negativamente a experiência dos usuários, dificultando o entendimento visual e a percepção de qualidade do produto.
Pesquisa
Não tínhamos acesso direto aos nossos usuários, mas recebíamos dados por meio de relatórios. Além disso, realizava pesquisa documental para obter uma compreensão geral do contexto do usuário, tendências de mercado e práticas do setor.
Benchmarkings de UX e de negócios eram realizados e compartilhados com a equipe, analisávamos continuamente outras plataformas para coletar dados sobre recursos, padrões de interface, funções e fluxos, a fim de obter insights.
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.
Descoberta
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, através da aplicações de técnicas e atividades orientadas por modelo de processo de design.
Com os dados coletados, analisados e transformados, validamos os entendimentos junto ao Product Manager
Board
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, para que a criação da proto-persona fosse embasada em dados concretos.
Sabíamos desde o início que essa versão deveria evoluir conforme a evolução e amadurecimento do produto, mas o conhecimento adquirido sobre a audiência nos permitiu tomar decisões mais informadas, reduzindo vieses e afastando suposições.
How
Might
We
Como que poderíamos?
-
Como podemos melhorar a qualidade dos ícones no menu sem comprometer a performance da plataforma?
-
Como podemos melhorar a renderização dos visual das categorias para proporcionar uma navegação mais fluida?
-
Como podemos redefinir a experiência visual do menu considerando limitações técnicas de renderização de ícones?
-
De que forma podemos substituir ícones de baixa qualidade por elementos visuais mais eficazes para navegação?
-
Como podemos nos certificar de que a navegação no menu seja intuitiva e visualmente consistente dentro das restrições técnicas da plataforma?
Análise de comportamento
Realizei a coleta e análise do comportamento do usuário, o que permitiu um entendimento mais aprofundado do problema. Esse processo foi essencial para trazer clareza à navegação dos usuários em relação ao cenário descrito, além de identificar pontos críticos que impactam a experiência.
Aprendizados
-
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.
Ferramentas: Google Analytics e Hotjar
O que é um ícone?
"O Google, no guideline do Material Design, descreve ícones como formas geométricas básicas, intuitivas que representam visualmente ideias, recursos ou tópicos."
Heber Alvares | UX Collective
Análise técnica
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.
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.
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.
Princípios
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
Realizei o benchmarking em dois momentos, para:
-
Analisar como outras empresas que utilizam Vtex resolvem problemas similares, trazendo referências para identificar padrões e oportunidades de inovação;
-
Analisar práticas do mercado e soluções adotadas por concorrentes no ramo de marketplace para explorar possíveis soluções.
O benchmarking forneceu direcionamento sobre como o processo de compressão é um fator determinante também para outras empresas sobre como é exibido componentes de navegação (ex.: menu) e como no mercado tem uma solução que conversa com uma abordagem possível dentro do nosso ambiente, de acordo com a análise técnica.
Suposições
-
Foto de Produto Real: Atraem o consumidor e auxiliam no processo de decisão de compra.
-
Ícones tipo Outline (contorno): Podem prejudicar a legibilidade e usabilidade.
-
Rótulos com Hifenização: Dificultam o entendimento e a navegação.
Validações
Com base nas suposições levantadas, realizei pesquisas para validar os impactos na experiência do usuário.
Fluxos
A análise de comportamento forneceu insights sobre a navegação preferencial dos usuários, levando uma análise mais aprofundada no contexto de navegação de um dos menus dos quais apresentava ícones e que esses ícones apresentavam problemas de exibição.
Após tratar essa área prioritária e observar os resultados das melhorias, passaremos para as demais áreas. 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.
Os screen flows permitem que seja analisado e registrado o estado atual da navegação, com esse mapeamento foi possível identificar pontos de dores na experiência.
Auditoria de Interface
Consolidei tudo o que tínhamos sobre os ícones da área prioritária, evoluções, extensão da demanda, organização dos elementos e como estavam estruturados no código.
Com base nesse estudo e nos conhecimentos adquiridos previamente sobre a biblioteca do design system, foi possível estabelecer:
-
Entendimento sobre a consistência visual, visando manter um estilo uniforme, tamanhos, formatos e qualidades consistentes, a fim de evitar desorganização visual.
-
E necessidade de padronização de rótulos, pois alguns rótulos precisam ser ajustados para evitar a hifenização indevida em determinadas categorias.
Arquitetura
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.
Prototipagem
Esse processo de experimentação permite testar diferentes alternativas antes de solidificar o design final, podendo ser modificado e ajustado conforme o feedback recebido.
Representação inicial e fluxo de telas 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.
Entrega
Diante do diagnóstico de baixa legibilidade dos ícones no menu , que é resultado de compressão de arquivos SVG na plataforma VTEX Legacy, entendemos que uma simples troca do formato (de SVG para JPEG ou PNG) não resolveria o problema de forma satisfatória.
Ao aprofundar o entendimento sobre o perfil do público-alvo, composto majoritariamente por usuários das classes D e E, identificamos uma característica relevante: Dificuldades relacionadas à leitura, letramento e decodificação de símbolos abstratos (ícones).
A análise de concorrentes e de referências de mercado que atendem perfis semelhantes reforçou que o uso de imagens fotográficas ou representações reais das categorias é uma prática que melhora a compreensão, reduz o esforço cognitivo e impacta positivamente na decisão de compra.
Resumo da solução adotada:
Decisões Visuais
-
Representação visual com imagens reais de produtos, facilitando a compreensão e auxiliando o consumidor na tomada de decisão.
-
Exibir imagens em formato que aprimora a usabilidade da navegação sem comprometer a performance.
Comportamento da Interface
-
Garantir que imagens e textos sigam padrões definidos para evitar desalinhamento visual.
-
Destacar a categoria ativa para melhorar a orientação do usuário.
-
Manter o comportamento nativo do gesto para rolagem da tela (scroll).
Interação do Usuário
-
Implementar scroll infinito para carregar mais produtos automaticamente.
-
Garantir áreas clicáveis adequadas e interações suaves.
-
Incluir novas categorias seguindo um padrão de organização para manter a lógica de navegação.
Métricas e Monitoramento
-
Mapear realização de melhorias com base nas métricas do Hotjar e Google Analytics.
Melhorias
Melhorias foram documentadas e mapeadas para serem implementadas em duas fases devido a restrições de escopo da entrega e prazo. Elas visam tratar pontos de dores identificadas durante o processo de design.
Fase 1
Inclusão de busca
Inclusão de um campo de busca simples, seguindo o comportamento nativo do componente, indicando resultados de busca por respostas visuais e animações para direcionar a atenção do usuário
Fase 2
Aprimoramento da busca
Seguimos para a implementação, com a proposta principal combinado com a melhoria de inclusão de busca no menu. Nesse momento as soluções deixam de ser conceitos e protótipos para se tornarem produtos reais, sendo testadas e refinadas na prática.
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.
Iteração mapeada para fila de CRO:
-
Teste A/B: Alterações nas categorias em destaque (página inicial) para melhorar o engajamento.
Oportunidades
Oportunidades foram identificadas relacionadas ao fluxo de categorias para que o usuário possa ter uma experiência mais fluída e continua, conforme um dos pontos de dores. Essas oportunidades foram mapeadas e documentadas na entrega para backlog de design para serem evoluídos em uma entrega separada.
Oportunidade 1
Navegação mais eficiente
No rodapé, junto aos links existentes (“Home”, “Carrinho”), seria adicionada a opção “Categorias”. Ao clicar, o usuário seria levado diretamente à página de categorias, sem precisar sair da página atual manualmente.
Benefícios:
-
Redução de fricção na jornada do usuário.
-
Maior descoberta de produtos com acesso simplificado.
-
Melhor experiência de navegação, tornando o processo mais intuitivo.
Oportunidade 2
Atalho dentro das categorias
Adicionar um menu fixo com ações rápidas no topo da lista de produtos, incluindo, conforme imagem acima, opções como: Melhores ofertas, mais vendidos e categorias.
Benefícios:
-
Maior controle do usuário sobre o catálogo.
-
Experiência personalizada e ajustável conforme interesse.
-
Mais eficiência na busca por produtos relevantes
Conquistas
1
Solidificar
a pespectiva
Solidificar a perspectiva por meio da colaboração contínua orientada por abordagem de Double Diamond. Essa abordagem nos permitiu obter uma visão holística do produto, alinhando a experiência de design às necessidades do cliente e às expectativas de seus parceiros. O resultado foi uma visão de design altamente elogiada que repercutiu no cliente e nas partes interessadas.
2
Estabelecer consistência
Ao colaborar ativamente para manter o sistema de design atualizado e alinhado com a experiência desejada do usuário, garantimos a consistência em todo o produto. Isso foi alcançado por meio de princípios de design claros apoiados por conceitos como as "10 Heurísticas de Usabilidade para Design de Interface de Usuário", promovendo uma linguagem de design unificada e coesa para designers e usuários.
3
Superar
limitações
Abordamos as restrições para juntos conseguirmos inovar e buscar fluxos de trabalho internos que possibilitaram entregas de valor para usuários e parceiros. Essa abordagem nos permitiu entregar melhorias que geraram resultados tangíveis, expandindo os limites do que era possível dentro das limitações técnicas e operacionais do projeto.
Retrospectiva
Compartilhando pontos críticos
Reconhecendo a importância de considerar todo o ecossistema de um projeto de design, incluindo o back-end, as regras de negócio e as considerações legais. Minha experiência com a Elo enfatiza o valor da comunicação aberta sobre desafios para facilitar a resolução colaborativa de problemas.
Planejar e adaptar
Defender uma abordagem dinâmica para o design no cenário em constante mudança do e-commerce. Destaca a necessidade de planejar continuamente e estar pronto para se adaptar para se manter à frente das tendências e desafios em evolução.
Adotando a não linearidade
Deixando que as necessidades do projeto guiem o processo de design, em vez de aderir rigidamente a etapas predefinidas.
Decisões baseadas em dados
Ressalta a importância dos dados para embasar decisões e estratégias de design. O papel da análise de dados na compreensão do comportamento do usuário, na identificação de tendências e na descoberta de insights que impulsionam soluções de design eficazes.