Metodología
- Entender al usuario
- Comenzar el diseño
- Perfeccionar el diseño
- Avanzar
El producto
Se trata de una aplicación y sitio web para elaborar presupuestos. El objectivo es ayudar a los adultos jóvenes en ahorrar dinero. El producto debe proponer una experiencia del usuario agradable y simple, incluyendo soluciones a los problemas de los usuarios.
Duración proyecto
Principio del proyecto – Julio 2024
Fin del proyecto - Julio 2024
El problema
Los usuarios necesitan conocer sus capacidades financieras de forma simple, rápida y sencilla porque quieren ahorrar, presupuestar y planear proyectos a corto y largo plazo.
El objetivo
Nuestro sitio web permitirá simular fácilmente la capacidad financiera del usuario, y los usuarios registrados podrán acceder a opciones mas avanzadas. La APP permitirá acceder a sus objetivos, y recibir notificaciones y/o alertas relacionadas.
Mi rol
Diseñador UX – VISUAL Mi rol cubre todo el processo de diseño, desde la investigacion pasando por los esquemas, wireframes, prototipos…
Responsibilidades
Proyecto realizado de su inicio hacia su final. Investigación de usuarios, creación de esquemas, creación de prototipos, etcétera.
Entender al usuario
- Investigación de usuarios
- Personas
- Planteamientos del problema
- Mapas de recorrido del usuario
Investigación sobre los usuarios: resumen

La investigación de usuarios esta basada en una investigación primaria y cualitativa.
Prevención del sesgo en la recopilación de datos.
Investigación previa :
Permite conocer los hábitos de los usuarios participando, y permite seleccionar 4 usuarios para una encuesta mas detallada.
He trabajado como taquillero en una piscina de verano, lo que me permitio hablar con muchos adultos jovenes, saber mas sobre ellos, sus dificultades y sus espectativas.
Investigación primaria :
La información proviene de interacciones directas con usuarios (entrevistas y encuestas).
En mi entorno personal, como en mi entorno de redes sociales.
Investigación cualitativa :
los datos han sido recopilados por observaciones, conversaciones, y cuestionarios.
Este método para comprender las necesidades de los usuarios.
Investigación sobre los usuarios: puntos débiles

Tiempo dedicado
Los usuarios usan por mayoria los telefonos para acceder a internet, cuentas de banco… Pasan mucho tiempo en las redes sociales.

APP movil
Los usuarios tienen diferentes tipos de dispositivos. Para funciones mas avanzadas, prefieren utilizar un ordenador y la gran mayoría tienen portables.

APP para todos
Todos los usuarios utilizan el sistema android – no se pueden permitir un dispositivo Apple. Le gustan recibir notificaciones, siempre y cuando las pueden configurar y personalizar.

Recorrido
El sitio web y la APP se centran en dos recorridos principales: modo invitado y modo registrado. El usuario tiene la posibilidad de retroceder o avanzar en cada momento.
Persona : Honorio

Planteamiento del problema :
Honorio es una persona que tiene un empleo junior que necesita ver su capacidad financiera de manera simple, fácil, rápida porque quiere ahorrar, presupuestar y planear proyectos.

Honorio BAJO
Edad: 28 años
Educación: Universidad
Ciudad: Barcelona
Familia: soltero
Ocupación: ingeniero
“Empleado Junior - Necesita ahorrar para dar vida a sus proyectos.”
Objetivos
Conocer su capacidad de ahorro.
Obtener consejos adaptados a su situación.
Hacer fácilmente presupuestos.
Frustaciones
Nervioso cuando le preguntan demasiadasinformaciones personales. Estresado cuando hay demasiados detalles o términos técnico.
Honorio esta pensando en varios proyectos. Quiere saber si tiene la capacidad financiera para lanzarse, y sino como ahorrar para conseguirlos. Necesita consejos simples y sencillos, ya que no esta acostumbrado a la finanza y a la informática.
Persona : Inés

Planteamiento del problema :
Inés es una persona joven con primer empleo que necesita ver presupuestos a corto y largo plazo de forma simple y personalizada porque quiere gestionar su presente y planificar su futuro.

Inés MARTINEZ
Edad: 24 años
Educación: Universidad
Ciudad: Sevilla
Familia: soltera
Ocupación: Comercial
“Primer Empleo - NecesitaGestionar el presente y planificar el futuro.”
Objetivos
Gestionar a corto y a largo plazo.
Tener metas y progresión.
Presupuestos adaptados a su situación real.
Frustaciones
Enfadada cuando los resultados son generales. Decepcionada cuando no puede ponerse objetivos y seguirlos.
Inés tiene su primer trabajo y esta mui ilusionada. Quiere gestionar correctamente su presente por ejemplo alquilar vivienda, pero también planificar el futuro para dar vida a proyectos a largo plazo. Inés es mui digitalizada, y quiere herramientas adaptadas a su realidad.
Mapa de recorrido del usuario
El mapa muestra la serie de experiencias que tiene un usuario a medida que va realizando acciones para alcanzar y completar su objetivo.
Las acciones de los usuarios en esta etapa del proceso de diseño tienen que ver menos con la interacción directa con el producto y más con qué hace el usuario a lo largo del día mientras intenta lograr su objetivo.
Persona: Honorio

