Proyecto conceptual · marca, usuarios y datos inventados · sin fines comerciales
Caso de estudio UX/UI · App móvil

Mitad: los gastos del depto, sin discusiones.

Diseño de una app para registrar gastos compartidos entre convivientes y saldar con una transferencia.

RolDiseño UX/UI
TipoProyecto conceptual
PlataformaApp móvil (iOS y Android)
PrototipoHTML, CSS y JS
Abrir el prototipo
01 · Contexto y problema

Compartir un depto es fácil. Compartir los gastos, no tanto.

Quienes alquilan con otras personas suelen anotar los gastos en una planilla o en el chat del grupo. Con el tiempo, nadie sabe bien quién pagó qué ni cuánto debe.

Mitad es una app para registrar los gastos del hogar y saber en cada momento quién le debe a quién, pensada para pesos argentinos y para saldar con una transferencia.

Problema

Quien adelanta un gasto pierde el hilo.

Cuando las cuentas no están claras, aparece la incomodidad de reclamar. Eso afecta la convivencia más que el monto.

Objetivos

Alcance: proyecto conceptual realizado como ejercicio de diseño. Los usuarios y las hipótesis son supuestos a validar con investigación real; no hay resultados medidos.
02 · Investigación

Qué sabemos y qué falta validar.

Plan de investigación para este proyecto. Los hallazgos de abajo son hipótesis de partida, no resultados.

A validar

Entrevistas

5 a 8 personas que comparten vivienda: cómo anotan hoy los gastos y qué los frustra.

A validar

Encuesta corta

Frecuencia de gastos compartidos, medio de pago y herramienta que usan hoy.

A validar

Análisis de alternativas

Relevar apps de división de gastos existentes: qué resuelven y qué no para el uso en Argentina.

Cómo se resuelve hoy (supuesto)

AlternativaLo que ofreceLo que probablemente falla
Planilla compartidaFlexible y gratuitaHay que armar las fórmulas; difícil de usar desde el celular
Chat del grupoTodos ya lo usanLos gastos se pierden entre mensajes; nadie suma
Apps de división de gastosCalculan saldosA relevar: soporte para alias y pesos, y la fricción para saldar
03 · Definición

Para quién diseñamos.

L
Proto-persona · supuestos

Lucía, 26

Diseñadora freelance. Comparte depto con dos amigos desde hace un año.

Necesita: anotar rápido lo que paga y no hacer cuentas.
Le frustra: reclamar plata a amigos.
T
Proto-persona · supuestos

Tomás, 29

Empleado de oficina. Paga bastante desde la app del banco y se olvida de avisar.

Necesita: ver cuánto debe y pagar sin vueltas.
Le frustra: no saber si ya saldó.
“¿Cuánto te debo? Pasame el alias y te transfiero.”
Frase representativa, inventada para el ejercicio

Preguntas “¿Cómo podríamos…?”

Recorrido del usuario (Lucía salda su parte)

Se acuerdaRevisa saldoPagaConfirma
AccionesRecibe un aviso del grupoAbre el grupo y mira su saldoCopia el alias y transfiere desde su bancoVuelve y toca “Ya pagué”
Piensa“Seguro debo algo”“¿Cuánto es y a quién?”“Que no se me pierda el alias”“Que quede registrado”
Ánimo
OportunidadAviso claroSaldo en una fraseAlias copiableConfirmación y estado “al día”

Ánimo estimado a partir de los supuestos, para validar en entrevistas.

Funcionalidades priorizadas (MoSCoW)

DebeDeberíaPodríaPor ahora no
Grupos · Agregar gasto · Dividir · Saldo · Saldar con aliasElegir quiénes participan · HistorialRecordatorios · Gastos recurrentesPagos dentro de la app · Escaneo de tickets
04 · Arquitectura y flujos

Un camino corto hasta saldar.

Mitad
Bienvenida
Crear grupo
Ya tengo un código
Grupos
Lista de grupos
Nuevo grupo
Grupo
Saldo personal
Gastos
Agregar gasto
Saldar
Actividad
Historial
Perfil
Datos y alias

Flujo principal: registrar un gasto y saldar

