Genial Investimentos: 709 respostas antes da primeira tela

Este case é um retrato de 2019 e 2020. A Genial de hoje não é a que está descrita aqui, e as telas também não.

Em 2019 a Genial Investimentos tinha um problema que aparecia bem no relatório e mal no caixa. O cadastro de novos clientes crescia mês a mês, e o dinheiro não entrava junto. As pessoas abriam conta e paravam ali.

Comecei esse projeto como designer pleno e fui promovida a sênior no meio dele.

O que estava acontecendo no mercado

A desbancarização ganhava força, o perfil de quem investia mudava, e as corretoras tradicionais tinham entrado com tudo na digitalização dos serviços. O investidor que chegava naquele momento esperava autonomia e autosserviço, coisa que uma corretora de estrutura antiga não entrega só trocando a cara do site.

Havia uma complicação a mais, e ela define boa parte do que veio depois. A casa vinha de uma marca anterior, a Geração Futuro, e a migração da base ainda estava em curso. Na prática, o aplicativo antigo e o novo conviveram no ar. Quem abria o novo tinha o antigo a um toque de distância, servindo de régua.

O desafio

Eram dois objetivos, e eles explicam por que houve diagnóstico em vez de um redesenho direto. O primeiro é converter o cadastro: fazer com que quem abria conta chegasse até o fim e colocasse dinheiro. O segundo é fazer o aplicativo virar a plataforma principal dos clientes.

O segundo não se resolve com tela mais bonita, porque o que estava em jogo era hábito. As pessoas já tinham um jeito de usar a Genial, e esse jeito passava pelo computador. Mudar isso exigia primeiro entender por que o celular tinha ficado com o papel secundário.

O escopo era a área logada, aplicativo e web, com foco em abertura de conta e no investidor de fundos, renda fixa, tesouro e previdência. O home broker não era o alvo dessa fase. Essa escolha teve consequência, e eu volto nela no fim.

As regras que o segmento impõe

O mercado financeiro brasileiro é dos mais regulados que existem, e a regulação não fica no jurídico: ela desce para a tela. ICVM 505 e 380, Resoluções CMN 4.557 e 2.554, Lei Complementar 105. Traduzido em interface, isso virava senha de seis dígitos, bloqueio na quinta tentativa, segundo fator de autenticação obrigatório, trilha de auditoria guardada por cinco anos e tráfego criptografado em 256 bits.

Um cliente escreveu na minha pesquisa que a senha de seis algarismos parecia fraca demais para uma plataforma de investimento e que ele se sentiria mais seguro podendo usar letras e símbolos. Ele estava certo, e eu não podia atender. A regra obrigava exatamente o que ele achava inseguro.

Para o cadastro, fui olhar como o mercado fazia: nove bancos digitais e sete corretoras. O tempo médio de cadastro era de 11,5 minutos nas corretoras e 13 minutos nos bancos digitais, com média de 30 a 32 telas. Três coisas ficaram claras dessa varredura. Menos campos por tela são mais aceitos. O peso percebido do fluxo importa mais que a quantidade de telas. E quanto mais faseado, melhor.

709 respostas

Escrevi e rodei a pesquisa com a base de clientes, mais uma segunda rodada interna com o time. Voltaram 709 respostas.

Quase metade da base usava as duas plataformas, 45,8%. Outros 38,8% só o site e 15,4% só o aplicativo. Em conhecimento sobre investimento, a maioria se declarava média, 45,7%, seguida de iniciante, 34,7%. Avançado era minoria, 17,9%.

Esse segundo número importava tanto quanto o primeiro. A plataforma servia gente que estava aprendendo, e desenhar para quem já sabe operar teria sido desenhar para a minoria.

O dado que reorganizou o projeto foi o de preferência, respondido por 325 clientes que usavam as duas plataformas. Perguntei onde a pessoa preferia fazer cada coisa. O site levava investir com 85%, buscar novos investimentos com 86%, baixar extrato com 81% e resgatar com 71%. O aplicativo levava checar saldo e posição com 73%, e empatava tecnicamente em checar movimentações, com 52%.

O aplicativo era vitrine e o site era caixa. As pessoas usavam o celular para olhar, e iam para o computador na hora de mexer no dinheiro.

A segunda metade dessa pergunta é que fechou o diagnóstico, e ela contrariou o que eu esperava. Perguntei qual das duas plataformas era melhor em cada atributo, e o aplicativo ganhou justamente onde eu imaginava que ele fosse fraco: 71% o achavam mais prático e 63% o achavam mais rápido. O que ele perdia era outra coisa. O site era considerado mais completo por 96%, mais fácil de entender por 91% e mais seguro por 66%.

O que faltava ao aplicativo era confiança. Ele já era o caminho mais cômodo e as pessoas escolhiam o computador mesmo assim, porque ali elas entendiam o que estavam vendo e sentiam que estavam seguras. Para o aplicativo virar plataforma principal, ele tinha que ganhar essas três, e nenhuma delas se resolve deixando a tela mais bonita.

