Poupança Inteligente

Poupança Inteligente é uma funcionalidade de economia para um produto financeiro moderno. O objetivo é simples: transformar a intenção de guardar dinheiro em um comportamento recorrente, sem exigir que o usuário monte um plano por conta própria.

Projeto desenvolvido individualmente e posteriormente refinado.

Visão Geral

• Role: Design Engineer
• Responsabilidades: conceito de produto, arquitetura de interface, UX e UI
• Categoria: exploração de produto financeiro
• Plataforma: mobile
• Ferramentas: Figma, design system

O Produto

A experiência começa com uma sugestão personalizada: o app propõe guardar um valor e apresenta a meta da semana. O usuário confirma em duas etapas e, se quiser, automatiza depósitos recorrentes. A partir daí, a home passa a acompanhar o progresso da meta em tempo real.

Protótipo

Experimente a versão interativa da funcionalidade em um contexto mobile.

Fluxo

Sugestão

A home apresenta uma sugestão personalizada para guardar um valor, com o progresso da meta semanal, atalhos do banco e saldo disponível.

Confirmação

O usuário revisa o valor e a categoria em um bottom sheet, confirmando a ação sem sair do contexto da tela principal.

Automação

Após concluir a primeira economia, o usuário pode automatizar depósitos recorrentes semanais para criar o hábito de poupar.

Acompanhamento

Com a automação ativa, o card indica que a economia recorrente está funcionando, com indicador de status e progresso atualizado da meta.

Para quem não ativa a automação, a interface mantém o acompanhamento da meta e incentiva a continuidade por meio da visualização do progresso.

Interface

A tela inicial concentra tudo em um único lugar: a sugestão do momento, o progresso da meta e os atalhos do banco. A hierarquia leva o olhar direto para a ação principal.

A variação da mesma tela mostra como o card se comporta em estados diferentes, mantendo a consistência da linguagem visual.

Componentes

Header — reduzido ao essencial, com saldo e acesso aos atalhos, para não competir com a sugestão.

Cards — um card principal para a sugestão do momento e cards secundários para meta e atalhos. O card principal é o único com ação primária.

Bottom Sheet — usado para confirmar e revisar a economia, mantendo o usuário no contexto da tela de origem.

Botões — ação primária sempre com o mesmo peso visual; ações de segunda ordem ficam em estilo secundário.

Indicadores — o status da automação usa um indicador discreto que comunica o estado sem poluir o card.

Progress Bar — o progresso da meta é a âncora visual do card, transformando um valor em um objetivo tangível.

Estados — automação ativa, pausada e acompanhamento manual são estados distintos, cada um com sua sinalização.

Ícones — ícones de linha, consistentes com o design system, usados só onde agregam clareza.

Interações

Por que bottom sheet? A confirmação é uma ação rápida e de baixa complexidade. O bottom sheet permite concluí-la sem trocar de tela, reduzindo o atrito entre a intenção e a ação.

Por que confirmação em duas etapas? Primeiro o usuário confirma a economia do momento; em seguida, decide se quer automatizar. Separar as decisões evita sobrecarga e permite que cada escolha seja feita com clareza.

Como o progresso incentiva recorrência? O progresso da meta funciona como uma âncora visual: acompanhar o quanto já foi guardado torna o comportamento visível e reforça o senso de avanço.

Como a automação reduz esforço? O depósito recorrente transfere a repetição para o sistema. O usuário decide uma vez e o hábito acontece sem novas decisões.

Como o feedback mantém o engajamento? A atualização do status e do progresso na home devolve ao usuário a confirmação de que o sistema está trabalhando por ele, o que sustenta a confiança na funcionalidade.

Resultado

A solução transforma uma ação isolada em um comportamento recorrente por meio de pequenas intervenções distribuídas ao longo da experiência: a sugestão reduz a fricção de começar, a automação elimina o esforço de repetir e o acompanhamento dá visibilidade ao avanço.