Todos los proyectos

Caso de estudio

in99

Una calculadora de ahorro móvil para una startup de servicios profesionales.

Cliente
in99
Rol
Diseñadora UX/UI
Ubicación
Madrid, España
Tipo
App móvil fintech
Pantallas del proyecto in99

Descripción

in99 ofrece servicios profesionales exclusivamente online. Gracias a una nueva alianza con entidades financieras, quiere acercar a sus clientes los productos de esas instituciones.

El encargo

Diseñar una app móvil que funcione como calculadora de ahorro: que permita calcular y planificar los ahorros en función de distintas variables financieras.

El reto

Equilibrar la complejidad financiera con la usabilidad: una herramienta flexible, clara y accesible que, además, cumpla la normativa financiera y proteja la privacidad de los datos personales.

  • Complejidad financiera

    Ingresos, gastos deducibles, impuestos y productos de ahorro en una sola herramienta.
  • Usabilidad

    Una interfaz clara y flexible para personas que no son expertas en finanzas.
  • Normativa y privacidad

    Cumplir la regulación financiera y proteger los datos personales.

Proceso de diseño

Seguí un proceso de Design Thinking en cinco fases, de la investigación a la validación.

  1. Empatizar

    Investigar las necesidades financieras de los usuarios.

  2. Definir

    Fijar los objetivos de la calculadora de ahorro y las funcionalidades necesarias.

  3. Idear

    Crear el flujo de usuario y wireframes interactivos para simular la experiencia.

  4. Prototipar

    Construir una interfaz atractiva y coherente, siguiendo principios de usabilidad y diseño centrado en el usuario.

  5. Probar

    Validar que la aplicación sea intuitiva y cumpla las expectativas de los usuarios.

User persona

Antonio Valdés, user persona del proyecto
“El ahorro para la educación de mis hijos es mi prioridad”.

Antonio Valdés

Edad
44 años
Ubicación
Madrid, España
Ocupación
Director de orquesta, autónomo
Familia
Casado, con 2 hijos y 1 en camino

Trabaja bajo el Régimen Especial de Trabajadores Autónomos. Con el tercer bebé en camino pasarán a ser familia numerosa, y su principal preocupación es ahorrar para la educación de sus hijos. Le gustan la música clásica y la danza contemporánea.

  • Necesidades

    Ahorrar dinero, equilibrar gastos y ahorro sin renunciar al estilo de vida de su familia y mejorar su situación económica.
  • Puntos de dolor

    Necesita una solución flexible y sin burocracia que le ayude, de forma práctica, a ahorrar y mantener el estilo de vida familiar.
  • Perfil digital

    Se maneja con soltura en internet, redes sociales, compras online y aplicaciones móviles.

Mapa de empatía

¿Qué piensa y siente?

Preocupaciones y aspiraciones

  • Ahorrar para la universidad de sus hijos
  • La llegada del nuevo bebé
  • Controlar sus ingresos

¿Qué oye?

Lo que dicen sus amigos y su familia

  • Su esposa, preocupada por los gastos
  • Planes de viaje con amigos
  • Su hijo mayor, emocionado por la universidad

¿Qué ve?

Su entorno y lo que ofrece el mercado

  • Amigos que viajan con sus hijos
  • Su hijo mayor entra en la universidad
  • El nacimiento de su bebé
  • Planes de jubilación

¿Qué dice y hace?

Actitud en público y con los demás

  • Profesional en su trabajo
  • Familiar
  • Comprometido
  • Amable con el personal de la orquesta
  • Los músicos con los que trabaja lo admiran

Dolores

Miedos, frustraciones y obstáculos

  • Su situación económica con 3 hijos
  • Todo lo que paga en la declaración de la renta
  • Que se complique el parto

Ganancias

Deseos, necesidades y logros

  • Mantener su calidad de vida y la de su familia
  • El bebé en camino
  • El premio de la orquesta

How Might We y Jobs To Be Done

Las preguntas How Might We (HMW) convierten los retos difíciles en oportunidades creativas. La teoría de Jobs To Be Done (JTBD) sostiene que las personas no compran productos: buscan soluciones a los problemas de su vida.

“Cuando haga la declaración de la renta este año quiero pagar menos y ahorrar para la universidad de mis hijos, tener dinero para lo que necesite el bebé que viene y planificar las vacaciones de verano”.

Antonio Valdés

How Might We…

  • HMW

    ¿Cómo podemos ayudar a Antonio a pagar menos en su declaración de la renta?
  • HMW

    ¿Cómo podemos ayudar a Antonio a controlar los gastos del nuevo bebé?
  • HMW

    ¿Cómo podemos ayudar a Antonio a ahorrar para la universidad de sus hijos?
  • HMW

    ¿Cómo podemos ayudar a Antonio a planificar los gastos de sus vacaciones de verano?

Jobs To Be Done

  • JTBD

    Si Antonio paga menos en la declaración de la renta, tendrá más dinero disponible para sus planes de ahorro.
  • JTBD

    Si Antonio controla los gastos del bebé que está por nacer, podrá planificar sin problemas las vacaciones de verano.

Hipótesis y experimento

Hipótesis

Usuarios como Antonio, de familias numerosas y con dificultades económicas, buscan estrategias para pagar menos impuestos, ahorrar para necesidades futuras y mantener su nivel de vida y el de su familia.

Experimento