Nas respostas abertas isso aparecia com todas as letras. Alguém escreveu que gostava muito da plataforma, não gostava tanto do aplicativo, mas achava o aplicativo mais simples para conferência e resgate. Outro resumiu o diagnóstico melhor do que eu: o aplicativo é mais fácil para quem já está familiarizado, o site é mais completo para quem busca detalhe.

Os três problemas

Fechei a pesquisa com três problemas nomeados, e trabalhei os três como hipótese, não como certeza.

O primeiro é que as pessoas não se sentiam seguras usando o aplicativo. Minha hipótese foi que essa sensação vinha da linguagem visual, não de uma falha real de segurança.

O segundo é que elas não tinham o hábito de movimentar a conta pelo aplicativo, e voltavam para a web na hora de investir.

O terceiro é que a usabilidade do aplicativo ia mal na avaliação. Mesmo quem achava o app mais prático dizia que ele era confuso e que a informação estava mal distribuída.

Desses três, saíram os dois desafios que declarei para o time: equalizar a experiência entre site e aplicativo, para que a jornada fosse a mesma nos dois, e estimular o uso do aplicativo para movimentação. O segundo é o objetivo do projeto escrito como tarefa de design.

Os princípios vieram antes das telas

Antes de desenhar, escrevi as diretrizes que iam guiar a decisão quando ela ficasse difícil: simplicidade em visual e em linguagem, consistência presa ao style guide, redução de cliques, acessibilidade, fluidez e uso predominante do branco.

O branco tinha duas razões. Uma é contraste e legibilidade. A outra é que o sistema precisava rodar white label, na marca de bancos e corretoras parceiras, e uma base clara dava muito mais controle sobre esse comportamento do que uma base de cor.

Construí as diretrizes de design, o style guide e a biblioteca antes das telas: tokens, grid, tipografia, ícones e componentes. O aplicativo e a web saíram do mesmo sistema, em vez de virarem dois produtos parecidos, e foi essa biblioteca que tornou o white label viável sem refazer o desenho para cada parceiro.

O que cada decisão de tela estava respondendo

As informações da conta nasceram suprimidas, com o valor escondido por padrão. Essa foi a resposta direta ao primeiro problema: se a insegurança vinha da leitura visual, esconder o saldo por padrão devolvia ao usuário a sensação de controle.

O menu virou carrossel para encurtar a distância de clique, e ficou personalizável, com a pessoa escolhendo o que deixar à mão.

O resumo em backdrop trouxe para a primeira camada o que a pesquisa apontou como mais relevante. Evolução patrimonial e rentabilidade da carteira entraram porque eram os pedidos que mais se repetiam nas respostas abertas.

A tela inicial inteira, de cima a baixo, tem a ordem que a pesquisa pediu. O patrimônio vem primeiro, com o ícone de ocultar do lado. Depois os destaques da semana, a faixa de atalhos que a pessoa monta como quiser, a rentabilidade da carteira em mês, ano e doze meses, e o gráfico da carteira por categoria. No gráfico, os valores aparecem mascarados com um "exibir valores" no meio: a mesma decisão de segurança, aplicada ao dado mais sensível da tela.

O estado vazio como tela de verdade

Quem nunca investiu não abre o aplicativo numa tela cheia. Abre numa tela vazia, e essa é a primeira impressão que a pessoa tem do produto. Tratei o estado vazio com o mesmo cuidado das telas com conteúdo: em vez de mostrar zeros, ele convida e diz qual é o próximo passo.

Do lado do catálogo, a resposta ao insight de que as pessoas não investiam por insegurança com o próprio conhecimento: cada fundo carrega o selo do perfil a que corresponde, a rentabilidade em quatro janelas, o valor de entrada, a movimentação mínima e as regras de resgate, além de uma descrição do que ele faz em português comum. Quem já sabe o que quer tem busca, ordenação e filtro. Quem não sabe entra pela aba de oportunidades e não precisa saber o nome de nada para começar.

O onboarding, e a decisão que a pesquisa não tomou

A abertura de conta virou uma frente própria: unificar o cadastro da corretora e o da conta digital, com o mínimo de campos.

Desenhei duas hipóteses. Numa, o cadastro ia inteiro de uma vez. Na outra, dividido em partes, com o documento e a selfie pedidos só no fim, porque a suspeita era que as pessoas se sentissem invadidas ao entregar isso logo de cara. Testei as duas com clientes em potencial, metade deles sem conta em corretora nenhuma, e a pesquisa não decidiu: deu 50% para cada, empate exato.

O desempate veio de fora do design, de um dado de marketing que já existia na casa: passadas as duas primeiras etapas, a desistência caía para 3 a 5%. Dividimos o cadastro em partes, e o documento ficou para o fim.

Essa rodada trouxe o insight mais útil do projeto inteiro, e ele não era sobre tela. As pessoas não deixavam de investir por falta de produto. Deixavam por não terem tempo de estudar e por não se sentirem seguras com o próprio conhecimento. E não enxergavam a corretora como caminho para as coisas que queriam de verdade, como comprar uma casa, trocar de carro ou abrir um negócio.

