Tenable Cyber Security Technology Design

Tenable asked us to help their product design team create sleek, intuitive, and functional visualizations around the Network Topology Map and a list view we dubbed the “Connected Column.”

While these views were essentially different slices of the same data, they each hold very unique advantages. The Topology Map allows the user to get a high level view of their network configuration and see the relationship between assets represented by color-coded icons. The Connected Column allows an administrator to follow a chain of vulnerabilities by showing device connections to help them plan remediation of a threat.

We envisioned the network view as a node map that was capable of highlighting multiple connections between machines. This view had to be scalable in order to allow a user to see devices ranging from a couple dozen to several hundred within the network.

Another important feature of the Topology View was to help network managers navigate layers of information and investigate potential issues and threats. Through collaboration with the Tenable team, we decided to include a 3D representation of the node map that was organized according to a Purdue Enterprise Architecture model, which depicts multiple layers of the connections between nodes.

While this is a secondary view, it is another important view for users to see devices connected to a specific host or hosts within the network. This was meant to be a data-heavy view where information about the host and devices being at the user’s fingertips. Utilizing our Science Fiction Thinking process, we explored various ways to organize the data and provide additional visual cues to convey information through color (both normal and highlighted), stroke width, and element size.

Our interface and data visualizations had to combine the ease of use, speed and reliability of securing and monitoring networks. Within our design we used stroke width to determine traffic between network connections (Higher traffic, thicker stroke). We also used traditional network views with vulnerabilities indicated by color around the nodes. This gave the existing users a familiarity with the new interface while the users learned more advanced capabilities and experiences within the portal. The designs below indicate such attributes.

Continuing our partnership with Tenable, we joined their team of engineers to help develop these screens as a part of the overall front-end work for the Industrial Security product. Since it was our creative team who pushed the boundaries in science-fiction thinking for the interface, it only seemed natural for our development team to build these visuals within the architecture.

Through a very iterative and collaborative development cycle, our team was able to build and test the 3D visualization module as a standalone React app. Coupled with D3.js, we were able to develop an interactive component and manipulate the network data in a way that was faithful to the designs and motion prototype we had envisioned for the 3D Purdue model layout.

This project was a very rewarding collaboration that allowed us to flex all our Science-Fiction Thinking muscles in design and development of a truly cutting-edge interface. We are grateful for the opportunity to work with the Tenable team and hope to continue our partnership on building the futuristic world within the cyber security industry.

For more information on Tenable’s Industrial Security product, you can visit there website here: https://www.tenable.com/products/industrial-security