El experimento se centra en optimizar el cálculo de gastos deducibles para maximizar el ahorro en su actividad económica:

  • Una consulta de gastos para registrar y categorizar los gastos asociados a la llegada del bebé.
  • Conexión con sus bancos para un registro detallado.
  • Una calculadora de gastos deducibles que muestra el ahorro acumulado, con acceso a los detalles fiscales y a la estimación de pagos futuros.
  • Asesoría fiscal, modelos de declaración y soporte para resolver consultas con Hacienda.
  • Descuentos por invitar a amigos a unirse a la plataforma.

La solución

Una calculadora de ahorro que ayuda a planificar y gestionar productos financieros para maximizar el rendimiento de las inversiones, adaptada al perfil y las metas de cada persona. Sus funciones clave:

  • Calculadora de ahorro

    Planificar el ahorro y ver cuánto se acumula según el perfil y las metas personales.

  • Contratación de productos financieros

    Acceder a los productos de las entidades asociadas para hacer crecer el rendimiento de las inversiones.

  • Invitar a amigos

    Obtener descuentos al invitar a otras personas a unirse a la plataforma.

Flujo de usuario

Estos son los pasos que sigue el usuario al usar la calculadora.

Diagrama del flujo de usuario de la calculadora de ahorro
Ver el diagrama a tamaño completo(se abre en una pestaña nueva)

Wireframes

Los wireframes de baja fidelidad representan la estructura básica de la interfaz: se centran en la disposición de los elementos, la funcionalidad y la organización del contenido, sin detalles visuales.

Mapa de wireframes de in99: registro, inicio, ingresos, gastos, productos, invitar amigos y perfil

Prototipo en alta fidelidad

El prototipo interactivo recorre el inicio de sesión y el camino feliz, la contratación de un plan de ahorro y la conexión con el banco.

  • Inicio de sesión con correo, contraseña y huella
  • Inicio con ingresos, gastos, impuestos y previsión del mes
  • Registro de un gasto deducible con su explicación fiscal
  • Resumen mensual del ahorro por categorías

Pruébalo tú: navega por las pantallas como lo haría Antonio.

Abrir el prototipo en Figma (se abre en una pestaña nueva)

Análisis heurístico

Para definir la UX evalué la interfaz con las 10 heurísticas de usabilidad de Jakob Nielsen, pautas que ayudan a detectar problemas potenciales y mejorar la experiencia. Así se aplica cada una en in99:

  1. Registro por pasos con barra de progreso, validación de campos y aviso de error de conexión
    01

    Visibilidad del estado del sistema

    El sistema debe mantener siempre informado al usuario, con una respuesta adecuada y en un tiempo razonable. Unas migas de pan o los pasos de un proceso ayudan a saber dónde se está en cada momento.

  2. Pantallas de gastos deducibles explicados con ejemplos cotidianos
    02

    Coincidencia entre el sistema y el mundo real

    Hablar el mismo idioma que los usuarios, con palabras y conceptos que les resulten familiares, y ordenar la información de forma natural y lógica.

  3. Pantallas de gastos con botón para volver y opción de añadir o guardar
    03

    Control y libertad del usuario

    Ofrecer siempre una forma de volver, eliminar, deshacer o editar.

  4. Flujo del plan de ahorro con el mismo botón principal en todas las pantallas
    04

    Consistencia y estándares

    Los usuarios no deberían preguntarse si palabras, situaciones o acciones distintas significan lo mismo. Si un botón de acción es verde, debe verse igual en todas las pantallas.

  5. Formulario con los requisitos de cada campo indicados de antemano
    05

    Prevención de errores

    Antes de diseñar buenos mensajes de error, hay que intentar evitarlos. En los formularios, explicar bien los requisitos de cada campo.

  6. Resumen de ahorro con la información del paso anterior siempre visible
    06

    Reconocer mejor que recordar

    Evitar que el usuario tenga que memorizar objetos, acciones u opciones: deben estar visibles para no tener que recordar información de un paso a otro.

  7. Pantalla de ahorro con accesos rápidos
    07

    Flexibilidad y eficiencia de uso

    Los atajos, invisibles para quien empieza, aceleran la interacción de los usuarios expertos. Así el sistema sirve a ambos.

  8. Pantallas limpias con la información esencial
    08

    Diseño estético y minimalista

    Menos es más: cada dato extra compite con la información importante y le resta jerarquía.

  9. Mensajes de error claros con la solución propuesta
    09

    Reconocer, diagnosticar y recuperarse de errores

    Un lenguaje común y llano ayuda a identificar el problema y sugiere una solución.

  10. Pantallas de ayuda con buscador, información y preguntas frecuentes
    10

    Ayuda y documentación

    Lo ideal es que la app se use sin documentación. Aun así, un buen buscador, un asistente o unas buenas preguntas frecuentes ayudan en caso de duda.

1 / 10

Próximo paso: probar con usuarios

Con la solución definida, toca validarla sin olvidar que no somos el usuario final. Estos son los métodos propuestos:

  • Test de percepción

    Mostrar una pantalla durante 2 a 5 segundos y preguntar después qué se ha entendido de ella.
  • Mapas de calor y grabaciones

    Observar cómo se desplazan los usuarios y qué zonas captan su atención mientras usan la app.
  • Test con usuarios

    Probar con personas reales para alinear el diseño con sus expectativas y corregir errores antes del lanzamiento.
¿Hablamos?Envíame un mensaje