Virtual Investment Simulator
The Investment Simulator is a Bancolombia digital-banking product that calculates the potential return on an investment in real time. I led the UI design alongside a UX partner, in an iterative, mobile-first, user-centered process.
01 - Discovery
Mobile-first, from day one
The first step was mapping the user flow using Bancolombia's existing simulator as a reference. Consulting with colleagues from other financial-simulation projects, we confirmed that most traffic on these banking tools comes from mobile. That set the strategy: mobile-first. With the flow defined, I designed the medium-fidelity wireframes for mobile, mapping every possible state before moving into visual design.
Mobile First
Most traffic on financial simulators comes from mobile — a premise that shaped the entire product strategy from the start.
Complete user flow
Mapped from Bancolombia's existing simulator, covering every possible state before starting visual design.
Mid-fidelity wireframes for mobile — first version of the user flow
02 - UX Research
Testing assumptions with real users
With the first version of the flow ready, we ran remote moderated usability testing alongside my UX partner: one-on-one sessions with real users. I took part in the sessions, where each participant completed specific tasks and also freely explored the interactive Figma prototype. The findings revealed friction patterns and opportunities that drove the iteration from mid to high fidelity.
User flow diagram — structural foundation of the research process
1:1 Sessions
Remote moderated usability interviews. Each session combined guided tasks with open-ended prototype exploration.
Key findings
Findings from the sessions led to concrete changes in the wireframe before moving to high fidelity.
03 - Visual design
From insights to high fidelity
The insights drove every change. Once documented and justified, I evolved the wireframe to high fidelity with Bancolombia's design system, extending components where the flow required it. This version — documented and handoff-ready — was the one we presented to the product team and stakeholders.
High-fidelity wireframes for mobile — monthly investment flow
High-fidelity wireframes for mobile — daily investment flow
High-fidelity wireframes for mobile — investment flow at term completion
04 - Stakeholders
Selling the decisions, scaling the design
With high-fidelity wireframes ready, we presented the changes to Bancolombia's product team and stakeholders, showing how each decision was grounded directly in user research. In this same phase I also designed the desktop version, keeping it consistent with the design system.
2 versions
Mobile and desktop designed in the same sprint, using Bancolombia's visual system throughout.
Approved
Every change presented was backed by direct evidence from user research.
05 - Outcome
Live at bancolombia.com
Due to a team change, another UX/UI team took the delivered design as a foundation and made the final adjustments to ship it. The simulator Bancolombia's customers use today grew from that process: the research and the documented design decisions were the foundation of the final product. The virtual simulator can be viewed at this link.
06 - Conclusions
Lessons from this project
01
Without data, you're just guessing
Every wireframe change had direct evidence behind it. Without that step, we would have presented stakeholders with a solution built on assumptions, not on what users actually showed us.
02
Mobile-first is a context decision, not a trend
Starting from how and where users access the product is what gives the design its meaning. Evidence from similar tools confirmed mobile as the right foundation — not intuition.
03
A documented design outlasts team changes
The documented decisions allowed another team to take the product to production without losing the research-backed rationale behind each choice.
