A animação que gerou
4x mais adesões ao cashback
no lançamento

Finance Micro-interação Mobile B2C Neon 2022
4x mais adesões diárias ao cashback no dia do lançamento
Capa do case: primeiro acesso ao cashback da Neon com a chuva de moedas na tela principal
Papel
Product Designer
Cliente
Neon
Abordagem
Co-criação com Tech Lead, Backend, Mobile Devs, PM
Resultado
4x crescimento em adesões diárias, sustentado ao longo do tempo

Um mês antes do lançamento,
o plano mudou completamente

O cashback da Neon chegava ao app com uma arquitetura clara de acesso. O usuário chegaria ao produto por dois caminhos: pela tela principal via o hub Minhas Conquistas, que reunia todos os benefícios da conta, ou pela seção de Cartões.

Um mês antes do lançamento, o Minhas Conquistas foi desprioritizado. O hub que centralizaria os benefícios não estaria pronto. Os dois fluxos planejados deixaram de existir.

O problema que chegou à mesa: como dar visibilidade ao cashback sem o Minhas Conquistas pronto, sem esforço pesado de engenharia, e sem criar uma solução que conflitasse com o hub quando ele fosse lançado?

Os fluxos que deixaram de existir
Fluxo 01
Home → Minhas Conquistas → Cashback
Fluxo 02
Home → Cartões → Adesão ao cashback
Diagrama dos dois acessos planejados ao cashback, via Minhas Conquistas e via Cartões O mesmo diagrama com a tela do Minhas Conquistas esmaecida, indicando o fluxo desprioritizado
Os dois acessos planejados e o que sobrou deles quando o Minhas Conquistas saiu do roadmap a um mês do lançamento.

De dados de pesquisa
a co-criação com o time

01
Por que o Minhas Conquistas era o destino certo
Antes de buscar alternativas, validamos a arquitetura original com dados. Múltiplas sessões de pesquisa, testes de usabilidade, tree tests e estudos de arquitetura de informação confirmavam que o Minhas Conquistas era o destino mais intuitivo para benefícios no app.

O método: cada caminho de navegação foi ponderado por prioridade. 3 pontos para primeira ou única escolha, 2 pontos para segunda, 1 ponto para terceira. Minhas Conquistas liderou com folga, à frente de Meu Neon, Crédito e Cartões. A arquitetura estava certa. O timing não estava.
Gráfico dos caminhos que os usuários escolhem para buscar cashback, com Minhas Conquistas em primeiro
Compilado de tree tests e testes de usabilidade. Cada caminho foi ponderado por prioridade de escolha: Minhas Conquistas liderou com folga.
02
Benchmark: como apps introduzem novos recursos
Analisamos como produtos líderes revelam novidades aos usuários sem interromper o fluxo principal.
Quatro telas de apps (Trulia, Lyft, Facebook Shops e Pinterest) introduzindo novos recursos
O benchmark: tooltip contextual, modal de tela cheia, card interstitial e momento de celebração.
Trulia
Tooltip contextual revelando um novo feed personalizado de atividade
Lyft
Modal de tela cheia introduzindo um novo tier de serviço
Facebook Shops
Card de descoberta interstitial sem bloquear o fluxo
Pinterest
Momento de celebração ao encontrar um item novo
O padrão: um momento breve, de baixo atrito e alto deleite, que apresenta algo novo sem interromper o que o usuário veio fazer.
03
Co-criação com o time
Trouxe Tech Lead, Backend Developer, Mobile Developers, PM e outros designers para uma sessão colaborativa. Formato: brainstorm livre, agrupamento de ideias, elaboração de soluções. Três grupos, três direções, convergência no final.

O objetivo não era chegar a uma solução em sala. Era garantir que as restrições técnicas e as possibilidades de engenharia fossem parte da ideação desde o começo.
Boards da sessão de co-criação com brainstorm, votação e elaboração da ideia final por três grupos
A sessão de co-criação com tech lead, devs, PM e designers: brainstorm livre, votação e elaboração: três grupos, três direções.
04
Matriz de complexidade vs. valor
Todas as ideias geradas na co-criação foram mapeadas em uma matriz para identificar os melhores candidatos. A Animação (Magic Moment) caiu no quadrante ideal: alto valor percebido, baixa complexidade de implementação.
Matriz de complexidade versus valor com as ideias posicionadas em post-its coloridos
A matriz de complexidade vs. valor. A animação (Magic Moment) caiu no quadrante de alto valor e baixa complexidade.
Candidatos avaliados
Animação: chuva de moedas no primeiro acesso Selecionado
Banner contextual na home Temporário
Push notification de lançamento Temporário
Novo card fixo na home Não selecionado
05
Critique assíncrono e decisão final
Com os candidatos priorizados, conduzi um critique assíncrono para refinar a direção. A decisão de avançar com o Magic Moment se sustentou em três razões: era um ponto de alta visibilidade na jornada do usuário, era uma experiência de marca Neon, o tipo de detalhe pelo qual o produto era reconhecido, e tinha sido validado em projetos anteriores com mínimo esforço técnico.
Micro-interação criada anteriormente para o lançamento do empréstimo
O precedente interno: a micro-interação do lançamento do empréstimo já provava que uma animação bem feita destacava um recurso novo sem custo de engenharia.
Board do critique com os pontos de acesso e o fluxo de lançamento anotados
O critique assíncrono sobre os pontos de acesso e o fluxo de lançamento, onde a decisão pelo Magic Moment se fechou.

Uma animação que
vale mais que uma tela

A chuva de moedas é disparada na primeira vez que o usuário acessa o cashback pela tela principal. Um momento único, celebratório, que apresenta o benefício sem nenhuma tela extra, sem modal, sem interrupção do fluxo.

A solução não criava dependência com o Minhas Conquistas. Quando o hub fosse lançado, a animação simplesmente não seria mais exibida, pois o usuário já teria feito a adesão. Nenhum conflito arquitetural.

A decisão de design mais importante foi não criar uma solução permanente. A tentação em situações de urgência é adicionar elementos que ficam no produto para sempre. A animação era temporária por design: aparecia uma vez, no momento certo, e desaparecia.

Isso também preservava a arquitetura de longo prazo. O Minhas Conquistas continuaria sendo o destino natural dos benefícios quando ficasse pronto.

A chuva de moedas no primeiro acesso · protótipo, 2022. Clique para pausar.

O brilho não é ornamento. É evidência de domínio. A chuva de moedas não existia para ser bonita. Existia para fazer o usuário sentir, no primeiro segundo, que havia encontrado algo que valia a pena.

4x
Adesões diárias ao cashback
Crescimento que se manteve ao longo do tempo, diferente de picos anteriores por CRM
Orgânico
Repercussão espontânea
Usuários elogiaram o time de UX no Twitter sem nenhuma campanha, apenas pela experiência
Zero
Conflito arquitetural
A solução temporária não criou nenhuma dívida técnica com o Minhas Conquistas
Gráfico de adesões diárias ao cashback mostrando aumento de 4x após a animação
Adesões por dia. A animação entrou no dia 17 e, diferente dos picos de comunicação, a curva se sustentou.
Print de um tweet elogiando a animação das moedinhas no app da Neon
A repercussão orgânica: usuários comentando a chuva de moedas no Twitter, sem nenhuma campanha por trás.
Ver também
Insurance · Discovery · Neon + BNP Paribas Cardif
Seguro de cartão que virou benchmark global de conversão

Quer conversar sobre
esse projeto?

Conto os bastidores das decisões por e-mail ou pelo LinkedIn.