Arraste para explorar. Role ou use a pinça para aproximar. Abra a Ajuda para ver os atalhos de teclado.

Yan
ABERTO A
PROJETOS
Vamos conversar
Yan Fontão Boring view
Todos os trabalhos

Case 041Produto de finanças pessoais

Financias

O Financias é uma ferramenta de finanças pessoais para registrar receitas, despesas pagas, transferências e contas a pagar. O design parte de uma distinção que afeta todas as telas: o dinheiro que já se movimentou e o que ainda falta pagar.

Meu papel
Design de produto e implementação
Status do projeto
Produto no ar · Dados pessoais ocultos
Um cofrinho de porquinho em 3D com uma moeda caindo na fenda.
Um objeto 3D feito para este mural.

01

Uma visão geral que leva à próxima ação

A visão geral que está no ar separa o saldo atual, os pagamentos que pedem atenção e o ritmo de gastos do mês. Abaixo dessas decisões imediatas ficam os gráficos de receitas e despesas e, depois, os atalhos para cada tipo de registro.

Registrar uma despesa paga, programar uma conta a pagar e transferir dinheiro entre contas são ações separadas desde o início. Assim, o modelo financeiro do produto fica visível antes de alguém preencher um formulário.

Capturei a interface que aparece aqui com o produto em funcionamento. Ocultei os valores monetários antes da captura, o que preserva o layout e os controles e deixa os valores pessoais fora do case.

Interação gravada no produto: visão geral, gráficos, próximos pagamentos e opções de registro. Borrei os valores financeiros e os dados pessoais antes da gravação.

02

Ações diferentes pedem linguagens diferentes

Uma despesa paga reduz o saldo. Uma conta a pagar é um compromisso, com vencimento próprio, até o pagamento ser confirmado. Uma transferência move dinheiro entre contas da mesma pessoa e não deve aparecer como nova receita nem como novo gasto.

Essas regras definem tanto a interface quanto o modelo de dados. O Financias dá um nome próprio a cada ação e usa o onboarding para explicá-las com exemplos curtos. O fluxo de primeiro uso começa com uma conta, apresenta os quatro tipos essenciais de registro e leva a um lançamento real, que a pessoa revisa antes de salvar.

A ajuda continua disponível depois. Quem volta a ela vê a explicação do produto sem criar registros financeiros nem zerar o progresso.

Visão geral do Financias com todos os valores monetários ocultos.
Captura da interface no ar. Borrei os valores monetários antes da captura; o saldo usa o controle de privacidade do produto.

03

Cada confirmação vale um pagamento

O fluxo de pagamento registra a data efetiva, o valor pago e a conta escolhida e depois vincula a conta a pagar à transação gerada. Se a mesma confirmação se repetir, o resultado tem que ser igual: um único pagamento ativo e um único efeito no saldo.

Esse requisito liga uma ação visível a uma invariante do software. A interface pode mostrar uma confirmação simples porque projetei a operação por trás dela para manter a conta a pagar e a transação coerentes.

O mesmo cuidado vale para a visão geral. Os compromissos futuros ficam separados dos gastos já feitos. Os totais em moedas diferentes também ficam separados, para que um número somado não dê a entender que reais, dólares e euros são intercambiáveis.

04

O que é pessoal continua pessoal

Cada registro financeiro pertence a um único titular de conta. A gestão de acessos é separada da permissão para ver as informações financeiras de outra pessoa. O produto não traz livro-caixa familiar compartilhado nem transferências entre usuários.

Esse limite dá ao app um escopo claro e deixa a interface focar nas contas, nos vencimentos e na próxima ação da própria pessoa.

Logotipo do Financias e símbolo F sobre fundo verde-escuro.
Card da identidade visual do Financias.

05

O que este projeto mostra

O Financias liga a linguagem do dia a dia a um comportamento financeiro preciso. Suas decisões de design mais fortes aparecem nas distinções que o produto mantém: pago e pendente, transferência e despesa, uma moeda e outra, dados pessoais e acesso administrativo.

000

Instruções

Yan Fontão
Toque
Abre uma tela
Clique
Abre uma tela
Arrastar
Move pelo mural
Rolagem
Mouse aproxima, trackpad move, pinça aproxima
− +
Afasta até ver o mural inteiro, ou aproxima
Setas
No case: ↑↓ trocam de case, ←→ trocam de mídia. No mural: movem
Espaço
Abre ou volta
Enter
Abre
Esc Backspace
Volta
Home
Volta ao centro, depois à abertura
PgUp PgDn
Canal anterior ou próximo
Tab
Percorre projetos e links
R
Projeto aleatório
0–9
Digite um canal, 1–61
?
Esta página
Atalhos

Música do mural

Arquivos comprimidos e nivelados para a web.

ABERTO A
PROJETOS
Vamos conversar

Nova mensagem para o Yan

Conte quem você é e eu respondo.

000

