ESTUDO DE CASO UX

True Bank — das dívidas ao futuro

Como UX Design nos ajudou a guiar as pessoas para melhores hábitos financeiros.

João Traini
14 min readNov 24, 2020

O desafio ⛰️

Durante os meses de junho à setembro, o time composto por Claudia Antonio, João Traini e Livia Fernandes escolheu o seguinte desafio proposto por um acionista de um banco fictício:

Como poderíamos ajudar as pessoas a organizarem os seus gastos de forma prática e disciplinada para que possam realizar as coisas que desejam e viverem menos ansiosas?

O cenário atual 📆

O ano de 2020 está sendo marcado pela pandemia do Coronavírus, que não apenas fragilizou nosso sistema de saúde, mas também a economia de todos.

Com base em um estudo realizado pelo Serviço de Proteção ao crédito (SPC Brasil) e pela Confederação Nacional de Dirigentes Lojistas (CNDL) em 2018, foi revelado que quase metade dos brasileiros admitem não fazer um controle efetivo do próprio orçamento.

Em nossas pesquisas, descobrimos que:

  • 72% dos brasileiros não tem dinheiro guardado para enfrentar a crise;
  • 86% terão dificuldades em comprar itens básicos se ficarem em casa sem renda;
  • 58% dos brasileiros estão inadimplentes;
  • 36% estão com restrições financeiras.

Os impactos causados pelo vírus também refletiram no comportamento humano.

Como grande aliada a tudo que estamos vivendo, temos a tecnologia. Desde o início da quarentena, a realização de transações bancárias efetuadas através da internet aumentou exponencialmente.

O gráfico de barras mostra o aumento do acesso de alguns serviços pela internet durante o período da pandemia.

Com a evolução da tecnologia, as pessoas estão cada vez mais habituadas a utilizarem um aplicativo bancário e a pandemia que estamos vivendo, potenciou ainda mais esta prática.

Citando o The Brief:

“A transformação digital é um processo pelo qual praticamente todas as empresas estão passando nos últimos anos. Ela envolve uma série de ações que promovem a digitalização dos serviços e atividades e que vai resultar em: desmaterialização, desmonetização e democratização do uso da tecnologia. Essa mudança também aproxima empresas e clientes, principalmente pelos canais de comunicação criados para isso.”

Estas informações evidenciam uma grande oportunidade no setor bancário para fazer algo que possa melhorar a saúde financeira das pessoas, sem deixar de lucrar por isso.

Mas, como os bancos costumam lucrar? 🤔

Essa é uma questão importante que gostaríamos de esclarecer antes de seguirmos com o objetivo do nosso projeto.

Os bancos costumam lucrar, em primeiro lugar, com spreads bancários, que são a quantia que eles ganham com a diferença entre os juros que a instituição cobra ao emprestar dinheiro (no cheque especial, em crediários etc.) e os rendimentos pagos a quem investe (poupança, CDB etc.). O Brasil, é o país com o segundo maior spread bancário do mundo, ou seja, aqui se paga muito caro nos juros. Depois, vem as tarifas de cadastro no banco, manutenção de contas, DOC, TED, compra de moeda estrangeira, etc.

Ou seja, a maior parte do lucro de um banco vem dos juros e taxas.

Gráfico ilustrativo que mostra os custos que constituem o spread bancário. Fonte: FFX Office

“Mas há outras formas de um banco lucrar?”

Sim! O banco pode ganhar, também, com a Interchange++, que é uma taxa que existe em toda compra, onde a instituição receberá uma parte. Com isso, quanto mais compras feitas, mais lucro o banco terá.

Outras formas de monetização bancária.

Há também a possibilidade do banco oferecer um programa de retorno financeiro, baseado em vários fatores acerca da vida financeira do usuário. Esses serviços costumam ter uma taxa, e com isso, o usuário pode receber cupons de desconto específicos para quem assina o programa, pontos para usar em resgate de serviços, etc. O Nubank Rewards — considerado “um programa de pontos justo e fácil de usar” pelo banco — trata cada real gasto na fatura como um ponto não expirável, que pode ser usado para apagar contas, conseguir milhas e descontos com parceiros exclusivos.

Diante deste cenário, ficamos felizes ao saber que há saídas para a dependência do spread — o Nubank aumentou sua renda bruta em 70% de 2018 para 2019, assim como sua base de usuários.

Objetivo do Produto 🔎

