🔐 UX CASE STUDY · BANCOLOMBIA · 2026
La
Bóveda
Una capa de seguridad transaccional que protege al usuario del fraude, el phishing y los cobros inesperados — antes, durante y después de cada pago PSE.
10
Pantallas diseñadas
3
Capas de seguridad
0
Pesos en riesgo
🔐
La Bóveda
Protege tu dinero
en pagos externos
Tu símbolo de confianza
👾
"Monster33"
✓
Activar La Bóveda 🔐
✅ Sitio verificado
🔒 $79.400.000 protegidos
Usuarios de Bancolombia
perdieron millones en una noche.
En febrero de 2026, cientos de clientes reportaron cobros no reconocidos que vaciaron sus cuentas después de una ventana de mantenimiento fallida y pagos PSE a sitios externos.
01
💸
Sin protección de monto
El sistema puede tomar dinero de los Bolsillos automáticamente sin aviso previo. Los usuarios pierden más de lo que intentaban pagar.
02
🎭
Sin protección contra phishing
PSE redirige a sitios externos sin verificar su legitimidad. No hay forma de saber si el portal es real antes de ingresar credenciales.
03
❓
Nomenclatura confusa
"Compra Cuenta Ahorro Nacional" no le dice nada al usuario. No puede distinguir entre un cobro legítimo y un fraude.
⚡

Insight UX central: El problema no es técnico — es una falla total de comunicación, confianza y control del usuario en cada paso del flujo de pago.

Presentamos
La Bóveda
Un vault de pago integrado en Bancolombia que añade 3 capas de protección a cada transacción PSE — desde el comercio hasta el comprobante.
🛒
Empieza en el comercio
La Bóveda aparece como método de pago en el checkout — antes de que PSE abra. El usuario elige protección desde el primer toque.
💰
Reserva solo lo que necesitas
El usuario define el monto exacto. El resto de la cuenta queda bloqueado e inaccesible durante toda la transacción.
📡
Radar de verificación de sitio
Escaneo en tiempo real: SSL, antigüedad del dominio, reportes de fraude y registro en ACH Colombia antes de procesar el pago.
🦁
Símbolo personal secreto
Ícono + color + frase secreta elegida por el usuario. Visible en todo momento. Imposible de replicar por sitios de phishing.
🔒
PIN único irrepetible
Creado una sola vez, no puede cambiarse. Es la llave final que autoriza el pago y confirma que es el usuario legítimo.
Flujo completo
01
🛒
Checkout del comercio
La Bóveda como método de pago
↓
02
💰
Reserva tu monto exacto
Solo $X expuestos · resto bloqueado
↓
03
🦁
Configura tu símbolo
Ícono + color + frase secreta
↓
04
📡
Radar escanea el sitio
Verificado ✓ o Sospechoso 🚨
↓
05
🔒
PIN · Paga · Comprobante
Bóveda cerrada · dinero protegido
La experiencia que
transformamos
⚠️
Flujo actual — Sin protección
✗

El sistema toma dinero de Bolsillos sin avisar al usuario

✗

No hay verificación del sitio antes de ingresar credenciales

✗

Labels confusos: "Compra Cuenta Ahorro Nacional" no comunica nada

✗

La clave dinámica obliga a saltar entre dos apps

✗

Sin señal visual de autenticidad del portal bancario

✗

Error de saldo: no indica cuánto falta ni sugiere qué hacer

✅
La Bóveda — Con protección total
✓

Usuario reserva el monto exacto — el resto de la cuenta queda bloqueado

✓

Radar escanea el sitio antes de procesar cualquier credencial

✓

Lenguaje humano: "Pagaste $65.900 a Mercado Libre · verificado ✓"

✓

PIN único de La Bóveda — diferente al PIN del banco, solo una app

✓

Símbolo personal siempre visible — anti-phishing por diseño

✓

Devolución automática en 5 min si el pago falla — sin fricción

Navégalo como
usuario real
14 pantallas navegables · Flujo de onboarding + primer pago + segundo pago con Bóveda activa
🗒️ BITÁCORAS UX · CASO #01
La Bóveda
Bancolombia
Un concepto UX que reimagina la seguridad transaccional en pagos PSE. El usuario tiene control total antes, durante y después de cada pago externo.
01
🏠
Home · OnboardingDescubre La Bóveda y configúrala por primera vez
02
💰
Monto · Símbolo · PIN3 pasos de configuración con validaciones en vivo
03
🛒
Checkout · PSE · PagoFlujo de pago externo con Bóveda activa
04
🔄
Segundo pagoChecklist rápido cuando la Bóveda ya está configurada
💡 Ingresa cualquier PIN de 6 dígitos al crear la Bóveda, luego úsalo para autorizar el pago.
🔐
Cargando prototipo...
📱 Abrir en nueva pestaña
📱 Interactivo
14 pantallas
Onest font
Dark theme
↗ Abrir prototipo en pantalla completa
Componentes y
sistema de diseño

