Simulador de inversión virtual
El Simulador de Inversión Virtual es un producto de Bancolombia que permite calcular la rentabilidad potencial de una inversión en tiempo real. Trabajé como diseñador UI junto a un compañero UX, en un proceso iterativo centrado en el usuario.
01 - Contexto
Punto de partida
El primer paso fue definir el user flow tomando como referencia el simulador existente de Bancolombia. Consultando con colegas que habían trabajado en proyectos de simulación similares, encontramos que la mayor parte del tráfico en este tipo de herramientas financieras llega desde dispositivos móviles. Eso definió la estrategia: mobile first.
Con el user flow definido, diseñamos 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 - User research
Investigación con usuarios
Con la primera versión del user flow lista, realizamos pruebas de usabilidad moderadas remotas: entrevistas virtuales uno a uno con usuarios reales. En cada sesión el usuario ejecutaba tareas específicas y también navegaba libremente por el prototipo interactivo en Figma, completando las acciones que deseara según su experiencia con simuladores similares.
Los hallazgos revelaron patrones claros de fricción y oportunidades de mejora 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.
+5 insights
Hallazgos identificados que derivaron en modificaciones concretas al wireframe antes de pasar a alta fidelidad.
03 - Diseño visual
Del wireframe al diseño en alta
Los insights de las pruebas de usabilidad fueron el motor de las modificaciones. Con los cambios documentados y justificados, evolucionamos el wireframe de media a alta fidelidad, aplicando el sistema visual de Bancolombia. Esta versión fue la presentada al equipo de 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
Presentación a stakeholders y versión desktop
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 - Resultados
Estado: en producción
Por cambio de equipo, otro grupo UX/UI tomó el diseño entregado como base y realizó los ajustes finales para llevarlo a producción. El simulador que los usuarios de Bancolombia usan hoy es el resultado de ese proceso — el trabajo de investigación y diseño sirvió como 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 una solución a stakeholders construida sobre suposiciones, no sobre evidencia.
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.
