DouguizardDisponible

Senior Product Designer · Design System Gatekeeper

Banco de Occidente

Uno de los bancos más grandes de Colombia: su portal rediseñado y Velocity, el sistema de diseño que compartían más de 12 squads.

El producto

El portal transaccional del Banco de Occidente en una tableta: una barra lateral con el nombre del cliente y su nivel de beneficios, tarjetas de una Mastercard y de una cuenta de ahorros con sus saldos, una fila de transacciones favoritas, un calendario del mes y un gráfico de gastos.
01El inicio del portal: productos, transacciones favoritas y el mes de un vistazo.
/ Rol
Senior Product Designer · Design System Gatekeeper
/ Duración
Más de 5 años
/ Equipo
Equipos del banco y de Aval Digital Labs
/ Año
Nov 2018 — Ene 2024
/ Ábrelo

El impacto

12+
Squads de producto alineados
un solo sistema
15
Íconos ilustrados
dibujados para el sistema
20+
Áreas del sistema documentadas
de fundamentos a organismos
3
Dispositivos, un solo portal
escritorio, tableta, celular

Un portal denso, reconstruido como un solo producto liviano, sobre un sistema de diseño que hizo cada pantalla nueva más barata que la anterior.

Contexto

El portal era denso y difícil de recorrer, y cada squad resolvía los mismos problemas a su manera. Lo rediseñé y construí Velocity para resolver ambas cosas.

Qué hice

  1. 01

    Rediseñé el portal transaccional: ingreso, cuentas, tarjetas, transferencias, pagos y bloqueo de productos, idéntico en escritorio, tableta y celular.

  2. 02

    Construí Velocity, el sistema de diseño del banco: de fundamentos a organismos, con diseño atómico para que el front end lo refleje.

  3. 03

    Guardián del sistema de diseño: aprobé adiciones, deprecaciones y patrones en los squads del banco, y dirigí los talleres y las críticas.

En sus palabras

Extremely professional and fast service. Doug is a master of detail and very creative. We've done 8 projects with him and every single one delivered above expectations. He doesn't just design — he architects how products should feel.

Francesca SteriDirectora de Diseño · Aval Digital LabsBanco de Occidente · Sistema de diseño VelocityCita original en inglés

En detalle

  • Dos pantallas de iPhone lado a lado: el detalle de una Mastercard Black con pago mínimo, pago total y fecha límite sobre un botón de Pagar, y la pestaña de movimientos con compras con tarjeta, fechas, número de cuotas y montos.
    02En el celular: cada capacidad del escritorio, en el mismo orden.
  • La pantalla de ingreso del portal en una tableta: un aviso de cookies arriba, un panel promocional a la izquierda y una tarjeta de ingreso que pide tipo de documento, número de documento y contraseña, con enlaces para recuperar la contraseña y para registrarse.
    04Ingreso: tipo de documento, número de documento y contraseña.
  • Quince íconos ilustrados en línea azul y verde: un extracto, un puntaje de crédito, un certificado, un documento programado, un pin de ubicación, monedas apiladas, una alcancía, un pago con el celular, un mensaje en el celular, un celular con un más, un celular protegido, un celular con huella, una transacción fallida, una casa y una ventana de navegador.
    07Quince íconos dibujados para el sistema, no licenciados.
  • El sistema de popups dibujado como cuatro planos apilados en perspectiva, rotulados desde el fondo: la página, un fondo desenfocado, el componente y el popup.
    08Profundidad en vez de anidación: dos capas para cualquier tarea.
  • La sección de cuentas del portal en una tableta: una tarjeta de cuenta de ahorros con saldo disponible, canjeable y actual, una tabla filtrable de movimientos con compras y transferencias y sus montos, y un aviso de éxito que confirma el bloqueo de una chequera.
    03Saldos, movimientos y la prueba de que el bloqueo funcionó.
  • Tableros de fundamentos del sistema dispuestos en perspectiva: una escala de color de azul claro a oscuro con secundarios neutros y dorados, una escala tipográfica del hero al caption, una escala de espaciado y hojas con los estados de botones y campos de formulario.
    05Fundamentos: color, tipografía, espaciado y cada estado de cada control.
  • El índice del sistema de diseño Velocity, de cinco columnas: Documentación, Fundamentos, Átomos, Moléculas y Organismos, con conceptos básicos, reglas de nombres, principios de escritura, grillas, espaciado, colores, tipografía, botones, inputs, controles, íconos, campos, desplegables, listas, tablas, encabezados, formularios, modales, selector de fecha y navegación por pestañas.
    06Velocity, indexado como se construye el front end.
  • El flujo de registro y clave de un solo uso diagramado en cajas y flechas: registrarse, ingresar tipo y número de documento, enviar una clave de un solo uso, ingresarla o pedir otra por SMS, aceptar el tratamiento de datos y luego un ingreso exitoso o una falla de validación.
    09El registro, mapeado con sus excepciones antes de cualquier pantalla.

Cómo se hizo

  1. 01

    Investigación, después flujos

    Primero, descubrimiento e investigación competitiva y con usuarios. Después, seis flujos mapeados con sus excepciones antes de cualquier pantalla: en la banca, la excepción es el producto.

  2. 02

    Prototipos probados con personas

    Cada etapa se volvió un prototipo interactivo que los usuarios probaron antes de cualquier desarrollo; el registro pasó por varias rondas.

Decisiones clave

  • Dos capas de navegación, y no más

    El portal anterior enterraba a la gente en páginas anidadas. Un sistema de popups reemplazó la profundidad de navegación, y dos capas alcanzan para cada tarea bancaria.

  • Idéntico entre dispositivos, no solo parecido

    El brief pedía una experiencia similar; la hicimos idéntica. Cada capacidad del escritorio llega al celular con los mismos nombres, en el mismo orden: nada que volver a aprender en el bus.

/ Herramientas y métodos
  • Figma
  • Sketch
  • Diseño atómico
  • Design tokens
  • InVision
  • Prototipado
/ Autoría

Sistema de diseño, dirección de arte y diseño UI: míos. La dirección de producto y la investigación UX estuvieron a cargo de los equipos del banco y del laboratorio. Publicado por Aval Digital Labs, Colombia, 2022.

© 2026 Doug Vargas

/ Siguiente caso
Operación clínica × Ingeniería de diseño

DC Medical Aesthetics

El panel que maneja una clínica desde el celular de la secretaria. Ningún procedimiento empieza sin estar pagado.