Vai de Visa
Redesign da experiência mobile de benefícios Visa | Estudo de Caso
| Cliente | Estudo de caso para o curso de Design UX/UI Avançado da Coderhouse |
| Setor | Financeiro / Serviços / Varejo |
| Meu papel | Product Design, da pesquisa à concepção, arquitetura de informação, UI e testes. |
| Ano | 2023 |
Contexto
Bandeiras de cartão de crédito estão presentes no cotidiano das pessoas, mesmo de forma discreta. Embora possam parecer iguais, uma das principais diferenciações são as vantagens oferecidas por meio de seus programas de benefícios para o cliente.
E se o aplicativo de benefícios, ao invés de promover a marca, se torna um elemento negativo?
Como melhorar a experiência das pessoas, tornando o app mais vantajoso e atrativo, incentivando o uso do cartão de crédito e a fidelização à marca?
Este projeto foi realizado durante o curso de Design UX/UI Avançado da Coderhouse. O objetivo foi redesenhar um produto digital já existente, buscando soluções para os problemas identificados. O produto escolhido foi o Vai de Visa, aplicativo mobile do programa de benefícios dos cartões Visa.
O problema
Experiência do usuário comprometida pela usabilidade deficiente do app Vai de Visa
O produto digital apresenta problemas de navegação, falta de clareza e consistência na interface. Além de ser inferior aos aplicativos do mesmo segmento, não condiz com o renome internacional da VISA. As limitações do aplicativo tornam a consulta e utilização dos benefícios uma experiência frustrante, resultando em avaliações negativas dos usuários. Isso cria potencial de perda de receita para a empresa e prejudica a imagem da marca.
INTERFACE ATUAL DO APLICATIVO
AVALIAÇÕES NO GOOGLE PLAY STORE E APP STORE
Aprofundando-se
no tema
Desk Research
Para entender amplamente o mercado de cartões de crédito, programas de benefícios e comportamento do consumidor, reuni informações que orientaram a análise do produto.
Analisei dados como perfil e necessidades de usuários de cartão de crédito e tendências de mercado no Brasil e no mundo, a partir de fontes públicas governamentais, empresas, comunidades de usuários, publicações e relatórios de pesquisa.
Obs: Em um cenário real, seria imprescindível envolver todos os stakeholders em uma conversa. Isso implica considerar a perspectiva de negócios, a integração tecnológica, os objetivos de marketing da empresa e as particularidades do mercado local.
Principais Descobertas
Cadeia de valor, players principais e market share
Entendimento do papel dos diferentes players e a dinâmica da cadeia de valor no mercado de cartões de crédito no Brasil. Em geral, o controle do mercado é concentrado em poucos players, sobretudo no setor de bandeiras. Em 2020, A Visa deteve 48,6% de market share no país, seguida pelo seu principal concorrente Mastercard com 33,6%. Fonte: Abecs (Associação Brasileira das Empresas de Cartões de Crédito e Serviços), 2020
Crescimento do mercado no Brasil
Em junho de 2022, a quantidade de cartões de crédito (190,8 milhões) representava quase o dobro da população economicamente ativa no Brasil (107,4 milhões).[1] O número de clientes que usam o cartão de crédito cresceu 30,9% entre 2019 e 2022.[2] O crescimento do mercado foi impulsionado principalmente pela atuação das instituições predominantemente digitais.
Fontes: [1] Instituto Brasileiro de Geografia e Estatística (IBGE) – Sistema de Pagamentos Brasileiro (SPB), 2022 | [2] Banco Central (BC), 2023
Os consumidores buscam por recompensas
2 a cada 10 consumidores no Brasil, pretendem solicitar novos cartões de crédito, em busca de novas vantagens. Além do limite de crédito, entre as principais vantagens procuradas estão sistemas de recompensa (como cashback), programa de milhas e de fidelização. Fonte: Serasa, 2023
No mercado americano, 9 a cada 10 usuários valorizam os programas de recompensa dos seus cartões [1]. As recompensas dos cartões são acessíveis, valiosas e bem compreendidas pelos consumidores, em todos os níveis de renda. [2]
Fonte: American Bankers Association, 2021 – [1] [2]
Mobile first
Quase 90% dos brasileiros com acesso à internet fazem transações financeiras apenas pelo celular. 39% consideram a facilidade de utilização do aplicativo ou internet banking na hora de mudança de instituição financeira. [1] Neste cenário, fica evidente a importância de um app efetivo como parte da relação do usuário de cartão de crédito com a sua bandeira em meios digitais. Fonte: Kantar Ibope Media, 2022
Importância dos programas de benefícios na experiência de uso dos cartões de crédito
Ao tornar a experiência mais gratificante, os programas incentivam o uso recorrente do cartão de crédito como meio de pagamento. Além disso, os benefícios oferecidos são um diferencial mercadológico que contribui para o fortalecimento da marca perante o público e parceiros comerciais.
Pesquisa e Entrevista
Realizei uma pesquisa qualitativa por meio de entrevistas, com ênfase no contexto de utilização de aplicativos de benefícios de cartões de crédito, principalmente o Vai de Visa.
Roteiro das Entrevistas
Foram realizadas entrevistas por videochamada com 5 pessoas, que se encaixavam no perfil de proto persona do produto. Os entrevistados eram pessoas de 25 a 50 anos, sem distinção de gênero, das Classes B e C e usuários regulares do cartão de crédito Visa.
OBJETIVOS
• Entender a relação das pessoas com programas de benefícios de bandeiras de cartão de crédito
• Aprender sobre o contexto de uso dos aplicativos relacionados a esses programas
• Verificar hipóteses de barreiras para o uso do aplicativo Vai de Visa
Insights da pesquisa
Sobre programas de benefícios
As bandeiras importam, mas não são “lovemarks”
Os entrevistados não costumam associar prestígio ao fato de portar uma bandeira específica. Embora Visa e Mastercard sejam valorizadas por sua ampla aceitação, são consideradas semelhantes, com poucas diferenças perceptíveis.
Benefícios Visa são mais associados a viagens
O programa de benefícios da VISA é mais associado com viagens internacionais e vantagens destinadas a um público com maior poder aquisitivo. (ex: serviço de concierge, restaurantes e hotéis de luxo).
“Tem uns benefícios, que para mim ainda são meio inacessíveis. Na prática eu não vou me hospedar porque tem 30% de desconto, pra mim ainda vai estar caro.“
Baixa percepção dos benefícios Visa de compras
Os benefícios relacionados a compras e descontos em lojas são menos conhecidos e mais associados a produtos duráveis ou de maior valor, criando a impressão de que não são destinados a um uso frequente.
“Existem uns descontos de site de compra de eletrodomésticos, mas geralmente acho um pouco difícil, e as vezes o valor nem vale tanto a pena. Você precisa aprender todo um procedimento novo, as vezes dá tanto trabalho que nem vejo direito.”
Sobre o aplicativo Vai de Visa
A experiência geral é muito ruim
Diversos problemas surgem ao longo do processo, desde o cadastro até as buscas por benefícios, isso resulta em uma experiência do usuário extremamente frustrante em vários momentos da jornada.
O app não está a altura da Visa
Percepção geral de que o app não corresponde à reputação e à experiência associadas à Visa, mostrando-se inferior aos produtos digitais concorrentes.
Eu tentei fazer o cadastro… sério eu tentei umas 10x pra dar certo. Fora o layout, achei bem fora do padrão, do tamanho da Visa, se esperava que fosse melhor, achei meio quadradão.”
O usuário busca uma experiência personalizada
A personalização das ofertas e informações específicas para o perfil do usuário é limitada. Seria vantajoso para o usuário poder filtrar as ofertas exclusivamente relacionadas à categoria de seu cartão.
Muitas etapas e pouca praticidade
A navegação confusa e os redirecionamentos para sites externos prejudicam a experiência do usuário do app, tornando-o menos prático e relevante.
“Tudo leva a um site, então o próprio app não é tão útil, porque você pode provavelmente ver tudo no site deles”
Construindo empatia
Netnografia de comentários de usuários
Analisei os comentários dos usuários nas lojas de aplicativos (Google Play e App Store) para entender melhor suas experiências e percepções sobre o app, incluindo o que gostaram, o que os frustrou e o que os deixou insatisfeitos.
User Personas
Com base nas entrevistas qualitativas, criei duas User Personas, cada uma com um perfil e objetivo específicos.
VIAJANTE: este usuário utiliza o aplicativo com foco em benefícios relacionados a viagens. Ampliar
CONSUMIDOR: este usuário busca no aplicativo benefícios relacionados a compras e consumo. Ampliar
Mapas de jornada
Os mapas ilustram a jornada de interação de cada usuário com o produto, desde o início até a conclusão de diferentes objetivos com base em seus perfis. Além disso, eles refletem as emoções, motivações e expectativas experimentadas pelo usuário em cada etapa de contato com o produto.
Benchmarking
Realizei uma análise comparativa entre os principais aplicativos do segmento de programas de benefícios de bandeiras de cartão de crédito, levando em conta as particularidades e diferenças entre os tipos de programas e as propostas dos aplicativos. Examinei a interface, o fluxo de ações, as funcionalidades e os feedbacks dos usuários.
Essa análise forneceu insights valiosos para aprimorar o app e torná-lo mais competitivo, sendo útil para aprender e implementar soluções, como login por biometria e melhorias no fluxo do usuário durante o cadastro de cartões e busca de benefícios.
Quadro comparativo | Apps de benefícios de bandeiras de cartão
Diagnóstico
de problemas
Análise heurística
Além de analisar os relatos dos usuários, interagi diretamente com a interface, verificando a conformidade com os princípios de Nielsen. Organizando em uma tabela, identifiquei problemas, classifiquei sua gravidade e propus soluções, registrando recomendações para uma melhor experiência do usuário.
Pontos importantes analisados:
Falta de visibilidade do status do sistema, com falta de clareza da localização do usuário no app e ausência de feedback em diversas telas.
Deficiência na prevenção de erros. Falta alerta para redirecionamento externo no app e opção de confirmar ou desfazer ações importantes.
Falta de flexibilidade e eficiência de uso, pelo excesso de etapas para concluir tarefas.
Priorização
de melhorias
Para identificar as necessidades críticas e definir prioridades, utilizei as ferramentas Matriz de Necessidades e Matriz de Desejabilidade e Praticidade .
A partir daí, estabeleci os seguintes pontos críticos a serem trabalhados:
Melhorando a
arquitetura de
informação
Análise da arquitetura atual
Para obter uma visão completa da arquitetura atual do app, criei um organograma mapeando as telas e informações principais. Isso ajudou a encontrar problemas e oportunidades de melhoria.
Teste de árvore
Em seguida, utilizando a plataforma Maze, conduzi um teste de árvore(tree testing) com 10 usuários, que foram convidados a navegar na estrutura hierárquica do app, sem design visual, para realizar 3 diferentes tarefas:
• Cadastrar um novo cartão
• Acessar informações sobre saque emergencial
• Acessar informação sobre um benefício promocional
O objetivo foi avaliar a organização e a linguagem utilizada na estrutura do aplicativo, analisando sua intuitividade e a rapidez com que os usuários conseguiam localizar as informações desejadas.
Os resultados do teste confirmaram a hipótese de que havia oportunidades para melhorar a categorização das opções e suas nomenclaturas. Os usuários tiveram dificuldade em encontrar as informações alvo, seguindo por fluxos incorretos ou mais longos que o necessário.
Insights
A análise geral do app, sua arquitetura original e os resultados do teste forneceram insights como:
Exibir o potencial das categorias
Do ponto de vista comercial, é crucial que todos os benefícios estejam sempre visíveis aos usuários, incentivando a percepção das possibilidades e o desejo de progredir nas categorias de cartão.
Personalização de experiência
Usuários de categorias mais baixas podem se frustrar com serviços inacessíveis. A inclusão de filtros facilita a experiência sem comprometer os objetivos comerciais.
Promoção sem redundância
A arquitetura original repete algumas opções e serviços com frequência para promovê-los. Explorar novas abordagens visuais evita que a experiência seja cansativa pela redundância.
Emergência requer agilidade
Serviços de viagem que envolvam emergências precisam estar disponibilizados de forma mais direta, com menos etapas.
Nova arquitetura proposta
A estrutura de navegação geral foi mantida, mas reorganizei as categorias para facilitar a localização de informações e melhorar a experiência do usuário. Também revisei algumas nomenclaturas para garantir maior consistência e compreensão.
Prototipando
as soluções
Taskflow e Wireframes em baixa fidelidade
Com a nova arquitetura de informação definida, organizei em taskflows , a sequência de etapas para que um usuário logado possa realizar duas tarefas no aplicativo:
1. Incluir um novo cartão
2. Assinar uma oferta promocional de serviço parceiro (ex: Amazon Prime)
Essas tarefas eram desafiadoras na estrutura original, então os fluxos correspondentes foram selecionados para serem explorados no protótipo.
Nesta etapa inicial de prototipagem, comecei com wireframes em baixa fidelidade para esboçar a estrutura geral e os elementos em telas-chave:
Wireflow em média fidelidade
Aprimorei o protótipo para uma versão de média fidelidade, utilizando um wireflow para visualizar os fluxos de navegação e detalhar as interações principais.
Posteriormente, expandi o escopo do protótipo adicionando um terceiro fluxo de tarefas. Incluí a busca e utilização de benefícios relacionados a serviços emergenciais durante viagens, uma área identificada como um ponto de dor na pesquisa e no Teste de Árvore.
Protótipo em alta fidelidade
Explore o protótipo ao lado ou acesse-o através do Figma.
Refinei os componentes e interações, seguindo o brandbook da VISA e usando elementos de outras interfaces digitais da empresa. Curiosamente, o próprio app original não seguia diversas diretrizes de identidade visual e digital da empresa.
Optei por este nível de detalhamento para simular a experiência real do usuário e obter feedbacks mais precisos. Esse protótipo possibilitou realizar um teste de usabilidade, identificar problemas de design e obter insights.
Evolução
da interface
ORIGINAL vs REDESIGN
Login facilitado para um conteúdo personalizado
A tela de login era exibida apenas no primeiro acesso, nos seguintes, os usuários acessavam deslogados. Para ver os detalhes dos benefícios, era necessário logar novamente, tocando no ícone do perfil na Home. Além de pouco intuitivo, isso tornava a experiência frustrante.
O redesign propõe simplificar a tela de login, mantendo o acesso sempre identificado para personalização de conteúdo na Home.
LOGIN COM BIOMETRIA
LOGIN COM EMAIL
Home com maior organização e hierarquia
Busca de ofertas personalizada, com agilidade e informação
O layout original não exibia todas as categorias de ofertas de imediato ao usuário, exigindo a rolagem vertical até o final da tela. Além disso, os textos descritivos eram incompletos e não comunicavam claramente o tipo de oferta. Os usuários se frustravam ao descobrir que algumas ofertas só eram elegíveis para categorias específicas de cartão apenas após acessá-las.
Por isso, propus a adição de um filtro de ofertas ativado por um toggle. Inicialmente desativado, ele exibe todas as ofertas para incentivar os usuários a progredirem nas categorias de cartão. Os usuários podem personalizar sua experiência filtrando apenas as ofertas elegíveis para seus cartões.
Tela de ofertas segmentadas por categoria
Usufruindo do benefício em menos etapas
Na versão original do app, os detalhes dos benefícios eram apresentados em um longo texto contínuo, dificultando a identificação rápida das informações relevantes. Além disso, o botão “Saiba Mais” redirecionava o usuário para o site da Visa sem aviso prévio, exigindo um novo login e tornando o processo longo e frustrante.
No redesign, o usuário já logado, acessa o site parceiro a partir do app. Ao clicar em “Resgatar Agora”, um modal informa o redirecionamento e permite ao usuário decidir se deseja continuar.
O serviço certo na hora certa
Na versão original, os serviços eram apresentados sem categorização e lógica clara, misturando benefícios promocionais com serviços de urgência. O redesign segmenta os benefícios, destacando os serviços de suporte. Benefícios promocionais são colocados no final da tela para não atrapalharem em situações de emergência.
Um novo hub de informações sobre viagem
Na versão original do aplicativo, a seção “Viagem” mostrava cards de destinos turísticos, mas sem nenhum conteúdo ou ofertas específicas. Após analisar o site do programa de benefícios, ficou evidente que esses destaques no aplicativo não tinham propósito e foram removidos.
No redesign, essa seção se transforma em um hub de informações de viagens, orientando os usuários para benefícios e ofertas relacionados a essa categoria, tornando o conteúdo mais relevante para esse perfil de uso.
Dinamismo no uso dos benefícios de compras e viagem
Os benefícios de compras e viagens, conteúdos essenciais do aplicativo, eram apresentados em menus dropdown com textos longos e números de telefone, o que confundia e dificultava a navegação. Além disso, a elegibilidade dos cartões para os benefícios não era informada, aumentando a frustração do usuário.
No redesign, o acesso aos benefícios é facilitado por cards na Home e destaques em outras seções do app. Eles são representados por botões, divididos em subgrupos temáticos, que levam para telas de detalhamento, com todas as informações necessárias de forma acessível.
Assistência direcionada pela localização geográfica
Configurações e preferências em um só lugar
No app original, havia dois menus de configurações separados, acessados por caminhos distintos. O redesign solucionou esse problema ao consolidar tudo em uma seção chamada “Mais”, que reúne configurações, preferências, informações pessoais, documentação e ajuda. Cada opção é acompanhada por um ícone para facilitar a identificação e reduzir a carga mental.
Controle e facilidade para gerenciar e cadastrar cartões
A tela original de gerenciamento de cartões carecia de informações detalhadas e categorias, dificultando a identificação. Além disso, o processo de cadastro não era atrativo e não oferecia a opção de reverter a exclusão de um cartão cadastrado.
O redesign proporciona controle e liberdade ao usuário, seguindo a heurística de Nielsen. O processo de cadastro se torna mais simples e intuitivo, mostrando informações em tempo real e oferecendo feedback visual da conclusão.
Gerenciamento dos cartões
Cadastro de novo cartão
Teste de usabilidade
Conduzi dois testes remotos com usuários finais para validar o produto, utilizando tarefas fechadas. O primeiro teste, realizado de forma assíncrona com 10 usuários, que interagiram com o protótipo através da plataforma Maze. O segundo teste foi em tempo real, pelo Zoom, com 2 usuários, permitindo observar suas reações enquanto realizavam as tarefas e compartilhavam percepções. O objetivo em ambos, era validar a continuidade dos fluxos e avaliar a taxa de sucesso na realização das tarefas propostas.
Analisando os achados
Fluxos compreendidos
Após o redesign, o feedback dos usuários foi positivo, destacando a satisfação geral com a evolução do produto e seu funcionamento. Isso também se refletiu nas métricas de usabilidade do protótipo, com 87% dos usuários concluindo todas as tarefas com sucesso.
Personalização aprovada
A opção de personalizar a experiência através da filtragem por categoria de cartão foi compreendida e bem avaliada pelos usuários. Isso não só proporcionou uma sensação de controle, mas também contribuiu para uma organização geral mais eficaz.
Flexibilidade do sistema
Os participantes conseguiram explorar com sucesso várias possibilidades de interação. As tarefas propostas não tinham um único caminho a seguir para serem concluídas. Destaque para a Tarefa 01, que envolvia a busca de um benefício emergencial e obteve 100% de conclusão com tempo médio baixo.
Problema ao procurar
Alguns poucos usuários tiveram dificuldade em encontrar imediatamente a opção de cadastro na seção ‘Mais’ do menu, mas concluíram a tarefa explorando outros caminhos. Uma hipótese para iteração seria ajustar o nome ou ícone da seção ou oferecer alternativas de acesso mais claras.
Conclusões e
Aprendizados
Negócios ∩ Pessoas
Redesenhar um projeto existente foi enriquecedor, um esforço para encontrar a interseção entre os interesses do negócio e das pessoas. Busquei entender a visão e objetivos da empresa, explorando sua atuação e mercado, ao mesmo tempo em que atendia às necessidades e desejos dos usuários.
Devido à falta de contato direto com os stakeholders da Visa, alguns aspectos de negócios e tecnologia foram abordados de maneira imaginativa. Desconsiderei eventuais restrições técnicas, considerando a empresa como global, com recursos amplos à disposição.
Em um cenário real, seria essencial obter um contexto mais abrangente, incluindo os objetivos comerciais e métricas de sucesso específicas do produto. Além disso, seria importante colaborar com a equipe de tecnologia para entender as possibilidades e limitações na criação e integração da interface proposta.
Outros aprendizados
A importância de uma boa base de usuários teste
No processo de entrevistas e testes de usabilidade, envolvi usuários do cartão Visa, mas nem todos estavam familiarizados com o app Vai de Visa ou o programa de benefícios. A familiaridade e experiência do público-alvo com o sistema ou tarefas podem influenciar nas dinâmicas e no feedback.
Menos preocupação com detalhes nas etapas iniciais
Talvez fosse viável conduzir testes de usabilidade com protótipos menos elaborados, agilizando feedbacks e iterações para algumas funções como o filtro de ofertas, por exemplo.