Giving structure to a whole banking ecosystem.
I spent seven months embedded at Caja Ingenieros, working daily on the renewal of its digital banking: a product born in 2012 that had grown for over a decade. The job was to understand the ecosystem, map it flow by flow, and rebuild the structure everything else could stand on. Ingeniero Bolsa, the bank's broker, is the flagship of that work.
The volume is the story: 5 areas · 46 flows · 200+ screens and states, specified for build and audited externally.
A 2012 ecosystem, and limited room to move
Trading lived in a third-party Norbolsa terminal bolted onto the bank's Banca Online: its own navigation, its own look, a yellow "Volver a Banca Online" button as the only way home. Charts and market data are rendered by the provider (Norbolsa, since acquired by Kutxabank) and could not be redesigned, so the scope was a renewed UI with targeted UX improvements.
The problem was 46 flows' worth of screens, each drifting on its own for a decade, with no shared structure keeping them coherent.
Learn the domain, then map all of it
First, fluency. I captured five reference platforms flow by flow and studied them: the language of the domain, how navigation is structured, how components behave, where information lives, and the patterns members already expect.
Map first, draw second
Then the product itself: every flow captured and wired into a click-by-click map under its five areas. The map is where the structural problems surfaced, not just the visual ones. The clearest: buying and selling, the reason a broker exists, sat three levels deep under a menu nobody opens to trade.
One skeleton, fourteen module families
The redesign started with the skeleton, not the screens: 4 page templates (two columns at 8/4 and 6/6, a single full width, with or without the main header) locked to three desktop breakpoints. Every screen in the product composes from one of them.
Fourteen module families, designed once
On that skeleton sits a library of 14 module families (search, calendar, favourites, news, rates, opinion, intraday chart and more), each designed once with its variants and states, then recombined screen by screen. A module can sit in a side column, own the centre, or run full width; the templates absorb every combination. Misplaced modules, company search among them, were rehomed to where the work actually happens.
Keep the data, change the hierarchy
The test was the densest screen in the product: the instrument page. Live price, order book, analysis tabs, news and charts arrived as one undifferentiated wall, and the charts (the piece that makes these products feel authoritative) were the provider's and couldn't change. The hierarchy could: one price block owns the page, best bid and offer beside it, Comprar and Vender in the header, news and analysis in their own columns. Nothing removed; members trade on that data. The treatment became the pattern for every dense screen in Mercados.
Specified to survive an audit
In banking, accessibility is a requirement with an auditor attached. Every component family shipped with its own accessibility spec: states, keyboard interaction, ARIA roles, and what the screen reader announces. Twelve of them, from buttons and tables to dialogs and calendars. All flows and documentation went to Ilunion, the external accessibility auditor; corrections came back and were folded into the system. A months-long design-QA pass then guarded the build, screen by screen.
The size of it
Shipping runs on banking time: security review, several vendors, a long chain to production. The screens are approved and verified, and the build is in implementation now, with a mobile version in development on the back of it. The broker is the flagship; the same structural base carried the ecosystem's everyday flows.