Objetivo: una forma rápida y sencilla de conocer su capacidad financiera.
Acción
Recopilar ingresos
Recopilar gastos
Hacer presupuesto
Buscar soluciones
Iniciar proyecto
Lista tareas
Buscar hojas de paga
Buscar otros
Sumar ingresos
Listar todos los gastos
Sumar gastos
Ingresos - gastos
Ahorros
Evaluar coste proyecto
Mas ingresos
Menos gastos
Ahorrar
Otras alternativas
Plan corto y largo plazo
Contactos profesionales
Sentimiento
Entusiasmado por calcular sus ingresos
Preocupado por cometer errores en las cuentas
Ansioso por evaluar los gastos
Preocupado por no olvidar nada
Estresado por evaluar correctamente su presupuesto
Miedo de los imprevistos
Perdido a la hora de buscar soluciones o alternativas
Aliviado de iniciar un proyecto con presupuesto
Esperanzado de que no surge un imprevisto
Oportunidades
Ofrecer una forma simple de calcular los ingresos
Simulación y detalles
Ofrecer una forma simple de evaluar los gastos
Simulación y detalles
Ofrecer una aplicación para calcular de forma sencilla presupuestos
Crear una aplicación que ofrezca soluciones y alternativas
Crear un espacio personal para poder guardar los presupuestos y poder modificarlos
Persona: Inés

Objetivo: gestionar el presente y planear el futuro.
Acción
Mira su banco
Compara contratos
Simula créditos
Optimiza su presente
Simula proyectos
Lista tareas
Consulta ingresos
Consulta gastos
Hace categorías
Mira ahorros
Electricidad
Digitales
Otros
Coche
Hipoteca
Otros
capacidad
Ahorros
Otros
Hipoteca
Viajes
Jubilación
Sentimiento
Decepcionada de las opciones para personalizar datos
Satisfecha con los indicadores rápidos
Cansada de tanto buscar las mejores ofertas
Contrariada con las permanencias
Molesta por tener que indicar datos personales en cada simulador
Irritada cuando no puede ajustar objetivos y metas
Frustrada cuando no encuentra soluciones
Nerviosa cuando no se puede proyectar en el futuro
Deprimida cuando tiene respuestas binarias: si o no
Oportunidades
Crear un sitio web para recuperar datos bancarios y catalogar los datos
Crear un sitio web que pueda comparar las ofertas automáticamente
Ofrecer una forma de simular créditos de forma personalizada según los proyectos
Crear un sitio web que permita tener metas y objetivos, con resultados
Ofrecer presupuestos para ahorrar a largo plazo, o por otros proyectos
Comenzar el diseño
- Esquemas de página en papel
- Esquemas de página digitales
- Prototipo de baja fidelidad
- Estudios de usabilidad
Estructura del sitio web adabtable
El sitio web adaptable está estructurado de manera simple para que el usuario se focalice a buscar directamente lo que necesita.
Las opciones de buscar estarán presentes en los ajustes de los consejos y bonos para poder filtrarlos – facilita la simplicidad para el usuario.

Esquemas de página en papel
Tomarse el tiempo para elaborar en papel iteraciones de cada pantalla de la aplicación garantizó que los elementos que llegaron a los esquemas de página digitales fueran los correctos para abordar los puntos débiles del usuario.
Para la pantalla de inicio, prioricé el acceso a la capacidad financiera en 1 click.
Una imagen de los esquemas en papel de la página de inicio del sitio web en versión móvil.
Se utilizaron estrellas para marcar los elementos de cada boceto que se usarían en los primeros esquemas de página digitales.

Esquemas de página digitales
A medida que la fase inicial del diseño continuaba, me aseguré de realizar los diseños de las pantallas en base a los comentarios y a los resultados de la investigación de usuarios.

Herramienta utilizada: FIGMA
En esta fase, diseñe varios esquemas para la aplicación y para el sitio web adaptable.
Estrategia: móvil first para el sitio web.
Aplicación - esquema de baja fidelidad

Sitio web - esquema de baja fidelidad versión Desktop

