Humanizando produtos financeiros com design — como construímos as Metas

Esse artigo foi escrito em colaboração com minha super dupla, Alan Yamasaki!

O que você quer conquistar?

Esse é o convite que fazemos para quem vai criar sua primeira meta, nosso produtinho querido aqui no iti.

Além da felicidade de colocar uma entrega desse tamanho na rua, vem também o orgulho de saber que cada detalhe foi pensado com muito carinho, aplicando as melhores práticas de design para criar uma experiência pela qual as pessoas se apaixonem.

E como criamos essa experiência?

Neste artigo, vamos focar em como unimos ilustrações 🤝 motion 🤝 UX Writing para construir a experiência das Metas.

Já adiantamos que foi uma construção em conjunto, feita em dupla mesmo: Product e Content Designer raciocinando juntos, dando pitacos, contribuindo pro trabalho um do outro e sempre se motivando a ir além!

Guardar dinheiro é um meio para um sonho

As metas dos nossos usuários representam conquistas para suas vidas e o próprio ato de guardar dinheiro já é uma conquista por si só.

Um celular pode ser motivo de muita comemoração, uma moto é sinônimo de independência… e nem precisamos falar de conquistar a casa própria, não é mesmo?

Muito mais do que bens materiais, são sonhos e histórias.

Sabíamos que era nossa missão criar uma experiência que incorpore essa sensação de conquista, dedicação e orgulho de si mesmo.

Então, nas Metas, o usuário sabe que nós estamos torcendo pelos seus sonhos.

As ilustrações traduzem esses sonhos

As Metas nasceram com 9 ilustrações representando os principais sonhos que apareceram em pesquisas. Você consegue identificar todos?

Cada uma delas foi feita exclusivamente para a experiência deste produto e o processo de criá-las teve algumas diretrizes:

Linguagem iti

As ilustrações transmitem os valores que o iti acredita e estão em harmonia com sua linguagem visual: simples, inclusiva, brasileira, geométrica e 2D.

Padrão visual

Mantivemos a consistência interna entre as ilustrações, permitindo que elas conversem entre si e tenham harmonia entre seus elementos.

Esse refinamento é definido pelo traço, tamanho, cores, alinhamento e como isso se manifesta em cada ilustração e em cada tela da jornada.

Identificação, familiaridade e brasilidade

Queremos que os usuários enxerguem nas Metas sua realidade e seus sonhos. Ou seja, queremos gerar uma identificação entre a meta no aplicativo e como ela existe na cabeça da pessoa.

Esse efeito é criado por elas serem brasileiras, cheias de easter eggs que criam familiaridade com cenas do cotidiano.

Vai dizer que essa cena não lembra um domingo à tarde?

O motion conta histórias

As ilustrações foram pensadas para criar histórias e por si só já geram identificação. O motion permite que a gente dê vida a esses sonhos.

E dá pra contar muita história

Imagine que uma ilustra estática é um quadro e uma animação são 120 versões diferentes desse quadro, acrescentando ou tirando elementos, movimentando e lhes dando uma narrativa própria.

Isso expande o leque de oportunidades para contar histórias e transmitir informações!

Não é só uma animação bonita não

Usamos o motion para reforçar todos os efeitos que já falamos acima: identificação, conforto, animação e, principalmente, brasilidade.

Todo esse viés artístico, divertido e reconfortante é uma quebra desse ambiente financeiro que costuma ser tão sério, permitindo que a gente crie momentos divertidos e relaxantes.

Vai dizer que essa cena não transmite a tranquilidade de um lar?

Ou que o cofrinho cheio de dinheiro não é algo que queremos ver?

O UX Writing aproxima e cria conversas

Enquanto as ilustrações servem para se destacar e chamar atenção, um bom texto UX é aquele que informa, orienta e flui de maneira tão natural que o usuário nem “percebe” que leu.

Mas não quer dizer que o writing não pode se destacar de outro jeito.

Como mostrar ao usuário que estamos torcendo por ele e, ao mesmo tempo, incentivar a manter o hábito sem transformar esse incentivo em uma pressão?

Dosando o tom

Se a voz de uma marca é estável, o tom varia de acordo com o momento, a mensagem e como o usuário está se sentindo. Nós mapeamos os possíveis sentimentos das pessoas ao usar as Metas e adequamos nosso tom a cada um deles.

Níveis de comemoração

Saber o que, quando e quanto comemorar é muito importante para não exagerar no tom.

Quando criamos feedbacks de experiências positivas, devemos sempre nos perguntar se aquele resultado da ação é algo muito legal para o usuário ou se é apenas o esperado.

Por exemplo:

Guardar dinheiro na meta com sucesso = se você abriu o iti para guardar dinheiro, depositá-lo com sucesso na sua meta é algo esperado. Por isso, o dosamos o feedback.

Atingir 100% da sua meta = é algo a ser comemorado!

Sua árvore está crescendo!

E quando o assunto é guardar dinheiro, reconhecer o próprio progresso é essencial para manter a motivação. Por isso, traduzimos isso em uma árvore que cresce à medida que a pessoa se aproxima da sua meta.

Aqui, unimos o motion com ux writing, aproveitando o momento para reforçar nosso tom: no início nós torcemos e motivamos você. No fim, mais perto da meta, já estamos comemorando juntos essa conquista!

É sobre aproveitar os momentos certos

Usamos esses artifícios do design em momentos específicos do fluxo. Se você já leu Leis da Psicologia aplicadas a UX, já conhece a Regra do Pico-Final

“As pessoas julgam uma experiência, em grande parte, baseadas em como se sentiram no ponto mais alto (pico) e no final, em vez de na soma total ou média de cada momento da experiência” — Leis da Psicologia aplicadas a UX, Jon Yablonski

Dá pra comparar um fluxo a uma música: varia de intensidade

Pode começar suave, manter o ritmo e, nos momentos certos, aumentar a intensidade, sabendo o momento de baixar o volume e respeitar a melodia.

Ao mapear a jornada e identificar quais são os principais momentos do fluxo de criação, decidimos quando aumentar a intensidade usando os esses artifícios que você leu até aqui.

E é desse jeito que a gente transforma uma tela de carregamento em algo assim:

Propósito é o centro de tudo

Cada detalhe em que colocamos esse carinho especial está alinhado ao nosso propósito: que as metas sejam as melhores parceiras na jornada de guardar dinheiro dos nossos usuários.

E pra finalizar: não fizemos isso sozinhos!

Não teríamos chegado aqui sem o trabalho de todo mundo que se envolveu na construção das Metas: time de negócios, lideranças e colegas de design, time de tecnologia… todo mundo que acreditou no potencial das Metas, comprou as ideias e contribuiu com outras ainda melhores. Vocês são incríveis, pessoal!

E você, o que quer conquistar?