Alcivanio (Swift)

Mar 15, 2018

13 min read

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.

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á.

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.

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!

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.

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.

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.

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!

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.

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.

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.

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.

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.

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!

Computer Engineer + iOS Engineer. I am interested in Swift, Kotlin, Firebase, Data Structures, ASO & On Solving Real World Problems.

Love podcasts or audiobooks? Learn on the go with our new app.