En 2024 cursé el diplomado "Experiencia de Usuario para Productos Digitales" en la Universidad Católica de Valparaíso. Como parte del programa, trabajamos en un proyecto práctico en equipo —tres alumnos— colaborando con un cliente real: Neat Pagos, una plataforma que centraliza pagos con tarjetas de crédito, débito y prepago, y que busca simplificar transacciones como arriendos y gastos comunes, usualmente resueltas por transferencia.
In 2024 I completed the "User Experience for Digital Products" diploma at Universidad Católica de Valparaíso. As part of the program, we worked on a hands-on team project — three students — collaborating with a real client: Neat Pagos, a platform that consolidates credit, debit and prepaid card payments, aiming to simplify transactions like rent and shared expenses that are usually handled by bank transfer.
Nos planteamos la pregunta clave: ¿Qué necesitábamos saber de los clientes? A partir de esto, definimos el objetivo general de investigación.
We started with the key question: what did we need to know about customers? From there, we defined the overall research goal.
Objetivo
Goal
Conocer los comportamientos y hábitos financieros de las personas para identificar escenarios o problemáticas en su relación con los asuntos financieros.
Understand people's financial behaviors and habits in order to identify scenarios or problems in how they relate to their finances.
Para alcanzar este objetivo, decidimos realizar entrevistas a usuarios. Seleccionamos un perfil de usuario específico: personas de entre 25 y 55 años que se encargan personalmente del pago de sus cuentas.
To reach that goal, we decided to run user interviews. We selected a specific user profile: people between 25 and 55 who personally handle paying their own bills.
Agrupamos los hallazgos por tema para orientar el diseño.
We grouped the findings by theme to guide the design.
Orden y control
Orderly and in control
Se perciben como personas ordenadas: administran sus cuentas en Excel y usan tarjetas de crédito por sus beneficios, historial crediticio y para mantener el orden.
They see themselves as organized: they track accounts in Excel and use credit cards for the rewards, credit history and the sense of order they provide.
Fricción al pagar
Friction when paying
Pagar en distintos portales genera frustración, y la llegada de nuevos servicios termina desordenando aún más sus gastos.
Paying across different portals is frustrating, and each new service further scatters their expenses.
Desconfianza en la automatización
Distrust of automation
Los pagos automáticos no generan confianza por sí solos: prefieren mantener visibilidad y control sobre cada pago.
Automatic payments don't build trust on their own: they prefer to keep visibility and control over each payment.
Educación financiera autodidacta
Self-taught financial literacy
Perciben mucha desinformación en torno a las finanzas, así que se educan por su cuenta, a través de medios propios.
They perceive a lot of misinformation around finance, so they educate themselves through their own means.
Con la información que obtuvimos de las entrevistas definimos a nuestro User Persona: Benjamín Jorquera.
With the information gathered from the interviews, we defined our User Persona: Benjamín Jorquera.
Con el user persona definido y la información obtenida de las entrevistas, desarrollamos un User Journey Map. Esta herramienta nos permitió visualizar el recorrido del usuario, identificar momentos críticos y reconocer los principales puntos de dolor a lo largo de su experiencia. Este análisis fue clave para detectar oportunidades de mejora y diseñar soluciones más alineadas con sus necesidades.
With the user persona defined and the information gathered from the interviews, we built a User Journey Map. This tool let us visualize the user's path, identify critical moments and recognize the main pain points throughout their experience. This analysis was key to spotting opportunities for improvement and designing solutions more closely aligned with their needs.
Se informa, pero le quedan dudas
He looks into it, but questions remain
En el descubrimiento, Benjamín busca información y da una vuelta por el sitio, pero no despeja todas sus dudas.
During discovery, Benjamín looks for information and browses the site, but doesn't get all his questions answered.
Busca referencias que no encuentra
Looks for references he can't find
Pregunta a sus amigos si conocen el servicio; al no encontrar a nadie que lo use, se pregunta si será confiable.
He asks friends if they know the service; finding no one who uses it, he wonders if it's trustworthy.
Registra sus gastos cada mes
Logs his expenses every month
Como cada mes, se sienta a pagar cuentas y a hacer el registro de sus gastos.
Every month, he sits down to pay bills and record his expenses.
Evalúa si gastó más o menos
Checks whether he spent more or less
Como persona organizada y que valora tener el control, compara sus gastos con los del mes anterior.
As an organized person who values control, he compares his spending against the previous month.
No siente motivación de recomendar
Feels no motivation to recommend it
Aunque usa el servicio, no siente mayor motivación de recomendar la aplicación a sus amigos.
Even though he uses the service, he doesn't feel much motivation to recommend the app to friends.
Tras finalizar la etapa de empatizar, definimos el enfoque del proyecto a través de un problema y un objetivo:
After finishing the empathize stage, we defined the project's focus through a problem statement and a goal:
Los usuarios experimentan incertidumbre al utilizar herramientas digitales para gestionar sus finanzas personales.
Users experience uncertainty when using digital tools to manage their personal finances.
Incrementar el nivel de comprensión y la percepción de valor de Neat Pagos entre sus usuarios.
Increase how well users understand Neat Pagos and how much value they perceive in it.
En el marco del diplomado, se nos planteó como tarea intervenir tres flujos clave del producto. Tras analizar los objetivos establecidos y las necesidades identificadas, seleccionamos cuidadosamente los flujos a intervenir, asegurándonos de que estos fueran relevantes para abordar los problemas detectados y maximizar el impacto en la experiencia de los usuarios.
As part of the diploma, our task was to redesign three key flows in the product. After analyzing the stated goals and identified needs, we carefully selected which flows to work on, making sure they were relevant to the problems we'd found and would maximize the impact on the user experience.
Los tres flujos priorizados para intervenir:
The three flows prioritized for redesign:
Onboarding + agrega tu primera cuenta
Onboarding + add your first account
Paga tu cuenta + refiere a un amigo/a
Pay a bill + refer a friend
Sección de finanzas
Finances section
Como equipo decidimos enfocarnos en la aplicación móvil: las estadísticas compartidas por nuestro stakeholder mostraban mayor uso ahí que en la versión web, lo que nos dio una base sólida para tomar esta decisión.
As a team we decided to focus on the mobile app: the stats shared by our stakeholder showed higher usage there than on the web version, which gave us a solid basis for that decision.
Partimos con un inventario de contenido para construir un mapa de navegación con la estructura completa de la app. Sobre esa base, hicimos dos sesiones de Card Sorting que nos permitieron entender la forma en que los usuarios agrupaban y nombraban las etiquetas, y usar esos hallazgos para reorganizar el contenido de la app.
We started with a content inventory to build a navigation map covering the app's full structure. From there, we ran two Card Sorting sessions that let us understand how users grouped and labeled content, and used those findings to reorganize the app's content.
A partir de los resultados del Card Sorting, construimos un nuevo mapa de navegación que propone la reorganización de los flujos de la aplicación, estructurado en tres niveles de profundidad.
Based on the Card Sorting results, we built a new navigation map proposing a reorganization of the app's flows, structured across three levels of depth.
Modificaciones
Changes
Ya con la arquitectura de la información lista y con un mejor entendimiento de nuestros usuarios, nos pusimos manos a la obra e iteramos varias versiones de wireframes.
With the information architecture in place and a better understanding of our users, we got to work and iterated through several versions of wireframes.
Diseñamos los primeros wireframes para los flujos de onboarding y pago de una primera cuenta, con el objetivo de establecer una base clara para la experiencia de usuario. En esta primera iteración priorizamos el flujo de onboarding, enfocándonos en guiar al usuario de manera intuitiva durante sus primeros pasos en la aplicación y asegurándonos de que comprendiera su funcionalidad y valor desde el inicio.
We designed the first wireframes for the onboarding and first-account-payment flows, aiming to set a clear foundation for the user experience. In this first iteration we prioritized the onboarding flow, focusing on intuitively guiding the user through their first steps in the app and making sure they understood its functionality and value from the start.
Estos wireframes fueron evaluados mediante un testeo de guerrilla realizado con otros compañeros del diplomado. Esta actividad nos permitió obtener retroalimentación rápida y valiosa para identificar mejoras en la usabilidad y efectividad del diseño propuesto.
We evaluated these wireframes through guerrilla testing with other students from the diploma. This gave us fast, valuable feedback for identifying usability and effectiveness improvements to the proposed design.
Hallazgos del testeo
Testing findings
En la segunda iteración decidimos omitir el tutorial de la interfaz, ya que los resultados del testeo de guerrilla demostraron que esta ya era lo suficientemente intuitiva. Además, optimizamos el flujo de agregar una cuenta al incluir una pantalla de confirmación de datos, permitiendo al usuario revisar la información ingresada y minimizar errores al digitalizar sus datos.
In the second iteration we decided to drop the interface tutorial, since the guerrilla test results showed it was already intuitive enough. We also optimized the add-account flow by including a data confirmation screen, letting the user review the information entered and minimize errors when digitizing their data.
Antes de avanzar a las pantallas finales, construimos un UI Kit con los componentes base del sistema: botones, tabs, inputs, menú principal y headers. Definirlo primero nos permitió mantener consistencia visual entre pantallas y acelerar el diseño de alta fidelidad.
Before moving on to the final screens, we built a UI Kit with the system's base components: buttons, tabs, inputs, main menu and headers. Defining it first let us maintain visual consistency across screens and speed up the high-fidelity design work.
Con el UI Kit definido, diseñamos las pantallas de alta fidelidad. A modo de ejemplo, un antes y después de la pantalla "Mis cuentas": la versión original de Neat Pagos y la propuesta rediseñada.
With the UI Kit defined, we designed the high-fidelity screens. As an example, a before-and-after of the "My accounts" screen: the original Neat Pagos version and the redesigned proposal.
Estos son los tres flujos completos, navegables en Figma:
Here are all three complete flows, navigable in Figma:
Con los flujos de alta fidelidad definidos, evaluamos la experiencia con usuarios reales antes de dar por cerrado el diseño.
With the high-fidelity flows defined, we tested the experience with real users before considering the design final.
Pregunta de investigación
Research question
¿Cómo perciben los usuarios la interacción con la plataforma Neat Pagos y qué aspectos condicionan su uso?
How do users perceive interacting with the Neat Pagos platform, and what factors shape how they use it?
Objetivo
Goal
Medir la usabilidad y el nivel de comprensión del onboarding, agregar una primera cuenta, pagar una cuenta y la sección Finanzas.
Measure the usability and comprehension of onboarding, adding a first account, paying a bill, and the Finances section.
Realizamos un estudio evaluativo mediante entrevistas: un test de usabilidad remoto y moderado sobre la aplicación móvil, navegando un prototipo interactivo construido en Figma.
We ran an evaluative study through interviews: a remote, moderated usability test on the mobile app, navigating an interactive prototype built in Figma.
Medimos
We measured
Registramos mapas de calor de interacción en cada uno de los tres flujos evaluados.
We recorded interaction heatmaps for each of the three flows we tested.
La mayoría de los usuarios saltaba directo al registro: no notaban que las pantallas se podían deslizar.
Most users jumped straight to sign-up: they didn't notice the screens could be swiped.
La pantalla de éxito no resultaba lo bastante clara. El botón para recomendar se descartaba con facilidad, en contra del objetivo de aumentar las referencias, y la opción "por WhatsApp" generaba ambigüedad.
The success screen wasn't clear enough. The referral button was easily dismissed — working against the goal of increasing referrals — and the "via WhatsApp" option created ambiguity.
A los usuarios les costó identificar la sección, pero una vez encontrada reconocieron el gran valor que aportaba.
Users struggled to spot the section, but once they found it they recognized the significant value it added.
A través del cuestionario SUS, los usuarios percibieron que el producto es fácil de usar, que no requería mayor acompañamiento y que todo era coherente.
Through the SUS questionnaire, users perceived the product as easy to use, not requiring much guidance, and coherent overall.
A partir de estos hallazgos, definimos las siguientes mejoras:
Based on these findings, we defined the following improvements:
El rediseño de Neat Pagos nos permitió construir una experiencia con una arquitectura de información más clara, un onboarding guiado y una sección de Finanzas que aporta valor real al usuario. El testeo lo confirmó: un SUS de 82/100 y comentarios que destacaron la facilidad de uso y la coherencia del producto, además de hallazgos concretos que ya sabemos cómo resolver en la siguiente iteración.
The Neat Pagos redesign let us build an experience with a clearer information architecture, a guided onboarding, and a Finances section that delivers real value to the user. Testing confirmed it: a SUS score of 82/100 and comments highlighting the product's ease of use and coherence, along with concrete findings we already know how to address in the next iteration.