Back to all work Product Design · UX/UI Case Study · Banking

Pre-approved
Loans

Turning a confusing loan process into a simple activation flow.

Client: Bancolombia (via Accenture)
Role: Product Designer, Lead
Tools: Figma, Adobe Creative Cloud, Miro, Asana, Maze
Sector: Banking

About Bancolombia

16M+ Customers

3 Countries

1875 Founded

Colombia's largest private bank, serving customers across Colombia, Panama and Puerto Rico.

One simple path to activate a loan that was already approved.

The goal was to simplify the traditional multi-step loan application by giving customers several credit options and pre-approved offers they could access at any time. The result had to be a responsive web experience, connected to the bank's existing products, services, technology and design system, that felt like a natural part of its platform.

My role

Led a five-person team and set the product vision and strategy for the experience.

Owned the relationship with the bank: client presentations, co-creation sessions and gathering new requirements.

Made sure the product met the bank's business goals while giving customers a clear, pleasant way to find and activate pre-approved loans.

Connected several separate credit products into a single process, avoiding long waits and information overload.

Guided the team through high-fidelity prototypes, usability testing and extensions to the bank's existing design system.

Bancolombia pre-approved credits website

Timeline: 12 weeks, 4 sprints

Sprint 1
Research & Discovery

Understanding users, the bank's credit products and the market.
Sprint 2
Strategy & Early Design

Defining the problem, the challenges and the first design decisions.
Sprint 3
Design & Validation

High-fidelity UI, prototyping and two rounds of usability testing.
Sprint 4
Final Design & Handoff

Documentation and handoff to the bank's internal design and dev teams.

Research & Discovery

What was stopping people from finishing a loan they had already been approved for.

Starting from the client's brief, I looked at comparable projects with the internal team to define the product's direction: analyzing the bank's own customer profiles, learning the mechanics of each credit product, and gathering references and trends from the financial sector in other countries. A series of sessions with external e-commerce and banking experts rounded out the picture.

Research

Clarity, above all

Users need clarity on eligibility criteria, process status and loan terms: the three things the existing flow explained the least.

Pain points

Anxiety built into the process

Banking jargon, the sheer number of required documents and steps, and the fear of mistaking a "simulation" for formal acceptance were driving abandonment.

Visibility

Choice paralysis

Customers couldn't easily see the steps of the credit process, weren't sure which product to choose, and were wary of even running a simulation.

Digital comfort archetypes

Five ways people relate to digital banking tools, mapped to guide every decision that followed.

Low engagement

Technologically Resigned

Distrust digital tools and use them only when necessary. Limited access, low motivation, and difficulty learning new tools.

Building confidence

Virtual Learners

Still learning to use digital tools. Interested in improving, but need guidance and time to adapt with confidence.

Function-first

Cyber Pragmatists

Use technology practically. Not enthusiasts, but comfortable with the basics and drawn to what's useful, fast and functional.

Early adopters

Digital Adventurers

Explore and adopt new tools easily. High digital confidence and skill.

Power users

Financial Experts

Manage digital and financial products with deep knowledge. Make informed decisions and optimize their own resources.

Problem statement

Bank users need a fast, clear way to understand their pre-approved credit status and a simplified application process, because the current system is opaque and slow. That lack of trust, plus the fear that simulating a loan is legally the same as accepting it, leads them to abandon the process before ever formally applying.

Key challenges to solve

Transparency & Trust

Lack of status transparency: no real-time view of Approved, Rejected or Under review, causing uncertainty.
Perceived lack of information: some users assumed hidden terms or withheld information.
Simulation vs. application anxiety: many believed simulating a loan was legally equivalent to requesting it.

Financial Literacy & Clarity

Jargon and cognitive load: internal banking terms leaking into a customer-facing flow.
Ambiguity of "pre-approved": unclear eligibility criteria or value proposition.
Unclear credit limits: users often didn't realize they could choose a lower amount than the full limit.

Process Efficiency & Accessibility

Fear of "phygital" friction: assuming a branch visit would eventually be required regardless.
Upfront information needs: wanting rates, benefits and terms before starting anything formal.
Anticipated frustration: a widespread belief that digital credit is slow and document-heavy.

Journey mapping