Abrir app→Elegir grupo→Agregar gasto→Monto y descripción→Quién pagó→¿Partes iguales?→Guardar→Ver saldo→Saldar→Copiar alias→Ya pagué

Decisión de flujo: el monto va primero porque es lo que la persona tiene en la cabeza; el resto tiene valores por defecto (paga “Vos”, partes iguales entre todos).

05 · Wireframes

Estructura antes que estilo.

Primeras versiones en baja fidelidad: sin color ni tipografía final, para decidir jerarquía y orden. Estos cuadros se obtuvieron quitando el estilo a las pantallas finales para mostrar la estructura.

Lista de grupos: el saldo es lo primero que se lee.
Lista de grupos: el saldo es lo primero que se lee.
Grupo: saldo, dos acciones y la lista de gastos.
Grupo: saldo, dos acciones y la lista de gastos.
Nuevo gasto: monto grande arriba, valores por defecto.
Nuevo gasto: monto grande arriba, valores por defecto.
Saldar: una deuda, un alias, un botón.
Saldar: una deuda, un alias, un botón.
06 · Guía de estilo

Un sistema simple y legible.

Dos colores con significado: verde para lo que está bien o a favor, coral para lo que se debe. Nunca se usa el color solo: siempre va acompañado de palabras (“Debés”, “Te deben”).

Verde
#0E7C66
Coral
#E5502F
Tinta
#14231F
Fondo
#F7F5F0
Verde claro
#DCF1EA

Tipografía

Outfit Bold 40Importes y títulos
Outfit Bold 22Subtítulos
DM Sans Medium 17Texto
DM Sans Bold 13Etiquetas

Reglas

Pantallas finales

Bienvenida
Bienvenida
Grupos
Grupos
Grupo
Grupo
Nuevo gasto
Nuevo gasto
Saldar
Saldar
Estado vacío: todo saldado
Estado vacío: todo saldado
07 · Prototipo

Se puede tocar.

El prototipo está construido en HTML, CSS y JavaScript. Los saldos se calculan en tiempo real: cargá un gasto, elegí quiénes participan y mirá cómo cambia el saldo; después saldá la deuda.

Abrir el prototipo
08 · Accesibilidad

Revisado con números.

Contraste calculado con la fórmula de WCAG 2.1 (mínimo 4,5:1 para texto normal).

ParColoresRatioMínimoResultado
Aa Texto principal#14231F sobre #F7F5F014.9:14.5:1Cumple
Aa Texto secundario#5E6F69 sobre #F7F5F04.9:14.5:1Cumple
Aa Botón principal#FFFFFF sobre #0E7C665.1:14.5:1Cumple
Aa Coral original como texto (descartado)#E5502F sobre #F7F5F03.5:14.5:1No cumple
Aa Deuda (coral oscuro, en uso)#B93A1E sobre #F7F5F05.2:14.5:1Cumple
Aa Saldo a favor#09604F sobre #F7F5F06.9:14.5:1Cumple
Aa Saldo sobre tarjeta oscura#FFFFFF sobre #14231F16.3:14.5:1Cumple
Hallazgo y corrección: el coral de la paleta (3,5:1) no alcanza el mínimo como texto sobre el fondo. Se reemplazó por un coral oscuro (#B93A1E, 5,2:1) en importes de deuda y avatares, y el coral original quedó solo para decoración. Es un ejemplo de decisión de diseño sostenida con datos.
09 · Prueba de usabilidad

Plan para validar el diseño.

Plan listo para ejecutar con 5 personas que compartan vivienda. Los resultados todavía no existen; se completan al hacer la prueba.

TareaÉxito si…Se mide
1. Cargar un gasto de $15.000 compartido con dos personasLo guarda sin ayudaTiempo y errores
2. Decir cuánto debe en el grupoLee el saldo correctoÉxito y comprensión
3. Saldar su deudaCopia el alias y confirmaTiempo y dudas

Métricas

Resultados

Pendiente. Esta sección se completa con datos reales de la prueba, y de ahí salen las iteraciones.
10 · Aprendizajes y próximos pasos

Lo que sigue.