“Criar uma solução bancária que contribua com a saúde financeira e psicológica de seus clientes, oferecendo um atendimento mais humanizado.”

Levando em consideração o desafio proposto e o cenário atual, utilizamos o Lightning Decision Jam — um facilitador de ideações baseado no Design Sprint, criado pela AJ&Smart, que nos ajudou a definir o objetivo do nosso projeto.

Quadro completo do método Lightning Decision Jam para apoio a geração de ideias da equipe.

Pesquisa 🔬

Para construir o projeto de uma forma efetiva, após termos feito nosso desk research, criamos uma protopersona e uma jornada para ela. Isso contribuiu para a criação de nossa pesquisa quantitativa.

Utilizamos a matriz CSD para elencar nossas certezas, suposições e dúvidas e através da matriz Impacto X Conhecimento, selecionamos quais seriam validadas em nossa pesquisa.

Mas antes, o que é uma hipótese?

A Wikipedia define como:

Uma hipótese, suposição ou especulação é uma formulação provisória, com intenções de ser posteriormente demonstrada ou verificada, constituindo uma suposição admissível.

Agora, em posse da definição do que é uma hipótese em si, seguimos para confirmá-las ou invalidá-las:

A imagem mostra a relação das hipóteses, certeza, suposições, dúvidas e perguntas que contribuíram para o desenvolvimento da pesquisa quantitativa.

Tivemos um alcance de 122 respostas, sendo a maior parte delas pertencentes a classe B. As demais classes também importantes e essenciais para este projeto não foram atingidas. Porém, achamos os insights incisivos e decidimos mantê-los. Com isso em mente, constatamos que nos equivocamos com as seguintes questões:

  • As pessoas não se planejam financeiramente (68,5% se planejam);
  • As pessoas não sabem especificar os seus gatos (70,9% sabem);

Por outro lado, validamos que as pessoas não utilizam uma ferramenta para registar os seus gastos (68,4%) e que por falta de disciplina, quase metade delas (48,7%) possuem dificuldade em organizá-los.

Outra questão também esclarecida foi:

  • As pessoas não se sentem seguras ao vincular seus dados bancários a um aplicativo que auxilie na gestão de suas finanças (77,5%);
Gráfico com a relação das respostas, em porcentagem, dos hábitos do público-alvo pesquisado.

Caso queira entender melhor os resultados da nossa pesquisa, separamos um arquivo abaixo para você dar uma olhada:

Com este resultado, avaliamos que:

O público alvo desta pesquisa, possui a consciência dos hábitos, mas não são disciplinados a praticá-los com o auxílio de uma ferramenta e não fariam uso de um aplicativo terceirizado só para isso. Para nos aprofundarmos nesses pontos observados, a fim de sanar algumas dúvidas e entender o porque isso acontece, selecionamos 5 pessoas e aplicamos uma pesquisa qualitativa. Aqui focamos majoritariamente nas perguntas:

Seleção de perguntas feitas para o teste com usuário qualitativo.

Desta maneira, tivemos os seguintes aprendizados:

  • A ausência da educação financeira é um fator que também traz impactos negativos na maneira que lidam com o próprio dinheiro. As pessoas que cresceram sem este aprendizado possuem mais dificuldades para se planejarem financeiramente.
  • Existe uma resistência ao acreditarem que os bancos pensam de fato em ajudar seus clientes devido as altas taxas de juros e cobranças que são feita pelas instituições. O que as impedem de utilizar um aplicativo voltado somente para a gestão financeira é o medo de terem os seus dados clonados.
  • As pessoas não possuem o hábito de se planejar financeiramente por acharem trabalhoso organizar seus gastos em uma planilha ou ferramenta para isso, a indisciplina é ocasionada pela “preguiça” e falta de paciência que estes usuários assumiram sentir ao se depararem com esta tarefa, o que leva a acharem que registrar os gastos mentalmente é o suficiente para se organizarem.

Usuários 🙋‍♀️

Persona 👱🏻‍♀️

Após realizarmos as pesquisas e entendermos a profundidade do cenário e contexto, chegamos na seguinte persona:

Quadro com o perfil da persona extraído do teste qualitativo. É importante ressaltar que pode haver mais de 1 tipo de persona, entretanto, para este trabalho selecionamos apenas 1 perfil.

Jornada do Usuário 🗺

