Calculadora
Hipotecaria PRO

Cómo hicimos visible el dinero que los bancos esconden en sus tablas — y por qué el problema era de claridad, no de matemáticas.

Año2024
Duración3 meses
Usuarios entrevistados8 personas con hipoteca activa
Disciplinas
UX ResearchUI DesignIteración
Resultado500+ simulaciones en 3 meses
01
// El detonador

El problema que nadie nombraba

Empezamos con una señal débil: mensajes de usuarios que llegaban sin buscarlos. Gente que firmó su hipoteca hace 3, 5 o 10 años y seguía sin entender por qué su saldo no bajaba. No era ignorancia financiera — era que la industria hipotecaria construyó sus tablas para que fueran imposibles de leer.

La primera calculadora hipotecaria de Cooper Labs resolvía el cálculo, pero no la confusión. La gente sabía cuánto iba a pagar al final, pero no por qué, ni qué podía hacer al respecto.

"Firmé mi hipoteca hace 5 años y todavía no entiendo bien la tabla de amortización. Mi banco nunca me la explicó."

— Usuario entrevistado, 34 años, CDMX
📋 Notas de campo — Sesiones de entrevista inicial
[ Foto de tus notas de entrevista ]

Notas de las primeras 8 entrevistas con usuarios con hipotecas activas. Cada sesión duró ~45 minutos.

02
// Research

Lo que encontramos cuando preguntamos

Hablamos con 8 personas que tenían hipotecas activas en México. La metodología fue simple: pedimos que nos mostraran su estado de cuenta y que nos explicaran, con sus palabras, cómo funcionaba su crédito. Los silencios fueron el dato más importante.

03
// Definición del problema

De síntomas a diagnóstico

"Las personas con hipotecas toman decisiones financieras cruciales sin entender el impacto real de sus pagos. La información existe, pero está enterrada en jerga bancaria. Nuestra tarea: hacer visible lo que los bancos hacen invisible."

— Definición del reto de diseño
04
// Ideación

Los bocetos que no funcionaron

La primera versión que dibujamos en papel tenía un problema clásico: diseñamos para lo que nosotros entendíamos, no para lo que el usuario necesitaba ver. Mostrábamos demasiados números en simultáneo.

✏️ Bocetos — Primera ronda de ideación
[ Foto de bocetos en papel / cuaderno ]

Primera ronda de bocetos. Intentamos mostrar las 4 estrategias en una tabla. Era demasiada información para procesar de un vistazo.

La decisión que cambió todo fue dejar de pensar en "calculadora" y empezar a pensar en "comparador de historias". Queríamos que el usuario viera la diferencia entre un futuro y otro.

05
// Prototipado y testing

Lo que las pruebas nos rompieron

Con el primer prototipo en Figma, hicimos 3 sesiones de testing. La tarea era: "Encuentra cuánto ahorrarías si pagaras quincenal en lugar de mensual".

// Antes del testing

Las gráficas mostraban el balance mes a mes. Los ejes tenían etiquetas técnicas. El ahorro total estaba al fondo de la pantalla, después de toda la información.

// Después del testing

El ahorro total pasó a ser el número más grande, arriba del todo. Simplificamos las etiquetas de los ejes. Añadimos tooltips que aparecen al pasar el cursor.

"Me gusta, pero... ¿dónde está el número grande? Quiero ver de un golpe cuánto ahorro."

— Sesión de testing, usuario #2
06
// Solución final

La versión que funciona

La Calculadora Hipotecaria PRO compara 4 estrategias de pago en una sola pantalla: mensual estándar, quincenal, con aportación extra mensual, y quincenal con aportación extra. Las gráficas muestran la evolución del saldo. El ahorro total está siempre visible, siempre actualizado.

🖥️ Interfaz final — Calculadora Hipotecaria PRO
[ Screenshot de la interfaz final ]
500+
simulaciones en los primeros 3 meses de lanzamiento
4:30
minutos promedio de engagement por sesión
~$500K
MXN promedio de ahorro visualizado por usuario
07
// Cierre

Lo que me quedó de este proceso

🔍
El problema nunca es lo que parece al principio
Llegamos pensando que el problema era "la gente no usa calculadoras hipotecarias". El problema real era que no saben qué preguntarle a una. Son problemas completamente distintos.
👁️
La jerarquía visual es una decisión de diseño con consecuencias reales
Poner el ahorro total como número principal no es solo estética. Es decidir que el usuario merece ver primero lo que más le importa, no lo que es más fácil de calcular.
🔄
Iterar no es un paso del proceso — es el proceso
La primera versión siempre está incompleta. No porque seas mal diseñador, sino porque hay cosas que solo descubres cuando alguien más usa lo que construiste.

Prueba la herramienta → cooper-labs.com/calculadora_hipoteca_pro