Simulador de inversión virtual
El Simulador de Inversión Virtual es un producto de banca digital de Bancolombia que calcula la rentabilidad potencial de una inversión en tiempo real. Lideré el diseño UI junto a un compañero de UX, en un proceso iterativo, mobile-first y centrado en el usuario.
01 - Contexto
Mobile-first desde el día uno
El primer paso fue definir el user flow tomando como referencia el simulador existente de Bancolombia. Al consultar con colegas de otros proyectos de simulación financiera, confirmamos que la mayor parte del tráfico en estas herramientas de banca llega desde móvil. Eso definió la estrategia: mobile-first.
Con el flujo definido, diseñé los wireframes en fidelidad media para mobile, mapeando todos los estados posibles antes de avanzar al diseño visual.
Mobile First
La mayoría del tráfico en simuladores financieros llega desde móvil — premisa que definió la estrategia desde el primer wireframe.
User flow completo
Definido con base en el simulador existente de Bancolombia, cubriendo todos los estados posibles de la simulación.
Wireframes en fidelidad media para mobile — primera versión del user flow
02 - UX research
Probar supuestos con usuarios reales
Con la primera versión del flujo lista, corrimos pruebas de usabilidad moderadas y remotas junto a mi compañero de UX: entrevistas uno a uno con usuarios reales. Participé en las sesiones, donde cada persona ejecutaba tareas concretas y también exploraba libremente el prototipo interactivo en Figma según su experiencia con simuladores similares.
Los hallazgos revelaron patrones de fricción y oportunidades que guiaron la iteración de media a alta fidelidad.
Diagrama del user flow — base estructural del proceso de investigación
Pruebas 1:1
Entrevistas de usabilidad moderadas remotas. Cada sesión combinaba tareas guiadas con exploración libre del prototipo interactivo en Figma.
Hallazgos clave
Los hallazgos de las sesiones derivaron en modificaciones concretas al wireframe antes de pasar a alta fidelidad.
03 - Diseño visual
De los insights a la alta fidelidad
Los insights fueron el motor de los cambios. Documentados y justificados, evolucioné el wireframe a alta fidelidad con el design system de Bancolombia, extendiendo componentes donde el flujo lo pedía. Esta versión, lista para handoff, fue la presentada a producto y stakeholders.
Wireframes en fidelidad alta para mobile — flujo de inversión mensual
Wireframes en alta fidelidad para mobile — flujo de inversión por días
Wireframes en alta fidelidad para mobile — flujo de inversión al finalizar el plazo
04 - Stakeholders
Defender las decisiones, escalar el diseño
2 versiones
Mobile y desktop diseñadas en el mismo sprint, con el sistema visual de Bancolombia aplicado de forma consistente en ambas.
Aprobado
Cada cambio presentado estuvo respaldado por evidencia directa de la investigación con usuarios reales del producto.
05 - Outcome
En vivo en bancolombia.com
Por un cambio de equipo, otro grupo de UX/UI tomó el diseño entregado como base y realizó los ajustes finales para llevarlo a producción. El simulador que los clientes de Bancolombia usan hoy es resultado de ese proceso: la investigación y el diseño documentado fueron el fundamento del producto final. El simulador virtual puede visualizarse en este link.
06 - Conclusiones
Aprendizajes
01
Sin datos, solo hay suposiciones
Cada ajuste al wireframe tuvo respaldo directo de los hallazgos. Sin ese paso, habríamos presentado a stakeholders una solución basada en suposiciones, no en lo que mostraron los usuarios.
02
Mobile first es una decisión de contexto, no de tendencia
Partir de cómo y desde dónde accede el usuario es lo que da sentido al diseño. El dispositivo no es un detalle, es el punto de partida de todo el flujo.
03
Un diseño fundamentado sobrevive al cambio de equipo
Las decisiones documentadas le permitieron a otro equipo tomar el producto y llevarlo a producción sin perder la dirección del diseño original.