Prototipo de baja fidelidad - aplicación
Initio : el usuario puede conectarse, registrarse, entrar en modo invitado.
El usuario puede simular su capacidad financiera en modo invitado y registrarse.
En modo conectado, el usuario accede a la página de inicio donde ve sus objetivos y sus metas.
Las puede modificar, y/o tener un sistema Copiloto que recibe, clasifica y busca soluciones a partir de su cuenta bancaria, de manera anónima y confidencial.
El sitio web tiene otro enfoque: en el proceso de inicio, el usuario esta invitado a simular su capacidad financiera.
Después, presentar las ventajas de copiloto, que necesita que los usuarios estén registrados, u descarguen la aplicación.

Herramienta utilizada: FIGMA

Estudios de usabilidad: descubrimientos
Procedimiento de los estudios de usabilidad: dos rondas.
La primera ronda ayuda a diseñar los esquemas – paso de wireframes mockups.
La segunda, se centra en un prototipo de alta fidelidad, revelando los aspectos de los mockups que necesitan mejoras.
Descubrimientos de la Ronda 1
- En la version APP, los usuarios no entendían el recorrido. He tenido que empezar de 0 y trabajar en otra versión.
- En la version sitio web, los usuarios necesitaban entrar informaciones para un resultado de capacidad financiera mas personalizado.
Descubrimientos de la Ronda 2
- Verificar los contrastes / cambiar si necesario.
- La opcion close no hace falta cuando estas en modo conectado.
- mejorar los colores y formas de los botones de call to accion.
Perfeccionar el diseño
- Maquetas
- Prototipo de alta fidelidad
- Accesibilidad
Esquemas - aplicación
Los usuarios no entendían el recorrido en mi primera versión de esquemas.
He cambiado, añadido y modificado varios contenidos.
1- Conectarse, registrarse o entrar como invitado.
2- recorrido para cada modo.
Aplicación - esquema de baja fidelidad versión 1

Aplicación - esquema de baja fidelidad versión 2

Maquetas
A medida que la fase inicial del diseño continuaba, me aseguré de realizar los diseños de las pantallas en base a los comentarios y a los resultados de la investigación de usuarios.

Herramienta utilizada: FIGMA
En esta fase, diseñe varias maquetas para la aplicación y para el sitio web adaptable.
Ejemplos de maquetas de la aplicación.
Debido al tamaño, todas las pantallas no están presente en esta presentación.

Ejemplos de maquetas del sitio web adaptable.
Debido al tamaño, todas las pantallas no están presente en esta presentación.

Alta fidelidad prototipo
Captura de pantalla del prototipo del sitio web adaptable en versión móvil.
El prototipo de sitio web solo permite el recorrido de capacidad financiera.
El prototipo de la APP permite también el recorrido de registrarse, modo invitado y modo conectado.

Herramienta utilizada: FIGMA

Condiciones de accesibilidad

Colores
Varias evoluciones a lo largo de los diseños.
Por ejemplo, en la versión final, el color azul permite alcanzar contrastes superiores a 5 (color de texto sobre azul).

Call to accion
Para no perder el usuario en su recorrido, todos los botones tienen el mismo estiloy color azul.
Solo hay el botón Close que tiene un estilo diferente – redondo – pero con los mismos colores.

Arquitectura
Los elementos estan grupados visualmente.
El texto combina dos tipografías con tamaños diferente según la importancia del contenido (titulo…).
Avanzar
- Conclusiones
- Proximos pasos
Conclusiones

Impacto
Cuando el usuario visita el sitio web, puede facilmente simular su capacidad financiera.
El enfoque siguiente es crear una cuenta y utilizar la APP para un uso mas personalizado.
El usuario tiene la oportunidad en cada paso de su recorrido de poder retroceder al paso anterior o de anular.

Qué aprendi
Los usuarios necesitan tener puntos de referencia simples y llamativos para poder acceder o retroceder a lo largo de su recorrido
Varias opciones no se han desarrollado para mantener la simplicidad y rapidez del proceso.
Mantener un contacto con usuarios y profesionales permite mejorar el producto a lo largo de su desarrollo.
Por ejemplo, mi primera version de los esquemas de la APP perdia el usuario en su recorrido.
Próximos pasos

Evaluar la opción de poder elegir las opciones o los objetivos deseados en la pagina de inicio en modo conectado.
Permite a los usuarios que no quieren ver todo, centrarse en lo que necesitan.
La experiencia sera mas personalizada.

Evaluar como se puede implementar las notificaciones o las alertas cuando un objetivo esta complido, o vencido.

Mejorar la manera de mostrar los resultados e objetivos, para que el usuario pueda elegir un visual que le coresponda mejor.
¡ Pongámonos en contacto !
Les agradezco el tiempo dedicado a consultar este proyecto.
Muchas gracias.
Les invito a envíame un mensaje.