El diseño usa la fuente Onest, dark theme con tokens de color propios de La Bóveda integrados en el sistema visual de Bancolombia.

Cada componente fue diseñado como una extensión coherente del UI kit existente — sin romper la identidad de marca, pero añadiendo una capa visual diferenciada para la función de seguridad.

🎨 Abrir en Figma ↗
🏠
Home Entry Point
Card de La Bóveda en el home sin configurar y configurada
📋
Onboarding
Card cyan con hero y 4 pasos explicados
💰
Monto
Numpad personalizado con indicador de saldo protegido
🦁
Símbolo secreto
Grid de íconos, paleta de colores y frase secreta
🔒
PIN único
Keypad con dots animados y advertencia de irrevocabilidad
📡
Radar verificador
Animación de escaneo con resultado verificado/sospechoso
🛒
ML Checkout
Bóveda como método de pago en Mercado Libre
🔵
PSE con Bóveda
Símbolo siempre visible + desglose de protección
✅
Éxito + Comprobante
Ticket visual con QR y opciones de compartir
Métricas de éxito
🛡️
100%
Transacciones PSE con capa de protección activa
🎭
0
Pesos expuestos más allá del monto reservado
⚡
<5min
Devolución automática si el pago falla o es rechazado
💚
+NPS
Confianza recuperada en pagos digitales de Bancolombia
Cómo construimos
La Bóveda
Fase 1
01
Identificación del problema
Análisis de las quejas reales de usuarios de Bancolombia y Nequi en redes sociales y medios. Lectura del artículo de El Tiempo sobre el incidente de febrero 2026. Mapeo de los 3 pain points críticos del flujo PSE actual.
📰 Investigación
🗣️ Quejas usuarios
📊 Análisis flujo
Fase 2
02
Conceptualización de La Bóveda
Ideación del concepto de "payment vault" — reserva de monto + verificación de sitio + símbolo anti-phishing. Definición del user flow completo: Pre-Entry en comercio → Onboarding → Configuración → Pago → Comprobante.
💡 Concepto
🗺️ User flow
🔐 3 capas de seguridad
Fase 3
03
Diseño y prototipado
Construcción de las 14 pantallas del flujo completo con UI kit propio: fuente Onest, dark theme, tokens de color. Prototipo interactivo navegable como usuario real con lógica funcional completa.
🎨 Figma
📱 14 pantallas
⚡ Prototipo funcional
Fase 4
04
Publicación del caso
Slides para LinkedIn con caption conversacional etiquetando a Bancolombia. Sitio web del caso de estudio con el prototipo embebido y documentación completa del proceso de diseño.
💼 LinkedIn
🌐 Case study web
📢 Publicación
Lo que este caso
nos enseñó
🏦
La seguridad debe sentirse como confianza, no como ansiedad
Los usuarios no abandonan los bancos digitales por los robos — los abandonan porque sienten que perdieron el control. El UX de seguridad debe devolver ese control, no añadir fricción.
🎭
El phishing se combate con señales personales, no técnicas
Un certificado SSL es invisible para el usuario. Un símbolo que él mismo eligió es inmediatamente reconocible. La seguridad más efectiva es la que el usuario entiende sin leer un manual.
💰
El control del monto es más poderoso que el bloqueo total
Bloquear una tarjeta genera pánico. Reservar solo lo necesario genera confianza. La diferencia está en darle al usuario la sensación de que él decidió el límite del riesgo.
🔗
El UX nace donde el usuario tiene miedo
Los mejores casos de diseño surgen de quejas reales. Las redes sociales son el laboratorio de pruebas más honesto que existe — y Bancolombia tenía cientos de usuarios diciéndoles exactamente qué fallaba.
🗒️ Bitácoras UX · Caso #01
La confianza es
una decisión
de diseño.
La Bóveda demuestra que seguridad y simplicidad no son opuestos — son el mismo objetivo, simplemente mal diseñado hasta ahora. Este caso es parte de las Bitácoras UX, una serie de rediseños de problemas reales.
Tecnologías y herramientas
Figma Onest Font Dark Theme HTML/CSS/JS PSE Flow UX Research Prototipo Funcional Bancolombia Security UX Mobile First Bitácoras UX
Hashtags LinkedIn
#UXDesign #ProductDesign #UIDesign #Bancolombia #FinTech #CasoUX #PSE #Colombia #MobileBanking #SecurityUX #Figma #BitácorasUX