Como foi redesenhar um dos maiores aplicativos de finanças do Brasil.
O Mobils para iOS figura na lista dos 100 aplicativos mais baixados na plataforma, e geralmente fica em primeiro lugar na lista dos aplicativos de finanças que mais lucram na AppStore Brasil.
Esse post conta a história de como eu acabei ajudando no redesign de um dos maiores aplicativos de finanças do Brasil, o Mobills. Pra quem tem preguiça de ler, eu posso resumir a história: Foi legal! Trabalho duro, muita gente envolvida, vários aprendizados, durou uns 4 meses. Agora se você quer ver as coisas pelas quais passamos e algumas coisas que aprendi nesse processo, e quiser aprender também, vem comigo!
Como tudo começou?
Em meados de Março de 2017 eu havia acabado minha participação no projeto do aplicativo novo da Easynvest. Foi quando um amigo meu me convidou para uma conversa com a galera do Mobills. Eu já havia ouvido falar do aplicativo, e fiquei curioso para saber quais eram os planos deles. Topei ir até lá.
No papo que tive com o CEO e o CTO da empresa, eles me falaram sobre os planos ambiciosos deles para os próximos meses e até anos. Entre as muitas metas estava a criação de um novo layout para a versão iOS do aplicativo. O motivo? A versão Android era aclamada, enquanto a iOS muitas vezes era tida pelos usuários como esquecida — mesmo recebendo constantes atualizações. Além disso, seria ali iniciado o processo de migração da linguagem até então utilizada no projeto, Objective-C, para Swift.
Para deixar a história mais curta: Achei foda a ideia, e quis participar daquilo. Um bocado de gente iria ser impactada com aquela mudança — na casa dos milhões. E seria uma ótima chance para aprender com uma startup. Duas semanas depois eu já estava pondo a mão na massa. E é agora que começa a parte que nos interessa!
Planejando o que vamos fazer
Só pra lembrar: O Mobills é um projeto que existe já a uns anos, recebendo constantes atualizações. Em outras palavras. (1)Peguei um projeto enorme, com várias regras de negócio e (2)uma base grande de usuários. A primeira parte significa que seria necessário tempo para eu aprender melhor sobre o projeto. A segunda significa responsabilidade. Responsabilidade com os usuários, que confiam na empresa para ajudar eles a controlarem suas finanças e responsabilidade com o time de suporte, que poderia ficar atolado se algum problema grande surgisse.
Só pra deixar registrado, a primeira parte não rolou. Como qualquer startup, a Mobills trabalha com resultados rápidos. Então eu tive que ir aprendendo como monta enquanto o cavalo estava correndo. Sorte a minha que o time sempre foi muito prestativo. Coisa da cultura da empresa. Mas esse é assunto pra outro post.
E aí, afinal, qual era o plano?
O aplicativo já tinha uma usabilidade (UX) legal, e muitos usuários que eram fãs de carteirinha da forma como o aplicativo funcionava. Mexer muito na usabilidade seria mexer com time que está ganhando. Então partimos para a parte que precisava de fato ser melhorada: o visual!
Com posicionamentos desfavoráveis, alguns tons de cores que não gostavam de harmonizar com o resto do aplicativo e formatos às vezes rústicos, o Mobills podia não passar exatamente a ideia de um aplicativo de alta qualidade. Então precisávamos trabalhar essa parte. Ou seja, encontramos nossa meta final.
Meta final: melhorar a imagem que o Mobills iOS passava para o usuário
Partindo dessa meta final, a gente conseguiu ver mais ou menos o que precisava ser feito para atingirmos ela. Bom, resolvemos isolar as funcionalidades mais utilizadas do app e fazer uma entrega de valor ao usuário em um curto prazo, cerca de três a quatro meses depois. Acho que essa ideia de assemelha muito a um MVP clássico, só que dentro de um aplicativo já consolidado, como modelo testado e posto no mercado. E essa estratégia foi adotada por dois motivos. (1) Queríamos entregar algo logo para o usuário, e demorar muito seria inviável em muitos sentidos. Tendo em vista o tamanho do aplicativo, iríamos demorar mais de um ano para redesenhar e reprogramar ele todo. (2) Postergar uma entrega seria financeiramente inviável para uma startup. Caso decidíssemos entregar tudo apenas no final, teríamos que manter duas equipes. Uma para a versão nova, e outra para a versão da loja — que não podia ficar sem updates.
Eu tenho certeza que você já ouviu falar daquela tal regra de Pareto, não é mesmo? Deixa eu refrescar a sua memória:
O princípio de Pareto afirma que, para muitos eventos, aproximadamente 80% dos efeitos vêm de 20% das causas.
Aplicando isso a nossa realidade: muito provavelmente 80% do fluxo dos usuário no aplicativo deveriam vir de 20% das telas. Então, quais seriam essas telas? Como poderíamos identificar? Bom você pode usar alguns métodos para fazer isso. O mais comum será instalar um analisador dentro do seu sistema. No nosso caso tínhamos já instalado a algum tempo algumas ferramentas do Google Firebase. É muito simples de instalar e configurar. Vou deixar um tutorial aqui para quem tiver interesse.
Apesar do apoio tecnológico, essa charada poderia ser facilmente resolvida, no nosso caso, afinal um usuário comum desse aplicativo quer registrar contas e receitas, e ver qual o estado atual das suas finanças. Ou seja, ele passaria pela tela de registro, tela de listagem e a tela inicial. Essa última é a primeira aberta pelo aplicativo e que dá acesso a todas as outras.
Agora já tínhamos nosso objetivo final e nossos primeiros passos. Nos resta agora colocar a mão na massa!
Ferramentas utilizadas
Eu resolvi reunir aqui algumas das ferramentas básicas que alguém utiliza quando vai desenhar um aplicativo, e também programar ele. A lista está bem resumida, mas procurei dar algumas dicas de software e sites, então creio que vale a leitura, principalmente para quem está começando. Se você não acha que isso vai te ajudar em nada, pula essa seção :)
Editor de imagens
O editor é uma das ferramentas mais importantes no design, afinal ele poderá tornar o seu trabalho mais produtivo, menos estressante, etc. Eu gosto muito de dois editores.
O primeiro é o que eu menos recomendo, pois ele já é um senhor de idade aposentado. Estou falando do Adobe Fireworks. Eu curto ele pois foi lá que eu dei os primeiros passos nessa área de design de UI/UX. Se você vai começar agora, evite ele.
Agora que eu já perdi toda a minha credibilidade indicando um editor super antigo e que ninguém usa mais, vamos indicar um que realmente vale a pena utilizar!? Você já ouviu falar do Sketch?
O Sketch está disponível para Mac, é um editor bem moderno e que trás uma série de funções que são uma mão na roda pra quem tá desenhando para dispositivos móveis. Uma das coisas que mais gosto enquanto desenvolvedor é a funcionalidade de exportar as imagens em vários tamanhos diferente de uma só vez. Quem desenvolve para iOS sabe quanto tempo é salvo aí!
Inspiração (ou referências)
Um das coisas mais importantes no cotidiano de um designer são as suas referências! De quais fontes ele anda buscando inspiração? Eu, pessoalmente, gosto muito de usar o Pinterest para analisar o que tá virando tendência em design, ver protótipos conceituais de aplicativos e também animações – muitas delas iradas!
Eu acho o Pinterest especialmente interessante pelo número de pessoas criativas que estão lá. Tem muita gente boa.
A dica anterior é bem popular. Outro site que eu acho interessante, e que eu descobri recentemente (será se sou um noob na área de design, meu deus!?) é o UpLabs. Lá você vai encontrar um bocado de coisa legal pra se inspirar. Acesse o site por aqui.
Outro site que também tem muita coisa legal é o Google Design. Lá você irá ter acesso a vários artigos sobre UI e também UX, que podem ser aplicados tanto no Android quanto no iOS. Acessa eles aqui.
Vamos falar de cores?
Esse é um dos maiores pesadelos para quem é leigo em design: não saber como combinar cores, ou escolher cores que contrastem de uma forma bacana. Se você passava por isso, pode ficar tranquilo, o Google resolveu seu problema.
Eles possuem um site com ótimas paletas de cores. Eles também explicam como misturar as cores certas, e de quebra ainda criaram uma simulação para o caso do Android, mas que você, obviamente, pode adaptar para o iOS, caso esteja criando para a plataforma.
Software de desenvolvimento
Como falei antes, fiquei responsável por codificar a versão iOS do Mobills. Em questão de IDE, um desenvolvedor iOS precisará basicamente do XCode, que é uma solução completa e criada pela própria Apple. O download desse software é gratuito e pode ser feito na AppStore ou na página de desenvolvedores da Apple.
Dica extra: para quem quer aprender a programar para iOS
Para quem não sabe programar para iPhones mas gostaria de aprender, você pode dar uma olhada nesse curso gratuito da Stanford (uma das maiores universidades do mundo!), ou esse da Udacity, que é pago, mas você consegue encontrar alguns conteúdos gratuitos por lá.
Vamos trabalhar?
Agora eu acho que você tá super familiarizado com o Mobills. Tá sabendo sobre as ferramentas que foram utilizadas no redesign. Falta só a gente falar sobre o mão na massa né? Bora?!
A tela “home” ou tela inicial
A tela inicial é uma das mais importantes do Mobills. É a primeira tela que o usuário tem contato após se cadastrar. Ela deve ser leve, causar uma boa primeira impressão e mostrar as coisas mais importantes para o usuário. É a imagem mental da tela inicial que o usuário dever ter quando lembrar do Mobills.
Quando cheguei vi uma tela que mostra a as informações que, em média, um usuário quer ver ao entrar no Mobills. Havia ali uma boa organização e um fluxo interessante.
Mas nem tudo eram mil maravilhas, caso contrário o trabalho de redesenho seria desnecessário. Os maiores problemas estavam no acabamento da tela. O novo projeto iria precisar de um olhar cauteloso para posicionamentos, cores, sombras, etc.
Beleza, sabemos como estavam as coisas, mas e aí, como vocês resolveram?
Pronto, vamos lá então! A UX da versão Android era fabulosa. Eu gostava dela principalmente pelo fato de ela ser composta basicamente de cards customizáveis! O usuário poderia mexer na sua ordem e até removê-los da tela, caso não os achasse necessários. Em outras palavras, o usuário criava sua própria tela inicial. Precisávamos trazer aquilo para o iOS também. Foi daí que criamos 5 protótipos diferentes de modelos de cards para a tela inicial. O modelo escolhido trás cantos levemente arredondados, que projeta uma sombra pequena, quase invisível. O seu título é centralizado, e está em letras escuras, próximas do preto.
Para conseguirmos atingir esse objetivos, no que se refere ao código, tivemos que virar uma tabela dinâmica, que receberia o tipo de conteúdo que deveria mostrar, ou seja, aquele que o usuário escolhesse.
Foi na tela inicial que pensamos pela primeira vez em um botão que indicasse onde estamos e também por onde pudéssemos navegar por dentro daquele contexto. Esse referido botão, na home, é o botão de mudar a data, que fica no topo da tela. Ao apertar ele, o usuário pode mudar a data da qual as informações mostradas na tela se referem. Em outras tela esse botão serve também para mudar todo o conteúdo da tela, sem nunca sair daquele contexto. Por exemplo, quando ele aparece no módulo de investimentos, o usuário, ao apertar nele, poderá sair da sua listagem de investimentos para ir até o seu perfil de investidor. Easter-egg: se você manter ele pressionado, na home, ele mudará a data selecionada para a data atual.
Apesar das muitas mudanças na home, vou me ater, por fim, apenas à parte superior da tela. Nesse elemento estão dispostos valores como o saldo em contas naquele mês, total de despesas, receitas e despesas cartão. Quero chamar atenção ao modo como os elementos são escondidos aos poucos, enquanto o usuário desliza a tela. Essa animação serve principalmente para ganharmos mais espaço na tela, afinal quando o usuário desliza para baixo ele está interessado nas informações da parte inferior, e não na do topo da tela.
Tela de listagem de movimentações
Uma das telas mais visitadas do aplicativo é a tela de movimentações / despesas / receitas. Nessa tela o usuário poderá ver, filtrar, editar, excluir todas as suas movimentações. Como na tela anterior não queríamos mudar tanto a UX, mas investir pesado na UI.
A alteração mais relevante na UX/UI foi a adição de dois campos superiores na tela. Esses campos, mostrariam valores que mudariam dependendo do contexto do usuário. Por exemplo, quando ele estivesse nas movimentações, ele veria ali em cima o balanço geral do mês e o balanço atual em conta. Caso ele estivesse nas despesas, ele veria ali o valor total de despesas daquele mês e quantas ainda estariam esperando pagamento. Para apresentar essa informação fixa na tela, mas sem perder muito espaço, decidimos que esse campo diminuiria de tamanho, caso o usuário movimentasse a lista.
Na interface anterior, ao acionar os filtros, o usuário via uma tela que aparecia em forma de fade. A UX ali não estava nada boa. Precisávamos corrigir aquilo. Criamos um efeito em que a tela atual é empurrada para trás, enquanto a nova aparece, vindo da parte de baixo. Esse efeito é muito parecido com o que acontece quando você inicia a escrita de um novo e-mail no aplicativo Mail do iOS. Eu gosto bastante dele pois ele deixa bem claro para o usuário que estamos mudando de tela, mas não estamos mudando de contexto, criando uma navegação sem cansar o usuário. Eu acho muito chato quando tenho que navegar por várias telas para completar uma ação. Tentamos mudar a percepção do usuário aqui. Fizemos o mesmo na tela de adicionar movimentação, mas falaremos dela só mais tarde :)
Tela de adicionar movimentação
Sem exigir muitas explicações, essa talvez a tela mais importante do aplicativo, pois é afinal aqui é onde o usuário interage com o aplicativo afim de fornecer as informações necessárias para o "trabalho" do app. Acho que dá pra deduzir daí que essa tela tem que ser simples, no sentido de bem intuitiva. Deve passar a ideia de input rápido e além disso, não pode cansar o usuário com muita informação ao mesmo tempo.
Antes adicionar uma despesa no aplicativo era simples, ele teria apenas que adicionar nome da entrada, valor e se preciso fosse, ele deveria alterar os dados sobre conta e categoria. No entanto, o usuário poderia acabar tendo a percepção que adicionar dados no aplicativo é algo demorado, afinal, se ele for alterar informações como conta ou categoria, haverá uma navegação de telas (uma navegação push, para quem entender o termo), o que passa a ideia de que estamos andando demais para chegar até lá. E sendo honesto, a tela não era nada bonita :(
As alterações feitas nessa tela foram muitas, e elas foram feitas desde a UI até a UX. O código da tela foi praticamente todo refeito, com todo o cuidado possível. Queríamos usuários realmente contentes :)
Uma coisa boa da versão anterior e que precisava ficar era que parte dos dados daquela tela já vinham preenchida pelo próprio sistema, poupando assim o tempo do usuário. Esses campos são, por exemplo, a data, categoria, conta, localização, etc.
Ainda sobre esse assunto de facilitar a vida do usuário, resolvi criar uma espécie de “botão fantasma” que auxiliará o usuário a escolher a melhor data para a movimentação. Eles aparecem com os dizerem hoje, ontem e outro. Caso o usuário clique em outro ele será apresentada uma janela afim de escolher uma data personalizada.
Resolvemos usar muito o recurso do qual falamos antes (aquele que parece um pouco com o utilizado pelo Mail do iOS, lembra?) Bom, o usuário precisa navegar um pouco afim de escolher categorias, datas, conta, cartão de crédito, etc. Dai quisemos trabalhar a percepção dele, fazendo-o acreditar que ele não navega muito entre as telas. Na verdade, fazendo-o achar que nunca nem saiu da tela de cadastro. Ainda até adicionamos uma funcionalidade de criar categorias dentro do mesmo contexto!
Em nível código, um dos grandes desafios dessa tela foi transformar ela em algo flexível, podendo aceitar a inserção de uma despesa, despesa cartão ou receita. A duplicação de código (nesse caso triplicação) seria impensável. Então criamos um sistema inteligente que reconhece o tipo de movimentação que está sendo inserido ou lido no momento. Foram necessárias muitas linhas de código para manter esse tipo de sistema. No final deu certo! Ufa :)
Mensagem final
A experiência Mobills foi muito legal! Lá eu tive a oportunidade de praticar muita coisa que aprendi aqui no Medium, por exemplo. É por isso que fiz questão de escrever esse post, queria retribuir a enxurrada de conhecimento que recebi daqui. Também queria agradecer a toda a equipe do Mobills que acreditou no meu trabalho e me deu um bocado de liberdade para poder criar e aprender junto com o processo. Pessoal, sério, essa empresa é incrível!
Bom, tentei passar essa ideia durante todo o texto, quase sempre expressando as ações em terceira pessoa. Se eu não consegui passar direito, lá vai: Eu não fiz nada só! Sempre recebi muito feedback do que tava fazendo, melhorei muita coisa, melhorei muita tela, muita usabilidade. Ou seja, foi um trabalho de equipe.
Gostou do texto? Aplaude aqui! Se conecta comigo no LinkedIn e não deixa de me seguir aqui no Medium também :) Até o próximo post!
