Módulo de
gestión de tarjetas
Proyecto de UX/UI orientado a simplificar la visualización y gestión de datos de tarjetas dentro de una app financiera, priorizando la comprensión de conceptos críticos y la toma de decisiones informadas por parte del usuario.
USER PERSONA
DEFINIENDO A NUESTRO USUARIO
32 Años
Soltera
Ingresos medios
Medellín/Colombia
Consumidora consciente
BIOGRAFÍA
Laura es una mujer organizada que administra tanto su negocio como sus finanzas familiares. Usa su tarjeta de crédito para compras online y pagos en cuotas. Aunque es ágil con apps, se frustra cuando la información no es clara. Busca simplicidad, transparencia y recordatorios que le den seguridad y control.
PERSONALIDAD
-
Responsable
-
Pragmática
-
Cautelosa
-
Orientada al control
GUSTOS
-
Café
-
Lectura
-
Música
-
Naturaleza
Laura Torres
ADMIN. EN TIENDA DE ROPA
"Quiero entender mis finanzas en segundos, no perder tiempo decifrando un montón de información innecesaria y confusa".
INTERESES
-
Compras Online
-
Facilidad en pagos digitales
-
Ahorro de tiempo
MOTIVACIONES
-
Controlar gastos
-
Información clara
-
Aprovechar descuentos
FRUSTRACIONES
-
Información poco clara
-
Dificultad para encontrar información
-
Temor a fraudes
INSIGHT
NECESIDADES CLAVE
DEL USUARIO
Para identificar necesidades y errores de uso, se realizaron entrevistas mixtas (moderadas y test de usabilidad) a cinco personas alineadas con el User Persona definido. Esto permitió identificar los insights clave que guiaron el diseño de mejoras en el módulo de tarjetas.
01
Claridad y comprensión
Entender de manera sencilla conceptos financieros como cupo total, cupo disponible, pago mínimo, intereses y fechas de corte/pago.
02
Transparencia en los movimientos
Identificar fácilmente cada transacción, distinguir entre compras confirmadas y pendientes, y comprender cargos adicionales o intereses.
03
Confianza y control
Tener una visión organizada y confiable de sus gastos mensuales que le permita planear pagos, evitar confusiones y tomar mejores decisiones financieras.
Generando incertidumbre y aumentando el riesgo de error.
Solución: Evitar terminos técnicos, uso de tooltips.
FALTA DE DETALLE EN LA INFORMACIÓN
Generando la percepción de cobros injustificados y desconfianza.
Solución: Desgloce en detalle de los movimientos por items claros.
SATURACIÓN DE INFORMACIÓN Y FALTA DE JERARQUÍA
Generando sobrecarga cognitiva y frustración.
Solución: Priorización y segmentación de la información.
FALTA DE CONSISTENCIA EN EL LENGUAJE UTILIZADO
Retrasando la comprensión de datos y generando confusión.
Solución: Establecer una guía de lenguaje consistente.
Los wireframes sirvieron como punto de partida para explorar la disposición de los elementos y definir la lógica de navegación dentro del módulo de tarjetas. Más que el detalle visual, se enfocaron en probar la ubicación de la información clave y la secuencia de pantallas, facilitando iteraciones rápidas y ajustes tempranos antes del diseño final.
Has click en la imagen
para hacer zoom
LENGUAJE Y CONSISTENCIA
Glosario controlado, reglas de nomenclatura, microcopy en contexto, tooltips/ayudas.
ARQUITECTURA
Y JERARQUÍA
Según contexto, criticidad de información, prioridad, frecuencia de uso y nivel de esfuerzo.
FLUJOS
Y FRICCIÓN
Objetivo del usuario, accesos rápidos, ítems desglosados y secuencia lógica de uso.
ACCESIBILIDAD
Y LEGIBILIDAD
Contraste AA/AAA, tamaños mínimos, foco visible, labels claros y edge cases.
USABILIDAD EN ACCIÓN
CICLOS DE TESTO Y
MEJORA DEL PROTOTIPO
Una vez confirmadas las decisiones de diseño, es necesario pasar por ciclos de testeo y mejoras continuas, donde cada hallazgo permitirá ajustar la experiencia de forma precisa. Las pruebas se realizan bajo el siguiente protocolo:
01.
Definir objetivos y métricas
Hipótesis: “Los usuarios identificarán fechas clave y el estado de una transacción sin ayuda”.
KPI de test: tasa de éxito por tarea, tiempo por tarea, errores críticos, mis-taps/mis-clicks.
Criterios de salida: ≥90% éxito en “ver fecha de corte/pago” y “distinguir pendiente vs confirmada”.
Jerarquizar objetivos: Según el impacto que generan en el usuario y en el negocio.
02.
Protocolo de pruebas
Definir: Muestra (Tamaño, user persona), modalidad (Moderado, no moderado, mixto), herramientas (Prototipo + plataforma de testing Maze).
Establecer tareas clave realistas, como: Encontrar fecha de corte y fecha de pago / Revisar detalle de una compra e identificar si está pendiente o confirmada / Localizar y entender otros cargos e intereses.
Instrumentación: grabación de pantalla/audio, marcación de errores y comentarios verbales.
03.
Análisis y priorización de resultados
Matriz de analisis: Tarea×Participante con éxitos, bloqueos, citas y tiempos.
Identificación de satisfacción percibida: A través de escala SUS o rating rápido.
Matriz de priorización: Impacto×Esfuerzo, teniendo en cuenta la afectación de tareas centrales, la generación de costos extra o de métricas clave como retención o satisfacción.
04.
Iteración y validación
A/B testing: De forma guiada en las pantallas ajustadas, repitiendo tareas y comparando contra la línea case.
Éxito: Debe estar respaldado por una mejora estadísticamente relevante en éxito, tiempos y reducción de errores críticos.
Hallazgos y cambios: Documentación detallada (qué cambiamos, por qué, evidencia y pantallas afectadas).
RESULTADOS OBTENIDOS
CONCLUSIONES Y APRENDIZAJES CLAVE
El proyecto evidenció cómo un diseño centrado en el usuario, sumado a un proceso iterativo de investigación, pruebas y ajustes, genera experiencias financieras más claras, confiables y fluidas. La mejora continua permitió optimizar la jerarquía visual, reducir fricciones en los flujos y ofrecer soluciones más intuitivas, lo que se traduce en mayor satisfacción, confianza y fidelidad del usuario, aportando también valor estratégico al negocio.