Com a persona definida e compreendida, fizemos o mapa da Jornada do Usuário. Ele é essencial para termos uma projeção e visualizar o que os usuários podem experienciar, pensar e sentir em cada etapa do processo. Desta forma, foi possível identificar oportunidades, tanto para o negócio quanto para uma melhor experiência do usuário.

Jornada do usuário que mostra o que faz, pensa, sente e quais as oportunidades de negócio podemos ter a partir de suas dores.

Storytelling ✍🏻

Pensando na divulgação de nosso projeto para futuros usuários e stakeholders, criamos a história da persona, que exemplifica em detalhes uma situação real e os benefícios a partir da solução proposta pela equipe de UX.

Era uma vez a Paty, assistente de marketing, solteira e sem filhos. Ela mora com os pais, adora navegar pela internet atrás de novidades e costuma sair com as amigas para extravasar.

Todos os dias sai cedo para o trabalho e dedica grande parte do seu tempo nas redes sociais produzindo materiais para os clientes e descobrindo as tendências de consumo.

Um certo dia, ao observar suas amigas pelas redes sociais, Paty às viu fazendo viagens, comprando casas e seguindo com suas vidas. Ao notar isso, sentiu-se ansiosa por perceber que não consegue economizar para realizar seu sonho de fazer um mochilão pela Europa.

Paty decidiu que precisava começar a criar metas e ter um melhor controle financeiro para realizar a viagem de seus sonhos e conhecer novas culturas e lugares.

Por causa disso, ela começou a dar mais atenção a seus gastos do dia-a-dia, mas teve muito trabalho e dúvidas em como fazer isso, já que ela não tem disciplina para anotações diárias e acha tudo complicado e pouco prático.

Por causa disso, Paty pediu indicações para suas amigas, que a recomendaram o True Bank, onde possuem conta e que as ajudou a melhorar seus hábitos financeiros. Assim que ela criou sua nova conta, viu o diferencial, fez sua portabilidade de salário e viabilizou sua tão sonhada meta do mochilão. com valores por mês, data da viagem junto das suas férias e sugestões de como economizar de acordo com seu perfil.

Até que finalmente Paty conseguiu se planejar financeiramente e gerir seus gastos com consciência. Com base em suas metas, tudo fez sentido para ela, sua ansiedade diminuiu e ela se sentiu mais segura para realizar seus próximos sonhos e planos.

Alternativas de soluções

Com a persona previamente definida, repetimos o processo do Lightning Decision Jam, com o intuito de descobrir possíveis soluções para curar as dores que foram encontradas durante a pesquisa. Desta vez, conseguimos identificar pontos que antes eram invisíveis para nós.

Para priorizar o que seria feito, utilizamos a matriz Impacto X Esforço:

Matriz de Impacto x Esforço com os principais itens que serão desenvolvidos como features do app.

A solução 💡

Diante das opções apresentadas, focamos em desenvolver uma solução que pudesse atender às principais necessidades dos usuários. Pensando que as dores que queríamos sanar abrangeriam todo contexto financeiro e que podemos melhorar o que já existe no mercado, optamos por desenvolver um aplicativo de banco digital que ofereça além dos serviços essenciais, funcionalidades diferenciadas que possibilite o cliente a:

  • organizar suas contas;
  • controlar seus gastos;
  • planejar seu orçamento e metas desejáveis;
  • receber dicas para economizar de acordo com seus hábitos;
  • encontrar um suporte psicológico e financeiro que poderá ser oferecido através do atendimento, onde o analista ao identificar esta necessidade, reportará o cliente a uma área com profissionais capacitados para prestar um pós atendimento (customer experience).

Rabiscoframe ✏️

Com a solução definida, partimos para a ideação. Tomamos nota do que vimos até aqui, utilizamos a técnica Crazy 8s para esboçarmos as ideias do que poderíamos projetar.

Os Rabiscoframe na imagem foram os primeiros esboços que a equipe fez para estruturação inicial.

Proposta de valor 💎

Nossa proposta de valor tem como premissa:

  • clientes que necessitam de suporte financeiro e psicológico para ajudar no planejamento financeiro
  • que necessitam de ferramentas adequadas e práticas para o dia-a-dia.

Oferecemos opções descomplicadas e ágeis, para que os clientes consigam obter maior controle de seus gastos e com isso, planejarem suas contas fixas e metas pessoais.

Isso gerará maior tranquilidade, confiança e realização pessoal, colaborando para um melhor estado emocional.

Primeiro teste de usabilidade 📱

