Diseño de una app para entender mejor nuestros gastos
UX/UI Case Study
Wallet Tracker es una aplicación móvil pensada para ayudar a las personas a registrar sus ingresos y gastos, entender sus hábitos de consumo y tomar mejores decisiones sobre su dinero.
El proyecto nace de una realidad especialmente relevante en Argentina: cuando el costo de vida cambia constantemente, saber cuánto dinero entra y cuánto sale deja de ser suficiente. También necesitamos entender dónde, cuándo y cómo estamos gastando.
01 El Problema
Cuando llegar a fin de mes se convierte en un desafío
La situación económica de Argentina y el impacto de la inflación han llevado a muchas personas a buscar nuevas formas de ahorrar, reducir gastos y modificar sus hábitos de consumo.
Cuando los precios cambian constantemente, mantener el mismo nivel de consumo requiere cada vez más esfuerzo. Para muchas personas, el problema no es solamente cuánto dinero tienen disponible, sino la dificultad de visualizar con claridad en qué se está yendo ese dinero.
Wallet Tracker parte de esa necesidad:
¿Cómo podemos hacer que nuestros ingresos y gastos sean más fáciles de entender para poder tomar mejores decisiones?
02 El Objetivo
Pasar de registrar gastos a entenderlos
El objetivo del proyecto fue desarrollar una herramienta que permitiera:
- controlar los gastos;
- monitorear los hábitos de consumo;
- visualizar ingresos y egresos;
- identificar dónde se concentra el gasto;
- generar hábitos que ayuden al ahorro;
- y acceder a contenidos y herramientas relacionadas con educación financiera.
La intención no era crear solamente otra aplicación para registrar movimientos.
La propuesta era convertir los datos financieros cotidianos en información que pudiera entenderse rápidamente y utilizarse para tomar decisiones
03 La Solución
Una app para controlar, visualizar y aprender
La solución fue una aplicación móvil centrada en tres necesidades principales:
Registrar.
Ingresos, gastos y transferencias desde un único lugar.
Entender.
Visualizar el balance y analizar cómo se distribuye el dinero.
Mejorar.
Utilizar esa información para modificar hábitos de consumo y favorecer el ahorro.
La interfaz debía permitir que una persona pudiera abrir la aplicación y obtener rápidamente una respuesta a una pregunta fundamental:
¿Cómo está mi situación financiera ahora mismo?
04 Definiendo el MVP
Empezar por lo esencial
Para mantener el producto enfocado, el MVP se construyó alrededor de las funciones necesarias para registrar y comprender los movimientos financieros.
El producto debía incluir:
01 — Registro de transacciones
Un formulario para ingresar gastos, ingresos y transferencias.
02 — Balance
Una visualización rápida de la relación entre ingresos, gastos y saldo.
03 — Estadísticas
Información agrupada por períodos para poder observar el comportamiento financiero.
04 — Categorías
Una forma de organizar los movimientos y entender mejor dónde se concentra el gasto.
A partir de estas funcionalidades se construyó la experiencia principal de Wallet Tracker.
05 User Persona
Diseñando para alguien que necesita visibilidad
El usuario ideal definido para el proyecto es un emprendedor o dueño de negocio, amante de la tecnología y curioso por mejorar su situación financiera.
Es una persona que puede tener múltiples movimientos de dinero y necesita una manera sencilla de hacerlos visibles.
El problema no es necesariamente la falta de información.
Es que esa información puede estar dispersa y ser difícil de interpretar.
Por eso, la interfaz debía reducir esa complejidad y convertir los movimientos individuales en una visión general fácil de comprender.
06 Punto de Vista POV
Hacer visible lo que normalmente permanece oculto
El punto central del proyecto fue trabajar sobre la visibilidad.
Una transacción aislada dice poco.
Pero cientos de transacciones organizadas por categorías, períodos y tipos de movimiento pueden revelar patrones.
Wallet Tracker busca transformar esos datos en una representación visual que permita detectar rápidamente:
y cómo evolucionan los ingresos y gastos a lo largo del tiempo.
- cuánto dinero ingresó;
- cuánto se gastó;
- cuánto queda disponible;
- cuáles son los gastos más importantes;
07 Wireframes
Antes de definir la apariencia, había que definir la experiencia
Los wireframes permitieron explorar la estructura de las principales pantallas antes de llevarlas al lenguaje visual definitivo.
El foco estuvo puesto en organizar las funcionalidades principales de manera sencilla:
- balance;
- estadísticas;
- registro de movimientos;
- categorías;
- y contenidos de educación financiera.
La prioridad fue construir una arquitectura que permitiera acceder a la información financiera sin agregar complejidad innecesaria.
08 Naming y creación del Logo/ícono
Wallet Tracker
El nombre surge directamente de la función principal del producto.
La aplicación funciona como una wallet, pero no se limita a almacenar información: también permite trackear los movimientos de dinero.
De ahí nace:
Wallet + Tracker = Wallet Tracker
El naming busca comunicar inmediatamente qué hace el producto y posicionarlo dentro de una categoría que el usuario puede reconocer fácilmente.
09 Identidad Visual
Un sistema simple y adaptable
A partir del nombre se desarrolló el logo y el ícono de la aplicación.
El símbolo incorpora las barras como referencia visual a los movimientos y estadísticas que forman parte de la experiencia.
La simplicidad fue una decisión importante. El logo debía funcionar en diferentes contextos: formato horizontal, formato cuadrado e ícono de aplicación.
También se trabajó el espaciado entre las letras para conseguir una marca que pudiera percibirse como una unidad visual.
10 UI Kit
Un lenguaje visual consistente
Para construir la interfaz se tomó como referencia Material Design 3, adaptando sus patrones e iconografía al producto.
El sistema utiliza formas redondeadas y componentes visuales que buscan transmitir una experiencia moderna y accesible.
El UI Kit permitió mantener consistencia entre las diferentes pantallas y establecer una base común para componentes, iconos y elementos de interacción.
11 Visualización de datos instantánea
La información financiera debe entenderse de un vistazo
Una de las decisiones más importantes del proyecto fue cómo representar el balance.
La solución elegida fue un donut chart que permite visualizar la relación entre ingresos y gastos, mientras que el saldo aparece en el centro.
La intención es reducir el tiempo necesario para interpretar la información.
En lugar de obligar al usuario a leer diferentes números y hacer cálculos mentalmente, la pantalla presenta una representación visual inmediata del estado del balance.
Debajo del gráfico, los ingresos y gastos se representan mediante barras horizontales de porcentaje.
Los valores aparecen ordenados de mayor a menor, permitiendo identificar rápidamente qué movimientos representan una mayor proporción del total.
La visualización también incorpora scorecards para mostrar los valores de ingresos y gastos correspondientes a períodos mensuales y anuales.
12 Home
El balance primero. La pantalla principal está construida alrededor de la información financiera más importante:
la relación entre ingresos y gastos.
El balance ocupa el centro de la experiencia porque es el dato que permite obtener una visión rápida de la situación actual.
El donut chart también funciona como punto de interacción: al tocarlo, el usuario puede visualizar por separado los ingresos y los gastos.
La Home no intenta mostrarlo todo. Su función principal es responder rápidamente:
¿Cómo está mi balance?
13 Estadísticas
Convertir movimientos en patrones
La sección de estadísticas organiza la información financiera en tres áreas principales:
Ingresos · Ahorros · Gastos
Para los ahorros mensuales se utiliza una representación mediante gráficos de barras y scorecards, permitiendo observar los valores de una manera diferente a la visualización principal del balance.
La intención es que el usuario no solamente pueda consultar cuánto dinero tiene, sino también empezar a reconocer cómo se comporta su economía a través del tiempo.
14 Registro de gastos e ingresos
Registrar sin cambiar constantemente de contexto. Registrar una transacción es una de las acciones más frecuentes de la aplicación.
Por eso se diseñó un único formulario capaz de cambiar inmediatamente de gastos a ingresos mediante secondary tabs
La información relevante permanece visible durante el proceso de registro, evitando que el usuario tenga que navegar entre diferentes pantallas para completar una acción sencilla.
El objetivo fue hacer que registrar un movimiento fuera una tarea directa y fácil de repetir.
15 Sección Especial de Educación Financiera
Una aplicación que también ayuda a aprender. Wallet Tracker incorpora una sección dedicada a la educación financiera.
La idea es acercar a los usuarios contenidos y herramientas relacionadas con finanzas personales directamente desde la aplicación.
La sección contempla la incorporación de contenidos de influencers y referentes financieros provenientes de diferentes plataformas.
Además de aportar valor al usuario, este contenido puede convertirse en un activo para atraer nuevas personas hacia la plataforma.
De esta manera, Wallet Tracker no se limita al seguimiento de gastos: también busca acompañar al usuario en el proceso de comprender y mejorar sus hábitos financieros.
16 El resultado
De números aislados a información accionable
El resultado es una experiencia que reúne en un mismo producto las principales acciones necesarias para controlar las finanzas personales:
Registrar los movimientos.
Visualizar ingresos y gastos.
Analizar estadísticas.
Organizar los movimientos mediante categorías.
Aprender a través de contenidos de educación financiera.
La interfaz utiliza la visualización de datos como una herramienta para reducir la complejidad y permitir que el usuario pueda interpretar su situación financiera rápidamente.
17 Principales decisiones de diseño
A lo largo del proyecto hubo algunas decisiones que terminaron definiendo la experiencia.
01 — Priorizar el balance
La Home pone el balance en primer lugar porque representa la información financiera más relevante para una consulta rápida.
02 — Utilizar visualizaciones en lugar de depender solamente de números
Los gráficos permiten reconocer proporciones y diferencias de manera inmediata.
03 — Unificar el registro
Gastos e ingresos comparten una misma estructura de formulario para reducir la fricción al registrar movimientos.
04 — Organizar la información por categorías
Las categorías ayudan a transformar una lista de transacciones en una representación más útil de los hábitos de consumo.
05 — Incorporar educación financiera
La aplicación no solamente muestra información: también busca acercar recursos que puedan ayudar al usuario a comprender mejor sus finanzas.
18 Conclusión final
Diseñar para entender
Wallet Tracker comenzó como una idea para controlar gastos, pero el desafío de diseño terminó siendo más interesante:
¿Cómo podemos transformar información financiera cotidiana en algo que las personas puedan comprender y utilizar?
La respuesta estuvo en combinar registro, organización y visualización de datos dentro de una experiencia simple.
El proyecto también demuestra la importancia de elegir cuidadosamente qué información aparece primero, cómo se representa y qué acciones puede realizar el usuario a partir de ella.
Porque controlar el dinero no debe ser solamente mirar números. El usuario debe entenderlos para poder actuar.
