Como utilizamos UX Design para ajudar os correntistas do Inter a simplificarem sua vida financeira e economizar — trabalho acadêmico
O desafio
Como simplificar a gestão financeira do correntista, otimizando sua jornada como cliente e trazendo através do marketplace dicas baseadas no consumo atual do usuário.
“Ajudar os correntistas a gerir de maneira fácil e simples as suas finanças pessoais”
O cenário atual
Segundo a pesquisa Retratos da Sociedade Brasileira, disponibilizada pelo IBGE (Instituto Brasileiro de Geografia e Estatística), seis em cada dez brasileiros querem poupar mais em 2021, desejo intensificado pelo cenário de crise da Covid-19.
O Inter vem aumentando seu número de correntistas — só no terceiro trimestre de 2020 abriu 1,3 milhão de novas contas. Em vista disso, o Inter busca simplificar a vida financeira do cliente, transformando o que já possui, e trazer uma experiência única para seus correntistas, a fim de aprimorar o reelacionamento com eles.
O app do Inter oferece serviços que trazem simplicidade para a vida dos seus clientes, além de investimentos, crédito imobiliário, seguros e cartão de crédito. Também conta com o marketplace, onde o cliente recebe cashback em diversas lojas parceiras, além de poder abastecer seu carro usando o app e até mesmo comprar um plano de celular; mas ainda não tem uma solução para a gestão de gastos mensais de seus clientes.
Benchmark
A ideia dessa nova funcionalidade não é criar um concorrente para app de finanças como o Guia Bolso, mas sim trazer mais experiência para o cliente do Inter, libertando-o da preocupação de vincular um aplicativo de terceiros à sua conta bancária, para ter acesso a serviços que o ajudem a controlar seus gastos.
Para tal fez-se necessário uma pesquisa visual sobre como esses players já existentes no mercado, fazem para oferecer dashboards intuitivos e quais facilidades eram oferecidas aos seus usuários.
Você pode acessar um painel com parte dessa pesquisa aqui.
Objetivo do projeto
O objetivo do projeto é criar uma ferramenta omnichannel onde o cliente do Inter possa fortalecer sua jornada, trazendo um nova funcionalidade onde ele vai poder gerir sua finanças do cartão de débito e crédito por categorias, assim ele saberá onde está indo seu dinheiro, além de estipular limites mensais de gastos. Nesse novo canal o cliente terá um serviço personalizado onde receberá dicas e sugestões de compras, baseadas no seu hábito de consumo. Com uma boa gestão e com o cashback dessas compras ele poderá economizar cada vez mais.
Com isso, nosso objetivo é:
Facilitar a gestão financeira do correntista.
Entender os hábitos de compras do cliente e ajudá-lo a economizar.
Fidelizar o cliente.
Dar dicas de como o cliente pode aplicar o dinheiro que sobrou na conta.
Abaixo você pode conferir a proposta de valor do produto:
Por que investir nesse canal?
Fidelizando o cliente com um produto novo, trazendo uma experiência mais personalizada, aumentam as chances dele consumir mais produtos do Inter, além de ajudar na retenção desses clientes.
Só em novembro o Inter atingiu R$ 1 bilhão em vendas geradas no marketplace, imagina o que uma ferramenta que personalize essas dicas de compra, de forma que realmente faça diferença para esse cliente, pode fazer!
Por exemplo: Um cliente recebe uma dica de compra de uma geladeira em oferta com cashback em dobro, mas esse cliente já tem uma geladeira, talvez ele nem abra esse anúncio. Analisando esse mesmo cliente percebemos que ele realiza muitas compras na categoria viagem, talvez não seria mais assertivo oferecer um voo com cashback em dobro?
Espera-se que com essa nova funcionalidade o número de transações realizadas com o cartão do Inter para efetivar compras nas lojas parceiras, aumentem em 5% até março de 2021.
Persona
Persona nada mais é do que um personagem, que se baseia em dados e comportamentos reais, para representar o cliente ideal de um produto ou empresa.
Nosso produto está direcionado a pessoas que são usuárias do Inter, que já conhecem os serviços e gostariam de ter uma gestão mais adequada das finanças.
Como exemplo de persona vamos usar o Diego, um jovem fotógrafo que tem o sonho de realizar uma pós graduação, porém não administra muito bem seu dinheiro, tornando este objetivo um pouco mais difícil.
Pixar StoryTelling
Criada pela Pixar (estúdio de animação), essa ferramenta tem a capacidade de contar histórias relevantes e decidimos usá-la, pois assim fica mais fácil entender o contexto do usuário e propósito do produto, então vamos lá.
Era uma vez Diego, um fotógrafo freelancer formado em cinema e super antenado em tecnologia, que adora sair com seus amigos para curtir a noite.
Todos os dias ele pensa em dar continuidade em seus estudos, mas nunca sobra dinheiro para sua pós-graduação.
Um certo dia Diego percebeu que gasta muito com suas saídas noturnas e com compras sem descontos.
Por causa disso baixou um app de finanças comum para organizar seus gastos, mas não teve coragem de vincular o seus dados bancários.
Por causa disso ele continuou com a sua rotina normal de má gestão dos gastos.
Até que finalmente o seu banco atual lança uma ferramenta onde todos seus gastos são vinculados em categorias, além de receber descontos nas lojas que ele mais usa e dicas de investimentos. Agora ele pode economizar mais e fazer a tão desejada pós.
Jornada do usuário
Agora que já conhecemos melhor quem é nossa persona, precisamos entender os pontos de contato que nós iremos ter com ela; para isso é necessário realizar o mapeamento do processo de interação.
Elaboramos um mapa da jornada do usuário com base no modelo da empresa Nielsen Norman Group .
Nesse modelo iremos destacar a jornada do nosso ator principal, dentro de um cenário para entender quais serão seus objetivos e expectativas. Com algumas fases conseguimos extrair o que ele pensa, fala, sente e principalmente destacar quais são as principais oportunidades de negócio.
Após realizar o mapa de jornada do usuário, conseguimos identificar as seguintes oportunidades: precisamos desenhar um dashboard de gastos que seja simples e intuitivo, lembrá-los de atualizar os dados ou facilitar este processo, além de algo com dicas de gastos e ofertas personalizadas.
Primeira etapa de validação
Nessa primeira etapa não tínhamos certeza de como as pessoas organizam suas finanças. Acreditávamos que muitas tinham medo de vincular os dados bancários com apps de gestão financeira e acabavam optando por outras formas mais trabalhosas de detalhar gastos, o que desmotiva a pessoa com o passar do tempo. Por fim, imaginávamos que muitas não utilizam nenhum meio de gerenciamento de custos.
Para sanar algumas dessas dúvidas e confirmar nossa persona, começamos jogando hipóteses em uma matriz CSD, que posteriormente foram organizadas em um diagrama de impacto X conhecimento, para que pudéssemos entender o conteúdo a ser priorizado na pesquisa quantitativa
Pesquisa quantitativa
Após a priorização de hipóteses realizamos a pesquisa quantitativa visando o maior impacto para o negócio e o que traria maior conhecimento em relação ao contexto atual das pessoas, suas finanças e os maiores questionamentos eram:
Como as pessoas controlam seu gastos?
Como funcionam seus hábitos de consumo?
Como lidam com notificações de app, sobre gastos e ofertas?
Obtivemos 167 respostas e compreendemos principalmente que:
Abaixo destacamos os dados que geraram os principais insights, mas você pode conferir a pesquisa completa clicando aqui.
Pesquisa qualitativa
Após a coleta de dados da fase quantitativa, retornamos às hipóteses anteriormente levantadas na matriz CSD e confrontamos com as respostas obtidas, nos levando a duvidar de algumas. Para aprofundar nas dúvidas ainda existentes fizemos uma entrevista qualitativa com 10 pessoas e os principais questionamentos que surgiram foram :
Como avaliam a qualidade e facilidade com que executavam a gerência de seus gastos atualmente?
Como avaliam a rapidez e facilidade do método que utilizam para comparar preços?
Por que não tinham costume de usar app de gestão financeira?
Como se sentiram ao receber notificações e ofertas de aplicativos?
Para certificar que os questionamentos citados acima estavam alinhados com as dúvidas que surgiram em nossa matriz CSD, confrontamos ambas as informações, resultando no fluxo de perguntas ilustrado abaixo:
Os maiores aprendizados aqui foram:
Os usuários não impõem limites e não fazem uma gestão adequada.
A maioria não categoriza gastos dificultando que tenham noção de sua situação financeira mensal antes que o mês acabe, o que prejudica a economia pessoal.
A maioria das pessoas está aberta a receber notificações que auxiliam neste controle financeiro, mas isso não se repete quanto a ofertas.
Você pode ter acesso ao dashboard completo da pesquisa qualitativa aqui.
Alternativas de solução
Ao final da pesquisa qualitativa resgatamos algumas oportunidades destacadas na jornada do usuário, que se encaixavam com o cenário atual dos entrevistados, então fizemos um levantamento de como poderíamos trazer soluções para cada uma dessas oportunidades, como mostra a imagem abaixo:
Posteriormente estas mesmas alternativas foram organizadas em um matriz de impacto X esforço, auxiliando na priorização da ideia a ser prototipada.
Esforço:
Vincular e cruzar dados de consumo do usuário
Gerar toda uma plataforma do zero.
Focar diretamente na maior dor apontada pela pesquisa quantitativa que é a falta de hábito com gerenciamento pessoal das finanças.
Impacto:
Tornar o gerenciamento financeiro mais confortável e presente no dia-a-dia do usuário.
Diminuir a insegurança do usuário por se tratar de um app vinculado ao seu próprio banco.
Trazer dicas de ofertas baseadas nos hábitos de consumo do usuário, auxiliando em sua economia e contornando a rejeição às notificações de ofertas e promoções.
A solução
Ao final da priorização de ideias optamos por seguir em frente na idealização de um novo app de gerenciamento financeiro pessoal. Acreditamos que apesar de o esforço ser relativamente alto, a ferramenta permite atacar a principal dor dos entrevistados e possibilita a inclusão de funções complementares posteriormente, algo que seria mais difícil dentro do app do Inter.
Então nossa equipe finalmente colocou as ideias no papel e cada um dos integrantes propôs layouts e fluxos de usabilidade diferentes, como mostra um dos exemplos a seguir:
Após este brainstorming fizemos uma curadoria do que pensamos em comum e poderia ajudar a executar a missão principal do app, resultando na primeira versão de baixa fidelidade ilustrada abaixo:
Primeiro teste de usabilidade
Enviamos o protótipo para um grupo de 5 pessoas com a seguinte questão
Nos ajude em nossa pesquisa de usabilidade para o novo aplicativo de gestão financeira pessoal do Banco Inter e ajude Diego em duas tarefas:
descobrir quanto ele gastou no mercado Shibata
conferir os descontos em mercados no Marketplace 👇
Ao final todos conseguiram realizar as tarefas, mas alguns tiveram dificuldade em chegar na tela de extrato, o que nos levou a realizar mudanças na tela de gastos e de conteúdo na tela inicial. Outras dificuldades estão listadas abaixo:
os botões com ícone na tela inicial não tinham um texto, dificultando a compreensão.
os botões de setinha na área de gastos não pareciam clicáveis.
o botão de retornar para tela anterior não estava com um tamanho bom para clicar.
Passado este momento fizemos mais um teste de baixa fidelidade implementando as mudanças exigidas pelas dificuldades listadas acima. Notamos a redução no tempo para a execução das tarefas pelo usuário e a partir disso avançamos para o protótipo de alta fidelidade.
Styleguide
Após a primeira etapa de validação em baixa fidelidade, foi desenvolvido um guia de estilos baseado na identidade visual do banco Inter, assim consolidando a aparência do app.
Cores: utilizamos o site do Banco Inter como referência para definição da hierarquia de cores, aplicando o laranja como cor principal, o verde como secundária e um tom rebaixado de cinza como terceira cor. Também foram definidas as cores de danger e success para aplicações em formulários e botões.
Tipografia: a família tipográfica escolhida para compor o projeto foi a Poppins e Roboto, pois além de ser muito semelhante a utilizada na plataforma Inter, apresenta boa legibilidade e diversas variações, proporcionando opções para aplicações de títulos, subtítulos. Para os parágrafos escolhemos a opção Roboto. A proporção utilizada para estas variações de tamanho sem perder a harmonia foi a perfect fifth.
Botões: para facilitar o trabalho em equipe e a manutenção da hierarquia das telas, fez-se necessário também o desenvolvimento de um guia de estilos para os botões. As principais categorias seguem a lógica da paleta de cores com botão principal, secundário, versão em outline para ações de menos destaque, variação light e dark.
Formulários: assim como os botões os formulários foram transformados em componentes para o guia de estilo seguindo a mesma paleta e com variações para indicar o status de preenchimento de cada input.
Protótipo de alta fidelidade
Com o wireframe testado e o guia de estilos desenvolvido, era hora de montar a versão em alta fidelidade e submetê-la aos testes para consolidar o fluxo do usuário e pegar feedbacks com a novo visual aplicado.
Teste de usabilidade
Submetemos a nova versão do protótipo à avaliação de um grupo de 7 pessoas, afim de entender se o fluxo de navegação havia melhorado e como iriam interagir com a interface mediante as melhorias aplicadas na versão de alta fidelidade. As impressões coletadas foram as seguintes:
O CTA de gastos detalhados na tela inicial cumpriu bem seu papel, chamando a atenção dos usuários rapidamente.
Conseguiram chegar a tela de marketplace com facilidade, mas o scroll lateral no topo da tela chamou mais atenção que a informação principal referente aos mercados com desconto, por isso já implementamos melhoria mudando a ordem de apresentação das informações nessa tela.
Demoraram um pouco para decifrar como funcionava a tela de minhas metas e entender como funciona o limite de gastos por categoria. (Ainda não implementamos melhorias nessa tela)
Acharam que o fluxo de navegação estava bem claro e que os ícones e botões foram bem didáticos.
Considerações finais
Apesar de sabermos que o trabalho tem margem para implementação de diversas melhorias, como é natural em qualquer projeto e principalmente em um estudo de caso, estamos muito felizes com o que alcançamos até o presente momento.
O desafio do briefing inicial parecia muito distante do possível, porém exercitar constantemente a empatia, nos fez enxergar oportunidades que foram aprimoradas com pesquisa e metodologia adequadas.
Trabalhar com o foco no usuário e pensando em soluções aplicáveis em um mundo real, torna a sensação da entrega final ainda mais prazerosa.
Agradecemos ao Leandro Rezende e a toda a equipe do UX Unicórnio pelo auxílio e o brilhante conteúdo, igualmente obrigado a você que chegou até aqui. Não hesite em compartilhar suas impressões sobre o trabalho nos comentários!
Quem somos
Esse case foi criado pela equipe UX Rangers, formada por Isabelle Utsch, Eliane Félix e Rodrigo Augusto, como trabalho de conclusão de curso do Programa UX Unicórnio. Optamos por não restringir a área de atuação dos integrantes para que todos participassem de todas as fases do projeto, já que se trata de um grupo de pessoas com experiencia em varias áreas e que tem o desejo de migrar para o universo UX.