Após decidirmos o que seria construído optamos trabalhar pelo Figma para construir o wireframe. Desta forma, foi possível a integração de todos os membros da equipe durante a construção, trabalhando simultaneamente na prototipação da estrutura das telas. Abaixo você pode navegar no que construímos para essa etapa:

Protótipo interativo com do protótipo de baixa fidelidade.

Para aplicação do teste de usabilidade remoto utilizamos o Maze Design. Através dele, conseguimos visualizar mapas de calor e o tempo de resposta dos usuários para cada tarefa criada. Com o consentimento de cada um, as sessões foram gravadas para posteriormente nos ajudar a analisar melhor os pontos. Além disso, fizemos perguntas exploratórias para coletarmos informações mais detalhadas sobre a experiência que tiveram ao navegar no protótipo e assim, aprofundarmos nosso conhecimento.

Realizamos o teste com 5 pessoas, priorizando 6 tarefas:

  • Acessar a sua conta e a nova função que foi disponibilizada pelo banco para que você se organize melhor financeiramente;
  • Criar uma meta financeira;
  • Visualizar os seus gastos;
  • Organizar os pagamentos de suas contas;
  • Aprenda como melhorar seus hábitos financeiros
  • Precisando conversar? Peça ajuda!

No link abaixo você pode conferir o relatório completo:

Após a realização do teste identificamos as seguintes melhorias:

  • Desmembrar a feature, alocando as funções disponíveis que sejam relacionadas com serviços já existentes;
  • Simplificar as tarefas, diminuindo a quantidade de interações e telas, deixando sempre uma opção para retornar ao menu principal;
  • Deixar em evidência o saldo da conta corrente, por ser algo que é mais procurado quando o cliente acessa a conta;
  • Deixar os textos mais enxutos, devido as pessoas não lerem;
  • Alterar o nome da função “Planner” para uma palavra que deixe mais em evidência o objetivo de programar os pagamentos das contas a vencer;
  • Colocar uma opção de concluir ao programar o pagamento de uma conta;
  • O acesso às dicas pode ser feito através de uma outra função, como por exemplo FAQ ou Gastos. Sendo assim desnecessária a sua exclusividade.

Também tomamos nota de outras observações feitas pelos usuários:

  • Disponibilizar uma função que exporte em formato PDF ou Excel os valores movimentados em conta corrente e cartão de crédito;
  • Um contato pós atendimento é algo que diferencia a empresa;
  • Todos os gastos em um único lugar, traz uma visão holística e contribui para um melhor planejamento financeiro.

Após a compilação dos resultados, iniciamos a construção do protótipo de alta fidelidade.

Wireframe ◻️

Após identificarmos novas oportunidades e como seria a melhor estrutura para construirmos a arquitetura do protótipo de alta fidelidade, criamos o nosso wireframe.
Essa é uma etapa essencial, pois ajuda a organizar o fluxo das tarefas e a arquitetura do produto. Com isso, podemos entender quais telas ou elementos precisam ser desenvolvidos e/ou quais precisam de correções.
Desta maneira, conseguimos alinhar as expectativas com stakeholders. , o que otimiza o nosso tempo e também nos deixa mais suscetíveis a novas ideias e sugestões, evitando que a gente “se apaixone pela ideia” e tenha um projeto limitado ao nosso próprio ego, o grande traiçoeiro para muitos projetos.

Wireframe da seção “Metas”.

Guia de estilos 👗

Benchmark 🕵🏻‍♂️

Para identificar as nossas oportunidades de melhorias diante do que já existe no mercado, fizemos um benchmarking com nossos principais concorrentes.

Tipografia 🔤

A partir das nossas referências, escolhemos a fonte Montserrat. Optamos por manter apenas um estilo tipográfico, visto que a família tipográfica Montserrat possui um desenho geométrico com boa legibilidade e leiturabilidade em telas e uma variação de 9 pesos diferentes com formato reto e itálico.

Familia Montserrat com os tamanhos usado para o guia de estilo dos títulos e corpo de texto.

Cores 🔵

O azul é a cor principal da nossa paleta. Ela representa harmonia, responsabilidade, segurança e tranquilidade — pontos esses que estão alinhados com o nosso propósito: melhorar a saúde financeira das pessoas.

Prancha com todas as cores do guia de estilo.

Como referência utilizamos a tabela Colours in Culture. Tomamos como base, a letra A (Western/American) e diversas emoções, como liberdade (número 30), felicidade (38), dinheiro (58), sucesso (77), etc. Tudo condiz com o que queremos: que nossos clientes tenham liberdade financeira para fazerem o que necessitam e desejam, livres de juros e taxas abusivas.

