Como a Carteira bB revolucionou a forma de lidar com o dinheiro
Era uma vez…
Em uma noite calma e silenciosa no interior do país, a única agência bancária da cidade é assaltada. Não sobra dinheiro algum e a população além de assustada, passa semanas sofrendo com a falta de dinheiro em espécie até a situação se regularizar aos poucos. Funcionários ficam sem poder sacar seus salários, comércio, bares, restaurantes, feirantes, dentre outros trabalhadores estão sem dinheiro para movimentar e passar troco, muitos precisam ir a quilômetros de distância para as cidades vizinhas para talvez voltar com algum dinheiro em papel e moeda.Através desta realidade, após uma onda de acontecimentos semelhantes ao redor do Brasil entre 2018 e 2019, que o Banco do Brasil encontrou uma oportunidade de ajudar estas comunidades e a vida destas pessoas a se tornar mais independente de agências físicas ou dinheiro em papel e moeda.
Nascia então a carteira digital do Banco do Brasil, a Carteira bB, projeto em que atuo como líder de design e vou contar um pouco de como tudo começou, vamos lá ;)
Mais uma Carteira Digital, e daí?
"Beleza Michael, mas qual a novidade? Existem tantas carteiras digitais hoje em dia…”
É verdade, muito antes do início de 2019 já existiam muitas carteiras digitais e acredite: existirão mais daqui pra frente. Cada uma com seus diferenciais, segmentação, público-alvo, oferecendo benefícios, devolvendo parte do dinheiro movimentado, sendo um produto independente ou complemento de uma marca /produto dentre outras coisas que vão revolucionar a forma como lidamos com o dinheiro e provavelmente com o próprio conceito de carteira digital.
Por isso, desde sempre a Carteira bB entendeu que deveria ser diferente, entregar valor e relevância para a vida das pessoas, começamos então a aplicar os conceitos de UX no projeto.
É importante ressaltar que no início do projeto a possibilidade de ser uma carteira digital ainda não era cogitada, estávamos abertos a entender todo o contexto, problemas, jornadas do usuário e até mesmo quem eram estes usuários, para depois pensar quais seriam as possíveis soluções.
1 — Descoberta
Tudo começou com o IBM Design Thinking, modelo proposto pela IBM para colaborar, alinhar equipes e formular a intenção de solucionar os problemas dos usuários, melhorando as experiências dos clientes na velocidade e escala exigidas pela empresa. O que move esta forma de trabalho são os usuários, time multidisciplinar e reinvenção constante.
Achou interessante? Saiba mais no vídeo abaixo:
1.1. Trabalhando com dados e pesquisa desde o início do projeto
Através de pesquisa e entrevistas além de toda a Inteligência e Informação trazidos pelas Agências parceiras, descobrimos uma nova realidade
1.2. Quem são, onde moram, onde vivem estes usuários?
Ao entender a complexidade e situação deste problema, Daniel P. Felippetti, Mari Meirelles, e eu estudamos e criamos as Personas — técnica que representa um grupo de pessoas com base em interesses, contexto e/ou comportamento em comum de determinada situação — o que nos ajudou a ter um direcionamento do caminho a trilhar dali pra frente. Ou seja, quem são as pessoas inseridas nesta realidade.
Algo nos chamou a atenção, descobrimos que a maioria das carteiras digitais não se preocupavam com as pessoas menos assistidas, que precisavam de soluções simples que mudariam suas vidas pra melhor. A partir desta descoberta a estratégia da Carteira bB mudou completamente:
1.3. Matriz CSD
Tendo o conhecimento sobre quem são estas pessoas (personas) e suas fases de interação (jornada do usuário) buscamos nos aprofundar nesta realidade e visto que não tínhamos ainda todas as informações necessárias para iniciar o projeto, partimos então para a Matriz de Certezas, Suposições e Dúvidas.
Certezas = o que já sei sobre estas pessoas e a proposta do BB?
Suposições = quais são as hipóteses e o que suponho saber?
Dúvidas = o que preciso perguntar para estas Pessoas e/ou para o time de Negócio?
Depois destas descobertas, foi possível definir exatamente onde focar o esforço no projeto.
2 — Mão na massa (mas nem tanto)…
Em paralelo à criação da UX do aplicativo, atuei junto ao time de Branding da FutureBrand na criação da Identidade Visual, Tom e Voz, Tipografia, Naming e posicionamento da marca, porém, os primeiros testes com usuários aconteceram com este visual abaixo que mais parecia um wireframe. O que foi ótimo pois, nos permitiu receber feedbacks a respeito das funcionalidades e usabilidade, sem elementos visuais que influenciassem nas escolhas dos usuários.
Neste período, descobrimos exatamente o que a Carteira bB sigificaria para as pessoas:
Mais que uma carteira digital, mas uma versão digital de tudo o que levamos na carteira física, bolsa ou mochila: documentos oficiais, fotos, gestão financeira, recebimento de benefícios e dinheiro…
3 — Nasce a Marca
Com o sucesso da primeira versão Daniel P. Felippetti e eu, pudemos focar na criação da Identidade Visual e Marca. Trabalhamos em parceria com Agências e profissionais incríveis. Nosso principal objetivo foi o de criar uma Marca que conversasse com nosso público, trasmitisse alegria, segurança e fosse fácil de usar.
3.1. Cores e grafismos
Representam, de forma simples e prática, a variedade de funções em um só produto. Eles se manifestam em camadas coloridas, que se propagam e se expandem, refletindo, indiretamente, a personalidade mágica da Carteira bB.
3.2. Ícones
Com a combinação entre traço e preenchimento e dois níveis de detalhamentos que variam de acordo com o seu uso: funcionais e ilustrativos. A Designer e Ilustradora veronica 🤙 deu o toque final de refinamento, espessura, formato, padronização e — principalmente — criatividade.
3.3. Tipografia
A família tipográfica: bB Display, foi desenvolvida pelo estúdio Fabio Haag. Compacta, com 4 pesos, para títulos e frases curtas. Para textos corridos e mobile, escolhemos a Hind. Com diversos pesos que variam de acordo com o espaço, tamanho e conteúdo.
3.4. Ilustrações
A ilustração da Carteira bB representa o brasileiro real, evitando clichês e ressignificando linguagens autênticas. A inspiração na xilogravura, técnica de gravura em madeira, permite que as ilustrações carreguem texturas e irregularidades, construindo uma marca com um tom de informalidade e diferenciação.
O maior desafio para a escolha deste estilo foi o de equilibrar a técnica da xilogravura para o mobile, transmitindo a sensação de "tátil" para o digital sem paracer exagerado.
3.5. Tom e Voz. Como a Carteira bB fala?
Os textos foram pensados para serem um verdadeiro diálogo com o usuário. As palavras com as principais instruções estão em negrito ou destacadas como marca-textos para facilitar a leitura dinâmica. Nossa UX Writer e especialista no assunto Auana Pontes de Andrade desde o início entendeu o posicionamento da marca e transmitiu isso muito bem na comunicação do produto.
Gostou do assunto? Em breve tem novo post sobre o curso: UX Writing para Chatbots que criei em parceria com a Ana Carolina Bornhausen e Luiza Aly.
4 — E como vocês conseguiram deixar o aplicativo da Carteira bB tão lindo?
Ahhh, eu sabia que você iria querer falar de User Interface (UI), conheça o racional de algumas telas do app que evoluiu muito desde a primeira versão, com diversas features e possibilidades. Nesta etapa o time da Carteira bB já estava completo com um monte de feras, como o Danilo Oliveira, Flávio Homem, Marcos Carolino e Vinicius Dias.
Olhos brilhando…
Após uma série de testes de composição, harmonização e análise heurística, chegamos em um resultado que combinou equilíbrio de informação (e exibição) em diversos devices, contraste de cores, legibilidade de texto e acessibilidade. Queríamos deixar a Carteira bB com um aspecto jovial e divertido, com uma linguagem acessível e de fácil uso.
4.2. Header
Foto do perfil: o usuário pode incluir sua foto, será a mesma que irá aparecer no QR Code.
Estabelecimentos: onde todos os que aceitam a Carteira bB serão exibidos. Sempre que um novo estabelecimento for cadastrado ou uma nova promoção e desconto acontecer, o usuário será notificado.
Logo da Carteira bB: Por se tratar de uma Marca nova, achamos importante exibi-la em algumas jornadas de uso do app.
Boas-vindas: o "Bom dia, Renata", dá um toque de personalidade e humanidade ao produto durante seu uso.
Notificações: Tudo o que for importante para o usuário em um só lugar. Demos a opção do mesmo configurar por assuntos ou temas os assuntos que achar relevante.
Menu Ajuda: nele é possível tirar dúvidas e conversar através do chatbot ou, realizar um atendimento humano.
4.3. Tab bar
Inserimos nesta área fixa as principais funcionalidades do produto, por sua fácil e permanente localização, assim como o menu completo.
4.4. Foto no aplicativo
É fato que quando temos um cartão de débito ou crédito em que possamos personalizar com nossa foto, foto da família, bichinhos de estimação, time do coração ou aquela viagem, aumentamos em até 8x mais o uso deste em comparação aos outros. Levamos este mesmo conceito de personalização para a Carteira bB. Uma das descobertas feitas por acaso foi a opção de incluir imagens no formato .GIF, o que faz o pequeno “vídeo” ficar passando na tela inicial do aplicativo 😊
4.5. Saldo e Atalhos
Testamos algumas soluções que proporcionasse uma visão geral das principais funções do aplicativo sem a necessidade de rolar a tela. Nossa preocupação era a de não deixar o conteúdo "espremido" só pra ganhar espaço, que tivesse respiro, agrupamento e hierarquia da informação.
5 — Visão Pessoa Jurídica (PJ)
E quanto às empresas e/ou profissionais autônomos e liberais, achou que tínhamos nos esquecido deles? Criamos também uma visão PJ, utilizando os mesmos elementos visuais (ícones, cores, tipografia, tom de voz, etc) porém em disposições diferentes, criando a sensação para o usuário de que ele(a) está em um ambiente diferente, mas com o mesmo produto. No início relutei um pouco com a ideia pois, por se tratar de uma Marca nova, gostaria que ela primeiro se firmasse no imaginário e conhecimento do consumidor para depois criarmos uma identidade visual afiliada, mas o time mostrou os benefícios e baixo risco para a Marca assumir esta postura, o que se mostrou uma ótima decisão no futuro.
6 — E pra finalizar
Validamos nossas hipóteses, realizamos testes com o usuário, pesquisas e estamos frequentemente melhorando o produto e atentos ao que acontece de mais novo no mercado e tecnologia. Mesmo depois de lançado, pude conduzir e participar de Design Sprints, Blue Prints e Braisntormings frequentemente com a Cintia Cítton, Renato Gurgel, Rick Freitas, o time de designers de serviços da Inloco e Visa.
Em outro post falerei sobre a Metodologia de Trabalho em nosso time de Design, a construção do Design System da Carteira bB, os bastidores do Teste Piloto do produto em um ecossistema real na cidade de Areia, na Paraíba e como foi apresentar este projeto na UX Conf BB 2021.
Confira abaixo alguns números da Carteira bB até o momento:
Este foi um resumo de uma história de mais de dois anos intensos, espero que tenha gostado e em breve mais prosas irão surgir :D
Até breve