Virtual Investment Simulator
The Investment Simulator is a Bancolombia product that lets users calculate the potential return on an investment in real time. I worked as the UI designer alongside a UX partner, in an iterative, 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. After consulting with colleagues who had worked on similar financial tools, we found that most traffic on these platforms comes from mobile devices. That shaped the strategy: mobile-first. With the user flow defined, we designed 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 - Research
Testing assumptions with real users
With the first version of the user flow ready, we ran remote moderated usability testing: one-on-one virtual sessions with real users. In each session, participants completed specific tasks and also freely explored the interactive Figma prototype. The findings revealed clear friction patterns and improvement 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.
+5 insights
Findings that led to concrete modifications across key interaction moments in the wireframe.
03 - Visual design
From insights to high fidelity
The usability testing insights drove every modification. With changes documented and justified, we evolved the wireframe from medium to high fidelity, applying Bancolombia's visual design system. This version was then 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 design decision was directly grounded in user research. During this same phase, we also designed the desktop version of the simulator.
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 users interact with today grew from that process — the research and design work served as the product's foundation. 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.