We mapped the end-to-end customer journey, from initial attraction to final formalization, marking specific pain points, friction alerts and key moments of truth. That map is what let us merge several disparate product processes into one experience, and propose a single, streamlined happy path for getting a loan.

Solution & UX Strategy

Three decisions that reshaped the flow.

01 Pre-approval visibility

Check your pre-approval component on the dashboard

Design decision. A prominent "Check your pre-approval" component placed directly on the dashboard's main screen.

Why. Placing it inside the account-movements section, where users already spend most of their time, turns it into a highly visible call to action. It leans on reciprocity (the bank has already offered them something) and simplifies the entry point into the loan flow.

02 The credit simulator

Product recommendation quiz and credit simulator

Design decision. A short quiz to recommend the right product, paired with a simple, intuitive simulator.

Why. Many customers didn't know which product fit their needs. The solution combined a short quiz, visual aids before the simulation starts, a dedicated FAQ, a dynamic simulator that lets people split the pre-approved amount across products, and absolute clarity that simulating is not committing.

03 Simplifying the application

Simplified application form reusing existing bank data

Design decision. Reduce the multi-step form by reusing data the bank already has.

Why. If a loan is pre-approved, most of a customer's data (identity, income) is already in the system. Asking for it again is pure friction.

The simplified path

1
Pre-approved offer

Shown right on the dashboard, no digging through menus.
2
Test (optional)

A short quiz points to the right product.
3
Amount & term

The simulator lets people adjust the numbers freely.
4
Acceptance

One confirmation, using data the bank already has.
5
Activation

The product is live and ready to use right away.

User Flows & Design Process

Built inside Bancolombia's own design system, not around it.

The new main flow gives users with a pre-approved offer direct access from the dashboard, instead of forcing them through generic "Products" and "Loans" menus. We then folded the acquisition flows of every existing credit product (credit cards, personal loans, general-purpose loans) into this same pre-approved path, cutting steps so people could apply to more than one product in minutes.

Every new component started from Bancolombia's existing pattern library rather than a blank canvas: extending typography, color and component rules the internal team and returning customers already knew, instead of introducing a parallel visual language just for this flow.

User flows & information architecture

Bancolombia's design system

Wireframes were created to validate the content structure with internal stakeholders, ensuring all legal information and customization options (amount, term, conditions) were clear and present before moving to final UI. Crucially, we ensured the existing credit product flows could easily merge with this dynamic pre-approved product.

Usability Testing & Iteration

Two rounds, two very different kinds of feedback.

Segment

New users

Participants with no existing products inside the dynamic pre-approval ecosystem.

Segment

Existing customers

Users who already held one or more of the products currently offered through the pre-approval flow.

Excluded

Technologically resigned

This archetype was excluded because the product was fully digital. It was built for customers who were already comfortable with technology and familiar with the bank's digital products.

22 participants, dynamic testing via Maze

14 participants, live in-branch interviews

Key metric. Clarity of information.

Finding. The simulator left some doubts about how to edit the amount and details of each product. The test was well received, but felt too long.

Iteration. Simplified the copy for clarity, added FAQs, introduced visual aids to guide people through the simulator, and surfaced key information (rates, terms, benefits) directly on the simulation screen.

Impact & Results

12 min Average time to complete the application, down from 25 min

95% User acceptance rate after the second round

+30% Increase in interest in credit simulations

In final testing, users described the application as more modern, intuitive, transparent and customer-centric than before.

Learnings

Prioritizing visibility mattered more than any improvement to the form itself.
Language is gold: plain labels and clear "no commitment" messaging built trust fast.
Design is non-linear: iteration kept sending us back to research to re-validate copy.

Next steps

Advanced personalization for offers like vehicle or mortgage loans.
Gamification, with a clearer progress bar during application.
A/B testing across credit products to optimize conversion.

Results overview — Pre-approved Loans - Mobile version

After presenting the project and co-creating with the bank across every sprint, running user tests and refining the design at high fidelity, we handed the project to the bank's internal design team. From that point, they own implementation, ongoing iteration, and documentation together with developers and other stakeholders.

Bancolombia · Accenture

UX/UI Case Study · B2B Wholesale

Let's build something
worth using.

Contact