Control del dinero
Rediseño modelo disponibilidad de saldos para comercios de Wompi
Diseñar no es solo crear interfaces
Participación temprana en la definición del producto, conectando objetivos de negocio con necesidades de usuario para orientar decisiones clave
Investigación, observación y validación para comprender el contexto y las necesidades, tomando decisiones basadas en evidencia.
Transformación de hallazgos en experiencias claras, consistentes y escalables, diseñadas con estructura, criterio y viabilidad técnica.
Acompañamiento en la implementación del diseño, combinando conocimiento técnico y comprensión del proceso para garantizar coherencia.
Medición y análisis continuo del desempeño de la experiencia, su impacto en las personas y su contribución a los objetivos del negocio.
ICDL Certificado ↗
Coursera Certificado ↗
Universidad del Rosario Certificado ↗
Platzi
Platzi
Juan David Saab — Consultor UX y Accesibilidad
Sandra Quintero — Digital & Mobile Business Expert
Xpert (Adobe Authorized)
Cymetria Training (Adobe Authorized)
Universidad Central — Bogotá, Colombia · Profesional
Corp. Surámerica Educación Superior — Bogotá, Colombia · Técnico
Diseñador de Experiencia UX/UI Senior
Medellín, Colombia
Acompañamiento estratégico, analítico y creativo en equipos ágiles. Diseño y prototipado de productos digitales. Co-creador y admin del Sistema de Diseño.
Diseñador de Experiencia UI Senior
Medellín, Colombia
Colaborador Sistema de Diseño. Definición de patrones visuales transversales y prototipos en foros de la organización.
Diseñador UI Senior Bancolombia
Medellín, Colombia
Colaborador Sistema de Diseño, Diseño de Interfaces, Wireframes, Prototipado.
Diseñador UX/UI Senior
Ciudad de México, México
Co-creador y admin Sistema de Diseño, Diseño de Interfaces, Wireframes, Prototipado.
Senior Graphic Web Designer
Miami, USA
Branding, identidad visual, wireframes, maquetación Html5/CSS3 RWD, publicidad display animada e interactiva.
Productor Digital Comercial
Bogotá, Colombia
Creación y ejecución de estrategias digitales para marcas de radio y televisión. Coordinación de equipos de tecnología, producción y diseño.
Productor Digital
Bogotá, Colombia
Gestión de productos digitales ElTiempo.com, CarroYa.com, ElEmpleo.com, Metrocuadrado.com. Diseño UI/UX y maquetación Html5/CSS3 RWD.
Antes de este proyecto, los comercios no tenían control sobre su propio saldo en Wompi: el dinero se dispersaba automáticamente al día siguiente a su cuenta registrada, sin posibilidad de intervenir. Esto les impedía administrar su liquidez y realizar envíos según su necesidad.
El dinero dejó de tener un único destino automático. Mapeé el flujo existente, definí la nueva lógica de casuísticas y estructuré el user flow completo — convirtiendo un proceso automático e inevitable en una decisión activa del comercio.
Los estados del dinero necesitaban un nuevo lenguaje visual y semántico. Rediseñé el sistema para que cada bolsillo tuviera un lugar claro y el comercio pudiera leerlos de un vistazo.
Se diseñó un sistema con ramificación progresiva que permite incorporar nuevos destinos sin romper la experiencia existente.
Evalué términos, conduje user testing con comercios reales y validé que la narrativa funcionara. El 85% de los términos fueron interpretados correctamente en las pruebas.
Las empresas que necesitaban dispersar pagos a múltiples beneficiarios —nómina, proveedores, reembolsos— no contaban en la banca tradicional con una experiencia diseñada para esa operación. Los flujos existentes estaban pensados para transferencias individuales: uno a uno, sin programación, sin lotes, sin trazabilidad por lote. Bancolombia necesitaba una plataforma que resolviera esa operación de forma centralizada, con control, flexibilidad y escala.
El producto manejaba operaciones inherentemente complejas: lotes con decenas de destinatarios, archivos de carga masiva, programación recurrente, roles de aprobación. El reto fue que ninguna de esas capas se sintiera como fricción. Cada flujo se evaluó para que el paso siguiente fuera obvio, la información necesaria estuviera disponible en el momento justo y el error tuviera salida clara.
Diseñé dos rutas de creación de pago —uno a uno y lote con archivo— como decisión explícita del usuario antes de iniciar el flujo. Cada opción tenía un caso de uso distinto y una carga operativa diferente, por lo que separarlas evitó que un flujo genérico fuera inadecuado para ambas.
Estructuré el flujo en tres pasos secuenciales: Preparación → Destinatarios → Validar y Enviar. Puse el tipo de transacción, la cuenta origen y la fecha de pago en el primer paso, porque esas variables condicionaban todo lo que venía después. El usuario definía el marco antes de poblar el lote.
Separé "Inmediato" y "Programado" como opciones con comportamiento distinto. El modo programado desplegaba fecha, hora y recurrencia. El modo inmediato mostraba una nota informativa sobre tiempos ACH para gestionar expectativas.
En el paso de destinatarios diseñé tres formas de agregar: nuevo destinatario con formulario completo, destinatario favorito desde un listado administrado, y edición o eliminación de destinatarios ya agregados. Cada ruta tuvo su propio estado de carga, confirmación y error.
Planear un viaje implica tomar muchas decisiones en plataformas distintas: destino, fechas, presupuesto, tipo de experiencia. El reto era diseñar una app que centralizara ese proceso y ofreciera recomendaciones relevantes desde el primer uso, sin abrumar al usuario con opciones antes de entender qué buscaba.
Antes de mostrar cualquier resultado, diseñé un flujo de preguntas cortas —destino, fechas, personas, presupuesto, tipo de viaje— que construía el perfil del viaje paso a paso. Cada pregunta ocupaba su propia pantalla para reducir la carga cognitiva y mantener el avance visible.
El usuario definido era visual y prefería información directa. Usé imágenes de alto impacto como elemento central de navegación, no como decoración. Cada destino o alojamiento se presentaba primero visualmente antes que con texto.
Diseñé una ruta guiada —"Quiero empezar"— y una ruta libre —"Deseo buscar por mi cuenta"— desde el mismo punto de entrada. El usuario decidía cuánto control quería ceder al sistema de recomendación.
La pantalla de resultados no era un listado genérico. Mostraba el resumen del perfil del viaje en la parte superior —destino, fechas, personas— para que el usuario recordara en todo momento que los resultados respondían a sus criterios específicos.
Wompi es una plataforma para la gestión del dinero en constante evolución. A medida que el producto crecía — más funcionalidades, más flujos, más productos — la librería existente empezó a quedarse corta. No tenía un orden claro ni una estructura pensada para escalar. Sin una base sólida, mantener la coherencia visual entre productos y sostener el ritmo de trabajo del equipo se volvía cada vez más difícil.
Separé el sistema en cinco librerías independientes por contexto: Foundations, Components base, App, Checkout y Dashboard. Cada una consume la anterior sin duplicar. Para los productos específicos — Dashboard, Checkout y App — construí librerías propias con sus organismos transversales, manteniendo la base compartida como única fuente de verdad.
Dentro de cada librería definí una estructura de páginas por categoría. Cualquier diseñador podía encontrar lo que necesitaba sin conocer el sistema de antemano ni depender de quien lo construyó.
Definí prefijos según contexto de uso: dsw/, app/, checkout/, dash/. Cualquier diseñador sabe de dónde viene un componente sin abrir el archivo.
Cada componente se construyó con auto layout, constraints y grids para responder a cualquier contenido sin romper. Usé variantes con boolean, text e instance swap properties para cubrir todos los estados desde un solo componente maestro, anidados siguiendo atomic design para que un cambio en la base se propagara automáticamente.
Bancolombia es el banco más grande de Colombia — con presencia en cuatro países, más de 160 diseñadores y 40 equipos trabajando sobre el mismo producto digital. Cuando ingresé, el sistema existía en Sketch: robusto, detallado y de gran escala. La decisión de migrar a Figma respondió a la necesidad de una herramienta más colaborativa y escalable para un equipo de esa dimensión — un proceso complejo dado el volumen y detalle del sistema existente. En 2021, Bancolombia renovó completamente su identidad visual con el objetivo de consolidar su enfoque digital y ser más accesible para el usuario Toptal — un cambio que no solo afectó el logo, sino la tipografía, la paleta de color y todos los elementos visuales. Eso obligó a reconstruir el sistema de diseño desde cero.
Las herramientas de exportación automática de Sketch a Figma no preservaban la fidelidad del sistema. El equipo decidió rehacer cada componente manualmente. Participé en la investigación de alternativas y en la reconstrucción de categorías completas junto al equipo.
El cambio de identidad visual implicó replantear el sistema completo — tokens de color, tipografía, iconografía, grids y guidelines de uso. No fue una actualización de componentes sino una reconstrucción que afectó cada capa del sistema.
Trabajé dentro de los criterios definidos colectivamente — auto layout, variantes, tokens — contribuyendo a mantener la coherencia y escalabilidad del sistema en un entorno de múltiples equipos.
El sistema operaba con un modelo híbrido entre centralizado y federado. Mi rol fue construir y mantener componentes dentro de ese marco, con voz activa en las decisiones de construcción.
iVoy fue una plataforma de mensajería express con operaciones en México (cientos de mensajeros, clientes y operadores interactuando sobre el mismo producto digital). No existía un sistema de diseño. Con múltiples interfaces y actores, diseñar sin una base común hacía imposible mantener coherencia y escalar el producto con consistencia.
Antes de construir cualquier componente, estudié la identidad existente de iVoy — paleta, tipografía, iconografía y guidelines de marca — para entender qué podía trasladarse al sistema y qué necesitaba definirse desde el diseño.
Con base en ese análisis, definí la capa base del sistema: tokens de color, tipografía, espaciado e iconografía. Todo nombrado semánticamente para que los componentes los consumieran directamente.
Estructuré la librería con páginas por categoría siguiendo atomic design — átomos, moléculas, organismos. Cada nivel construido sobre el anterior.
Construí cada componente con auto layout, variantes y propiedades de Figma para cubrir todos los estados y configuraciones desde un solo maestro.
Cada componente incluyó anotaciones de uso y estados. El sistema podía ser usado por cualquier diseñador sin depender de quien lo construyó.
Wompi no contaba con una definición clara de los perfiles de usuario de Pagos a terceros. Sin esa base, producto, diseño y marketing tomaban decisiones sin un referente común sobre quién era el usuario, qué necesitaba y cómo se comportaba. El objetivo era construir buyer personas reales que sirvieran como punto de partida compartido para priorizar mejoras y afinar la estrategia del producto.
Analicé una base de 59 comercios activos en Metabase, cruzando variables como volumen de transacciones, frecuencia de uso, monto movilizado y sector económico. Eso permitió segmentar la base en tres grupos: Frecuentes, Regulares y Ocasionales, cada uno con niveles de engagement y comportamiento distintos.
Diseñé mensajes de contacto diferenciados por segmento y los distribuí vía WhatsApp y correo. Coordiné agendamiento, consentimiento informado y entrega de bonos de agradecimiento. En total se realizaron 10 entrevistas efectivas distribuidas entre los tres segmentos.
Conduje sesiones individuales de 30 a 45 minutos por Google Meet, usando un guión estructurado en tres bloques: vida personal, negocio y experiencia con la plataforma. Usé TacTiq para transcripción automática y síntesis de hallazgos por sesión.
Codifiqué respuestas por temas recurrentes, identifiqué patrones de comportamiento y agrupé usuarios en arquetipos por segmento. Usé ChatGPT Plus como copiloto para estructurar hallazgos y mantener consistencia narrativa, sin delegar el criterio de interpretación.
A partir de los clusters definí tres perfiles: Andrés el orquestador financiero, Diana la empresaria pragmática y Miguel el explorador ocasional. Cada persona incluía objetivos, acciones principales, dolores y frases reales extraídas de las entrevistas.
Con los buyer personas como base, construí un Journey Map que reorganizó la experiencia de Pagos a terceros en 6 macroetapas. El mapa integró emociones, puntos de dolor y oportunidades de mejora por perfil, y sirvió como insumo directo para los equipos de producto y diseño.
Los comercios no diferían solo en frecuencia de uso, sino en cómo integraban la plataforma a su operación. Frecuentes la usaban como eje central, Regulares como complemento y Ocasionales como respaldo eventual.
La fricción no era técnica, era de contextoLas principales frustraciones respondían a que la plataforma no distinguía entre una empresa con área financiera dedicada y un microempresario que opera solo. Ese hallazgo se convirtió en el argumento central para priorizar mejoras de experiencia por perfil.
Wompi dispersaba el dinero de los comercios automáticamente al día siguiente sin darles ningún control sobre ese proceso. La experiencia no distinguía claramente entre el dinero acreditado, el disponible y el que estaba en dispersión, lo que generaba confusión y una percepción de poco control sobre los propios fondos. El objetivo era rediseñar ese módulo para que el comercio entendiera su dinero y pudiera decidir qué hacer con él.
Analicé los tres estados de saldo existentes —acreditado, disponible y en dispersión— identificando los puntos de fricción y confusión de cada uno. Documenté los insights y fricciones por estado como base para orientar la investigación y el rediseño.
Estudié cómo Mercado Pago, Bold y RappiPay estructuraban, nombraban y habilitaban acciones sobre sus módulos de saldo. El foco fue identificar patrones en la jerarquía de información, acciones visibles y desglose de estados.
Analicé el tratamiento visual de saldos en Mercado Pago, Nequi, Revolut, Payoneer y ePayco. Identifiqué patrones de diseño relevantes: uso de cards, jerarquía tipográfica, visibilidad de acciones y carga cognitiva por pantalla.
Consolidé los hallazgos en una tabla comparativa y derivé recomendaciones UX concretas: card única para saldo principal, acciones integradas, microcopys orientados a decisión y coherencia visual entre desktop y móvil.
Conduje pruebas moderadas remotas con 4 usuarios reales sobre un prototipo navegable. Diseñé 6 pruebas estructuradas que evaluaron comprensión de términos, claridad de tarifas, interacción con el abono automático y flujos de envío de dinero.
Documenté los resultados por tarea y término evaluado, con nivel de claridad, evidencia textual y recomendación de mejora. Los ajustes identificados se ejecutaron directamente sobre el diseño.
El 85% de los términos y microcopys fueron interpretados correctamente una vez rediseñados. Los usuarios entendían la lógica del producto; lo que fallaba era cómo se nombraba y jerarquizaba la información.
El control genera confianzaEl 95% de las tareas prácticas se completaron con éxito. La posibilidad de activar o desactivar el abono automático fue el cambio más valorado: los usuarios percibieron que por primera vez tenían autonomía real sobre su dinero en la plataforma.
Bre-B introduce pagos inmediatos dentro de un flujo tradicional de pagos a terceros en Wompi. La experiencia actual no diferenciaba claramente este nuevo método frente a otros, ni comunicaba de forma efectiva sus condiciones, tiempos y comportamiento transaccional. Esto generaba incertidumbre sobre cuándo usarlo, qué esperar del pago y cómo interpretar sus estados.
El objetivo era integrar Bre-B de forma clara, permitiendo al usuario entender su valor, anticipar el resultado del pago y tener confianza en el proceso.
Analicé el impacto de Bre-B en la experiencia de pagos: inmediatez, nuevas reglas operativas y cambios en expectativas del usuario. Identifiqué puntos de fricción relacionados con comprensión, tiempos y estados transaccionales.
Estudié cómo diferentes plataformas como: Cobre, Nequi, Daviplata, Nubank y Stripe, que integraban pagos inmediatos, analizando activación del método, condiciones de uso, validaciones y manejo de estados. El foco fue identificar patrones en la lógica operativa y su exposición al usuario.
Analicé cómo se comunica la inmediatez a nivel visual: etiquetas, jerarquía, diferenciación entre métodos y mensajes de confirmación. Identifiqué patrones en el uso de indicadores de velocidad y claridad en estados.
Consolidé los hallazgos en principios UX claros: diferenciación explícita del método, comunicación anticipada de condiciones, refuerzo de la inmediatez y feedback inmediato post-transacción, manteniendo coherencia con el flujo actual.
Conduje pruebas moderadas remotas con usuarios reales sobre el flujo de pagos a terceros incluyendo Bre-B. Evalué comprensión del método, interpretación de mensajes, expectativas de inmediatez y claridad en estados.
Documenté los resultados por patrones de comportamiento, nivel de comprensión y evidencia textual. Los ajustes se enfocaron en mejorar el lenguaje, la comunicación de condiciones y el feedback transaccional.
Los usuarios no tenían dificultad en ejecutar el pago, pero sí en entender las condiciones: cuándo era inmediato, qué restricciones aplicaban y qué esperar del resultado.
La inmediatez eleva la expectativaLa promesa de pago inmediato genera una expectativa alta de confirmación. Cuando esta no es clara o visible, aparece desconfianza en el sistema.
Diferenciar el método define su adopciónCuando Bre-B no se distinguía claramente de otros métodos, los usuarios no entendían su valor ni cuándo usarlo, reduciendo su relevancia dentro del flujo.
