Dar estructura a todo un ecosistema bancario.
Pasé siete meses integrado en Caja Ingenieros, trabajando a diario en la renovación de su banca digital: un producto nacido en 2012 que llevaba más de una década creciendo. El encargo era entender el ecosistema, mapearlo flujo a flujo y reconstruir la estructura sobre la que se apoyaría todo lo demás. Ingeniero Bolsa, el bróker del banco, es el buque insignia de ese trabajo.
El volumen es la historia: 5 áreas · 46 flujos · más de 200 pantallas y estados, especificados para desarrollo y auditados externamente.
Un ecosistema de 2012, y poco margen de maniobra
La operativa vivía en un terminal de Norbolsa incrustado en la Banca Online del banco: navegación propia, aspecto propio y un botón amarillo de "Volver a Banca Online" como única salida. Los gráficos y los datos de mercado los renderiza el proveedor (Norbolsa, después adquirida por Kutxabank) y no se podían rediseñar, así que el alcance fue una UI renovada con mejoras de UX concretas.
El problema real no era una pantalla rota. Eran las pantallas de 46 flujos, cada una derivando por su cuenta durante una década, sin ninguna estructura común que las mantuviera coherentes.
Aprender el dominio y después mapearlo entero
Con la UI como palanca principal, lo primero fue la fluidez en el dominio. Capturé cinco plataformas de referencia flujo a flujo y las estudié como lentes: el lenguaje del dominio, cómo se estructura la navegación, cómo se comportan los componentes, dónde vive la información y los patrones que los socios ya esperan.
Primero mapear, después dibujar
Después el producto en sí: cada flujo capturado y conectado en un mapa clic a clic bajo sus cinco áreas. El mapa es donde afloraron los problemas estructurales, no solo los visuales. El más claro: comprar y vender, la razón de ser de un bróker, estaban tres niveles hacia dentro, bajo un menú que nadie abre para operar.
Un esqueleto, catorce familias de módulos
El rediseño empezó por el esqueleto, no por las pantallas: 4 plantillas de página (dos columnas a 8/4 y 6/6, una sola a ancho completo, con o sin cabecera principal) fijadas a tres breakpoints de escritorio. Cada pantalla del producto se compone a partir de una de ellas.
Catorce familias de módulos, diseñadas una vez
Sobre ese esqueleto vive una biblioteca de 14 familias de módulos (buscador, calendario, favoritos, noticias, tipos, opinión, gráfico intradía y más), cada una diseñada una vez con sus variantes y estados, y después recombinada pantalla a pantalla. Un módulo puede ir en una columna lateral, ocupar el centro o extenderse a todo el ancho; las plantillas absorben cualquier combinación. Los módulos mal ubicados, el buscador de valores entre ellos, se recolocaron donde ocurre el trabajo de verdad.
Mantener el dato, cambiar la jerarquía
El sistema se ganó su sitio en la pantalla más densa del producto: la de instrumento. Precio en vivo, libro de órdenes, pestañas de análisis, noticias y gráficos llegaban como un muro indiferenciado, y los gráficos (la pieza que da autoridad a estos productos) eran del proveedor y no se podían tocar. La jerarquía sí: un bloque de precio manda en la página, la mejor compra y la mejor venta a su lado, Comprar y Vender en la cabecera, noticias y análisis en sus propias columnas. No se quitó nada; los socios operan con esos datos. El tratamiento se convirtió en el patrón de todas las pantallas densas de Mercados.
Especificado para superar una auditoría
En banca, la accesibilidad es un requisito con un auditor detrás. Cada familia de componentes se entregó con su propia especificación de accesibilidad: estados, interacción por teclado, roles ARIA y qué anuncia el lector de pantalla. Doce en total, desde botones y tablas hasta diálogos y calendarios. Todos los flujos y la documentación fueron a Ilunion, la auditoría externa de accesibilidad; las correcciones volvieron y se integraron en el sistema. Después, meses de QA de diseño vigilaron el desarrollo, pantalla a pantalla.
El tamaño del asunto
La puesta en producción va a tiempo de banca (revisión de seguridad estricta, varios proveedores, una cadena larga hasta producción, la nueva plataforma prevista para alrededor de 2027), pero el trabajo se desarrolló dentro del programa ágil de la renovación, las pantallas se aprobaron y verificaron, y está en implementación ahora, con una versión móvil en desarrollo a partir de ella. El bróker es el buque insignia; la misma base estructural sostuvo los flujos del día a día del ecosistema.
