Arrastra para explorar. Desplázate o pellizca para acercar. Abre la Ayuda para ver los atajos de teclado.

Yan
ABIERTO A
PROYECTOS
Hablemos
Yan Fontão Boring view
All work

Case 041Producto de finanzas personales

Financias

Financias es una herramienta de finanzas personales para registrar ingresos, gastos pagados, transferencias y cuentas por pagar. El diseño parte de una distinción que afecta a todas las pantallas: el dinero que ya se movió y el dinero que todavía se debe.

Mi papel
Diseño de producto e implementación
Estado del proyecto
Producto en funcionamiento · Datos personales ocultos
Una alcancía de cerdito en 3D con una moneda que cae por la ranura.
Un objeto 3D hecho para este mural.

01

Una vista general que lleva a la siguiente acción

La vista general publicada separa el saldo actual, los pagos que requieren atención y el ritmo de gasto del mes. Debajo de esas decisiones inmediatas van los gráficos de ingresos y gastos, y después los accesos directos para los distintos tipos de registro.

Registrar un gasto pagado, programar una cuenta por pagar y mover dinero entre cuentas empiezan con acciones distintas. Así, el modelo financiero del producto se ve antes de que la persona llene un formulario.

La interfaz que se muestra aquí se capturó del producto en funcionamiento. Los montos se ocultaron antes de la captura, para conservar la distribución y los controles sin exponer valores personales en el caso.

Interacción grabada con el producto: vista general, gráficos, próximos pagos y opciones de registro. Los valores financieros y los datos personales se difuminaron antes de grabar.

02

Cada acción necesita su propio lenguaje

Un gasto pagado reduce el saldo. Una cuenta por pagar representa un compromiso, con su propia fecha de vencimiento, hasta que se confirma el pago. Una transferencia mueve dinero entre cuentas de la misma persona y no debe aparecer como un ingreso ni un gasto nuevo.

Esas reglas dan forma tanto a la interfaz como al modelo de datos. Financias asigna nombres distintos a las acciones y usa el onboarding para explicarlas con ejemplos breves. El flujo de primer uso empieza con una cuenta, presenta los cuatro tipos esenciales de registro y lleva a un registro real que la persona revisa antes de guardar.

La ayuda sigue disponible después. Volver a abrirla explica el producto sin crear registros financieros ni reiniciar el progreso.

Vista general de Financias con todos los montos ocultos.
Captura de la interfaz en funcionamiento. Los montos se difuminaron antes de la captura; el saldo usa el control de privacidad del producto.

03

Que una confirmación signifique un pago

El flujo de pago registra la fecha efectiva, el monto pagado y la cuenta elegida, y luego vincula la cuenta por pagar con la transacción resultante. Repetir la misma confirmación debe mantener un único pago activo y un único efecto en el saldo.

Ese requisito conecta una acción visible con una invariante del software. La interfaz puede mostrar una confirmación simple porque la operación subyacente está diseñada para mantener consistentes la cuenta por pagar y su transacción.

El mismo cuidado llega a la vista general. Los compromisos futuros se mantienen separados de los gastos ya realizados. Los totales en monedas distintas también se mantienen separados, para que un número combinado no dé a entender que reales, dólares y euros son intercambiables.

04

Que lo personal siga siendo personal

Cada registro financiero pertenece a un solo titular de cuenta. La administración de accesos es independiente del permiso para consultar la información financiera de otra persona. El producto no incorpora un libro de cuentas familiar compartido ni transferencias entre usuarios.

Este límite le da a la aplicación un alcance claro y permite que la interfaz se concentre en las cuentas, los vencimientos y la siguiente acción de cada persona.

Logotipo de Financias y símbolo F sobre un fondo verde oscuro.
Pieza de identidad de marca de Financias.

05

Qué muestra este proyecto

Financias conecta el lenguaje cotidiano con un comportamiento financiero preciso. Sus decisiones de diseño más sólidas se ven en las distinciones que el producto conserva: pagado y pendiente, transferencia y gasto, una moneda y otra, datos personales y acceso administrativo.

000

Instrucciones

Yan Fontão
Toque
Abre una pantalla
Clic
Abre una pantalla
Arrastrar
Recorre el mural
Rueda
El mouse acerca, el trackpad mueve, el pellizco acerca
− +
Aleja hasta ver todo el mural, o acerca
Flechas
En un caso: ↑↓ cambian de caso, ←→ cambian de medio. En el mural: mueven
Espacio
Abre o vuelve
Enter
Abre
Esc Backspace
Vuelve
Home
Vuelve al centro y luego a la apertura
PgUp PgDn
Canal anterior o siguiente
Tab
Recorre proyectos y enlaces
R
Proyecto al azar
0–9
Escribe un canal, 1–61
?
Esta página
Atajos

Música del mural

Archivos comprimidos y nivelados para la web.

ABIERTO A
PROYECTOS
Hablemos

Nuevo mensaje para Yan

Cuéntame quién eres y te respondo.