Sobre o Yan

Oi, eu sou o Yan

Product Designer/ Design Engineer

A maioria dos produtos perde algo entre o design e o código. Os meus não: eu pesquiso o problema, desenho o produto e coloco a interface no ar, então o que você aprova é exatamente o que seus usuários recebem.

  • 2018início em software
  • UI + codedesign e implementação

Trabalhei com Motorola · Ambev Tech · Rei do Pitaco · OneTool · CESAR

Brasil · Remoto, híbrido ou presencial

Retrato de Yan Fontão sentado, de suéter verde e óculos, segurando um microfone.
ABERTO A
PROJETOS
Vamos conversar
ABERTO A
PROJETOS
Vamos conversar
000

canal bloqueado

Sob NDA

Digite o código

Peça o código ao Yan ↗
ABERTO A
PROJETOS
Vamos conversar
YAN FONTÃO Cases completos

Canal 41 Produto de finanças pessoais

Financias

O Financias é uma ferramenta de finanças pessoais para registrar receitas, despesas pagas, transferências e contas a pagar. O design parte de uma distinção que afeta todas as telas: o dinheiro que já se movimentou e o que ainda falta pagar.

Meu papel
Design de produto e implementação
Status do projeto
Produto no ar · Dados pessoais ocultos
Um cofrinho de porquinho em 3D com uma moeda caindo na fenda.
Um objeto 3D feito para este mural.

Financias: deixar claro o que um saldo significa

Interação gravada no produto. Valores financeiros e dados pessoais ocultos.

Resumo do fluxo
  1. Registrar uma conta a pagar
  2. Confirmar um pagamento
  3. Atualizar o saldo

Uma visão geral que leva à próxima ação

A visão geral que está no ar separa o saldo atual, os pagamentos que pedem atenção e o ritmo de gastos do mês. Abaixo dessas decisões imediatas ficam os gráficos de receitas e despesas e, depois, os atalhos para cada tipo de registro.

Registrar uma despesa paga, programar uma conta a pagar e transferir dinheiro entre contas são ações separadas desde o início. Assim, o modelo financeiro do produto fica visível antes de alguém preencher um formulário.

Capturei a interface que aparece aqui com o produto em funcionamento. Ocultei os valores monetários antes da captura, o que preserva o layout e os controles e deixa os valores pessoais fora do case.

Interação gravada no produto: visão geral, gráficos, próximos pagamentos e opções de registro. Borrei os valores financeiros e os dados pessoais antes da gravação.

Ações diferentes pedem linguagens diferentes

Uma despesa paga reduz o saldo. Uma conta a pagar é um compromisso, com vencimento próprio, até o pagamento ser confirmado. Uma transferência move dinheiro entre contas da mesma pessoa e não deve aparecer como nova receita nem como novo gasto.

Essas regras definem tanto a interface quanto o modelo de dados. O Financias dá um nome próprio a cada ação e usa o onboarding para explicá-las com exemplos curtos. O fluxo de primeiro uso começa com uma conta, apresenta os quatro tipos essenciais de registro e leva a um lançamento real, que a pessoa revisa antes de salvar.

A ajuda continua disponível depois. Quem volta a ela vê a explicação do produto sem criar registros financeiros nem zerar o progresso.

Visão geral do Financias com todos os valores monetários ocultos.
Captura da interface no ar. Borrei os valores monetários antes da captura; o saldo usa o controle de privacidade do produto.

Cada confirmação vale um pagamento

O fluxo de pagamento registra a data efetiva, o valor pago e a conta escolhida e depois vincula a conta a pagar à transação gerada. Se a mesma confirmação se repetir, o resultado tem que ser igual: um único pagamento ativo e um único efeito no saldo.

Esse requisito liga uma ação visível a uma invariante do software. A interface pode mostrar uma confirmação simples porque projetei a operação por trás dela para manter a conta a pagar e a transação coerentes.

O mesmo cuidado vale para a visão geral. Os compromissos futuros ficam separados dos gastos já feitos. Os totais em moedas diferentes também ficam separados, para que um número somado não dê a entender que reais, dólares e euros são intercambiáveis.

O que é pessoal continua pessoal

Cada registro financeiro pertence a um único titular de conta. A gestão de acessos é separada da permissão para ver as informações financeiras de outra pessoa. O produto não traz livro-caixa familiar compartilhado nem transferências entre usuários.

Esse limite dá ao app um escopo claro e deixa a interface focar nas contas, nos vencimentos e na próxima ação da própria pessoa.

Logotipo do Financias e símbolo F sobre fundo verde-escuro.
Card da identidade visual do Financias.

O que este projeto mostra

O Financias liga a linguagem do dia a dia a um comportamento financeiro preciso. Suas decisões de design mais fortes aparecem nas distinções que o produto mantém: pago e pendente, transferência e despesa, uma moeda e outra, dados pessoais e acesso administrativo.