Banco Azteca Network Operations Center

The challenge

The heart of one of the largest banks in Latin America is its network operations center (NOC), where a team of several dozen engineers monitors billions of data points every day in near-real time. All mission-critical banking operations, from credit card fraud monitoring to bank robbery early warning systems, feed into one highly secure room, with data sources as diverse as AS/400, Tibco Spotfire, OSIsoft PI, Alnova FS, BMC Patrol, and SQL Server to name just a few.

Because NOC engineers spent most of their day monitoring live data streams on ASCII terminals, they quickly reached the limit of human capacity. With finite space in the operations center, they couldn't solve the problem by adding more staff. They had to make the existing staff more effective.

operations center, before — FIG. 1The operations center, with engineers at their desks and the monitor wall behind them.

The client asked my organization to reinvent their NOC from the ground up with just four requirements:

The solution must use only existing hardware and software — no new computers, changing operating systems, or even a service pack.
Build upon the engineers' existing skill sets. The new system cannot require extensive retraining.
The technologies used must meet preexisting standards for certified security and auditability.
Bank staff needed to be able to maintain and extend the system without ongoing support.

What they had

The screens the operations center staff stared at were difficult to work with. Each NOC employee was responsible for a specific part of the business, represented by scrolling data streams on their terminal and on a bank of 54 large-format monitors at one end of the room.

We observed that when the engineers' eyes began to tire toward the end of each shift, they would get up from their desks and approach the monitor array at the front of the room to get a better view of the tiny scrolling boxes of text they were required to watch.

old interface screens before the redesign — FIG. 2The old screens: terminal windows and status grids full of scrolling text.

Ethnographic research

This project afforded an unusual opportunity: since we were designing a system for a very small group of people, we had the chance to interview each user individually and tailor the system design to their needs with unprecedented specificity. Rather than generalizing people into personas, we addressed the needs of the actual people in the system design, down to their roles and responsibilities and even the location of their desks within the NOC.

persona document — FIG. 3A one-page profile of an operator: role, process, systems, and where the person sits in the room.

System architecture

We quickly learned that the operations staff needed an abstract representation of their system, which required first creating a deep understanding of their system architecture.

architectural documents — FIG. 4System architecture diagrams we drew to understand how the pieces connect.

Designing visualizations

On the client side, we worked with several engineers, architects, and IT professionals to arrive at a clear, understandable representation of the things that mattered most.

diagram sketches — FIG. 5Pencil sketches of ways to draw the system, from isometric maps to subway-style layouts.

After several rounds of iteration, we landed on a representation that made sense to the users. The next step was to optimize the diagram for presentation on their workstation and monitor bank screens.

sketches in context — FIG. 6Sketches placed against the monitor wall, divided into left, middle, and right sections.

diagram mockup — FIG. 7Mockups of the diagram on the monitor wall, seen from the operators' desks.

Increasing fidelity

Once things looked good as pencil sketches, the following steps were a series of progressive increases in the fidelity of the design — several rounds of wireframes to model what the system would look like on both desktop terminals and the monitor bank.

fidelity increases in designs — FIG. 8The same diagram at three levels of fidelity: gray wireframe, line art, and styled.

FIG. 9A set of wireframes for the panels, dialogs, and docking behavior.

Developing a visual language

Informed by a solid system representation, the next step was to determine the diagrams' appearance. The client selected their favorite of several mood boards that reflected the visual character they liked best.

FIG. 10Three mood boards and matching style boards: hip, espresso, and modern.

We then applied that visual language to the diagrams…

skinned diagrams — FIG. 11The diagrams with the chosen visual language applied.

…created an accompanying style guide…

…and a parallel functional specification detailing how to build, maintain, and modify the visualizations.

The result

When all was said and done, the client had a functional, deeply engaging center that markedly improved their operational effectiveness and their staff's mental state.

running system — FIG. 14The new diagram running on the monitor wall.

“Jason has a unique blend of being a developer, UX architect, and designer — a rare breed. From his mad dev skills, beautifully written documentation (architecture, requirements, workflows, etc), overall understanding of the user experience, then he'll turn around and produce design assets. Beyond awesome, he really sets the bar.”

Issa JohnsonSenior Producer

← All work