O processo, e não só o produto

No meio disso desenhei também como a Genial criaria produto dali em diante. Ficaram três trilhas, com etapas, entregáveis, duração e quem entra em cada fase: produto novo, com quatro meses e meio mais três de acompanhamento; produto que já existe, em três semanas; e demanda que chega pronta da área de negócio, em dez dias. Cada trilha nomeava onde entram UX, UI, produto, negócio, TI, compliance e jurídico, e deixei o material num toolbox interno para o time consultar sem depender de mim.

Também apresentei internamente sobre a diferença entre UX e UI, porque parte do atrito do dia a dia vinha de a casa não ter combinado o que cada papel fazia.

Eu era pleno quando comecei isso.

O lançamento, e a conta que veio junto

O aplicativo foi para as lojas em junho de 2020. Fiz também as peças de anúncio das duas lojas, com as telas dentro do aparelho e uma frase por peça, que é onde o produto se apresenta para quem ainda não é cliente.

Recolhi os comentários da App Store e da Play Store em julho e guardei numa pasta que chamei de plano de ação, porque era isso que eles eram.

A recepção rachou ao meio, e as duas metades estavam certas.

Quem usava para acompanhar investimento aprovou. Escreveram que ficou moderno, simples e direto, que a informação essencial estava em destaque, que a rentabilidade da carteira e a recomendação apareciam logo de cara, que o Face ID facilitava a vida. Uma pessoa disse que era o melhor aplicativo entre as corretoras do país.

Quem operava reprovou, e sempre pelo mesmo motivo. Um resumiu assim: no antigo, tudo que importava estava na primeira tela, e agora era preciso caçar cada informação em abas e mais abas. Outro escreveu que beleza não é tudo. Choveu gente perguntando onde tinham ido parar as notas de corretagem e como se alocava margem para day trade.

Essa crítica é a fatura de uma decisão que a gente tomou de olho aberto. O foco daquela fase era abertura de conta e o investidor de fundos, que era a maior parte da base e o público que a empresa queria conquistar. O trader ativo era minoria, e ficou para depois. Ele foi atendido na sequência, com o Trading light.

O desenho do Trading light responde à reclamação em vez de contorná-la. No fluxo, os dois passos que existiam antes do trading, investir e depois ações e futuros, aparecem apagados, e uma seta por cima do caminho leva direto de abrir o app para o produto, com a nota que eu deixei para o time: colocar nos menus principais. Quem reclamou de caçar informação em abas ganhou o caminho mais curto que existia. Cada etapa do fluxo vinha com o conteúdo da tela, a especificação e as integrações, para o time de desenvolvimento não ter que adivinhar.

Uma decisão minha cobrou preço direto, e é justo registrar. O valor suprimido por padrão, que respondia ao problema de insegurança, virou incômodo para quem abria o aplicativo várias vezes por dia e tinha que revelar o saldo toda vez. A mesma escolha que acolhia um usuário atrapalhava o outro.

Pediram tema escuro em julho. A primeira versão do dark mode é de agosto.

E teve o comentário que fecha o ciclo: uma pessoa relatou os problemas na loja, foi respondida, viu tudo resolvido e trocou a nota de uma para cinco estrelas.

O resultado

A nota do aplicativo saiu de 3,5 para 4,7, a maior entre as corretoras concorrentes nas lojas. As metas de abertura de conta foram batidas.

Revendo as telas seis anos depois

Escrevi acessibilidade como princípio do projeto em 2019, ao lado de simplicidade e consistência. Antes de publicar este case, fui medir se o princípio tinha chegado até a tela.

Parte chegou. O contraste do texto de leitura passa com folga no critério AA nas telas que testei, e o uso do branco como base, que na época justifiquei por legibilidade e por causa do white label, é o que segura esse número.

O que passou batido foi o estado inativo. A aba não selecionada da boleta tem contraste de 2 para 1, quando o mínimo é 4,5. É o erro clássico de tratar o desabilitado como cinza claro sem fazer a conta, e ele continua saindo em produto novo hoje.

Não voltei para corrigir as telas, porque este case é o registro do que existiu em 2020. Prefiro deixar anotado o que eu veria diferente agora.

O que aprendi

Que pesquisar e ouvir o usuário é sempre o melhor caminho, e é o que traz o melhor resultado. Eu já acreditava nisso quando entrei. A diferença é que aqui eu vi a coisa fechar de ponta a ponta: a pesquisa apontou que o aplicativo era usado para olhar e não para mexer, o projeto foi construído em cima disso, e a nota subiu.

E que seguir as etapas de um projeto de design dá resultado de verdade. Aqui deu para ver a corrente inteira, etapa por etapa: foi o benchmark que me deu o tempo aceitável de cadastro, foi o dado de marketing que desempatou o fluxo quando a pesquisa empatou, e foi o comentário de loja que virou o dark mode do mês seguinte. Cada etapa que eu tivesse pulado teria virado uma decisão tomada no escuro.