Botões 🖲

Definimos os botões a partir da nossa paleta de cores e tipografia. Optamos por utilizar para os botões principais o preenchimento com a cor primária da interface e para os botões secundário a opção outline. Já os botões terciários estão no estilo “ghost button”, proporcionando suavidade e clareza aos usuários.

Guia de estilo que mostra a hierarquia de cada botão e componentes básicos da interface.

Ícones

Para tornar nossa interface consistente e de fácil assimilação para novos usuários, seguimos os padrões estéticos utilizados em projetos de interfaces e utilizamos ícones que já estão no repertório dos usuários para que os mesmos tenham uma boa assimilação e navegabilidade na identificação dos elementos.

Relação de ícones criados para interface.

Formulários 📝

Seguimos os mesmo padrão dos botões para os formulários mantendo a nossa interface consistente.

Opções dos formulários.

Protótipo de alta fidelidade 🤖

Após criarmos nosso wireframe e style guide, chegamos ao resultado abaixo:

Roadmap do Produto 🛣

Sabemos que este é apenas o começo e para aprimorarmos este produto e melhorar a experiência do usuário e recursos, acreditamos que as próximas etapas do nosso Roadmap devem incluir:

  • Feature de categorização: Para taggear melhor as compras, utilizaríamos o Wisefin — uma API para transformar dados bancários em algo mais visual;
Wisefin
  • Teste com usuários : Refazer os teste de usabilidade a fim de identificar novas oportunidades de melhoria, após as novas atualizações;
  • UX Writing : Refinar a escrita ao longo do projeto com novos estudos de tendência e boas práticas do ux writing.

Próximos passos 🦶🏻

Assim como o produto, identificamos que um profissional de UX precisa de constante aprendizado para se tornar um profissional que faça diferença no mercado e ajude com projetos inteligentes que promovam a diferença na experiência do usuário e negócio. Por isso, os próximos passos para melhorar ainda mais nosso conhecimento em relação ao produto, projeto e profissional, são:

  • Nos aprofundar nas metodologias existentes para aplicação de pesquisas e mapeamentos de experiências do usuário;
  • Ampliar nosso conhecimento nas áreas de strategy, research e writing;
  • Realizar os ajustes necessários para que esta solução se viabilize no mercado financeiro;

Desta forma, iremos dar continuidade ao nosso desenvolvimento, tendo a oportunidade de nos tornarmos mais produtivos e colaborativos em projetos futuros.

Aprendizados 👶🏻

Durante a jornada do desenvolvimento desse projeto, aprendemos que fazer a pesquisa com usuário é fundamental na construção de qualquer solução, assim conseguimos identificar o problema e validar as hipóteses que criamos, construindo algo que seja melhor para o usuário e não para satisfazer o nosso ego. Este princípio também contribui para um melhor trabalho colaborativo entre pares, parceiros e stakeholders.

Outro aprendizado que queremos destacar foi a aplicação da pesquisa quantitativa, na qual percebemos que é necessário utilizar diferentes técnicas para alcançar o nosso público alvo, neste caso, pessoas das classes sociais C e D.

Entendemos também a importância de seguirmos um processo estruturado baseado em metodologias, que além de possibilitar melhor interação do time, proporciona consistência e organização na construção do projeto.

Temos a consciência que sempre haverá oportunidades para melhorar nosso projeto, uma vez que, não existe ponto final para um produto. Desta mesma forma, nosso aprendizado também é ilimitado e nos possibilita estar em constante desenvolvimento pessoal e profissional.

A participação neste projeto nos deu a chance de adquirir novos conhecimentos importantes para o nosso desenvolvimento profissional. Durante a sua construção, já conseguimos aplicá-los em nossa rotina e ao chegar aqui, estamos orgulhosos do que fizemos durantes estes três meses, mesmo em meio aos desafios e dificuldades que estamos enfrentando neste momento.

Agradecemos ao nosso mentor Leandro Rezende, criador do UX Unicórnio que através do seu programa, nos deu acesso a conteúdos e aprendizados de alta qualidade, ao Rafael Frota que faz parte da sua equipe e sempre esteve muito disponível e aos colegas da turma do Programa UX Unicórnio. Todos nos deram incentivo, suporte, orientação e foram essenciais para a existência deste projeto.

--

--