000

Sobre Yan

Hola, soy Yan

Product Designer/ Design Engineer

La mayoría de los productos pierde algo entre el diseño y el código. Los míos no: investigo el problema, diseño el producto y lanzo la interfaz yo mismo, así que lo que apruebas es exactamente lo que reciben tus usuarios.

  • 2018inicio en software
  • UI + codediseño e implementación

Trabajé con Motorola · Ambev Tech · Rei do Pitaco · OneTool · CESAR

Brasil · Remoto, híbrido o presencial

Retrato de Yan Fontão sentado, con suéter verde y gafas, sosteniendo un micrófono.
ABIERTO A
PROYECTOS
Hablemos
ABIERTO A
PROYECTOS
Hablemos
000

canal bloqueado

Bajo NDA

Ingresa el código

Pídele el código a Yan ↗
ABIERTO A
PROYECTOS
Hablemos
YAN FONTÃO Casos completos

Canal 41 Producto de finanzas personales

Financias

Financias es una herramienta de finanzas personales para registrar ingresos, gastos pagados, transferencias y cuentas por pagar. El diseño parte de una distinción que afecta a todas las pantallas: el dinero que ya se movió y el dinero que todavía se debe.

Mi papel
Diseño de producto e implementación
Estado del proyecto
Producto en funcionamiento · Datos personales ocultos
Una alcancía de cerdito en 3D con una moneda que cae por la ranura.
Un objeto 3D hecho para este mural.

Financias: aclarar qué significa un saldo

Interacción grabada con el producto. Valores financieros y datos personales ocultos.

Resumen del flujo
  1. Registrar una cuenta por pagar
  2. Confirmar un pago
  3. Actualizar el saldo

Una vista general que lleva a la siguiente acción

La vista general publicada separa el saldo actual, los pagos que requieren atención y el ritmo de gasto del mes. Debajo de esas decisiones inmediatas van los gráficos de ingresos y gastos, y después los accesos directos para los distintos tipos de registro.

Registrar un gasto pagado, programar una cuenta por pagar y mover dinero entre cuentas empiezan con acciones distintas. Así, el modelo financiero del producto se ve antes de que la persona llene un formulario.

La interfaz que se muestra aquí se capturó del producto en funcionamiento. Los montos se ocultaron antes de la captura, para conservar la distribución y los controles sin exponer valores personales en el caso.

Interacción grabada con el producto: vista general, gráficos, próximos pagos y opciones de registro. Los valores financieros y los datos personales se difuminaron antes de grabar.

Cada acción necesita su propio lenguaje

Un gasto pagado reduce el saldo. Una cuenta por pagar representa un compromiso, con su propia fecha de vencimiento, hasta que se confirma el pago. Una transferencia mueve dinero entre cuentas de la misma persona y no debe aparecer como un ingreso ni un gasto nuevo.

Esas reglas dan forma tanto a la interfaz como al modelo de datos. Financias asigna nombres distintos a las acciones y usa el onboarding para explicarlas con ejemplos breves. El flujo de primer uso empieza con una cuenta, presenta los cuatro tipos esenciales de registro y lleva a un registro real que la persona revisa antes de guardar.

La ayuda sigue disponible después. Volver a abrirla explica el producto sin crear registros financieros ni reiniciar el progreso.

Vista general de Financias con todos los montos ocultos.
Captura de la interfaz en funcionamiento. Los montos se difuminaron antes de la captura; el saldo usa el control de privacidad del producto.

Que una confirmación signifique un pago

El flujo de pago registra la fecha efectiva, el monto pagado y la cuenta elegida, y luego vincula la cuenta por pagar con la transacción resultante. Repetir la misma confirmación debe mantener un único pago activo y un único efecto en el saldo.

Ese requisito conecta una acción visible con una invariante del software. La interfaz puede mostrar una confirmación simple porque la operación subyacente está diseñada para mantener consistentes la cuenta por pagar y su transacción.

El mismo cuidado llega a la vista general. Los compromisos futuros se mantienen separados de los gastos ya realizados. Los totales en monedas distintas también se mantienen separados, para que un número combinado no dé a entender que reales, dólares y euros son intercambiables.

Que lo personal siga siendo personal

Cada registro financiero pertenece a un solo titular de cuenta. La administración de accesos es independiente del permiso para consultar la información financiera de otra persona. El producto no incorpora un libro de cuentas familiar compartido ni transferencias entre usuarios.

Este límite le da a la aplicación un alcance claro y permite que la interfaz se concentre en las cuentas, los vencimientos y la siguiente acción de cada persona.

Logotipo de Financias y símbolo F sobre un fondo verde oscuro.
Pieza de identidad de marca de Financias.

Qué muestra este proyecto

Financias conecta el lenguaje cotidiano con un comportamiento financiero preciso. Sus decisiones de diseño más sólidas se ven en las distinciones que el producto conserva: pagado y pendiente, transferencia y gasto, una moneda y otra, datos personales y acceso administrativo.