Press "Enter" to skip to content

Case Study / 3D Network Topology Visualization

The story
As a close-knit team with optimal collaboration between engineering and design, we were at the pinnacle of our capabilities from having successfully introduced a new product into the market, and steadily evolving it to maturity. This gave us confidence to explore new technologies for visualization.

My role: Director of Design, Principal Designer
I assisted engineering with selecting the visualization solution and hired a freelance 3D modeler.
I collaborated with the Lead Developer in adapting our UI patterns to the functionality that was particular to this feature.

The objective
The needs of DevOps teams are predicated on sharing awareness of deployment and release activities. One of the ways to achieve this is with a common view of applications deployed to cloud services and static environments.


The approach
The Star Topology best conveys that the Application is the reference point in DevOps, displaying it at the center of the network.

Users can highlight each connection the Application has to an Environment it’s deployed to, making it easy to trace issues and see which services are active or inactive.


The default behavior to this visualization is the rotation of the network, displaying the complexity and the reach of its nodes. The controls are simply to “Pause” or “Play” this movement, and to freeze a rotational axis.


The challenge to the design resided in devising the 3D iconography. Although it derived from the existing 2D icons, in a third dimension with movement, these icons need to be recognizable from all angles.

We went through an extraordinary number of iterations to find the right color palette that was contrasted for distinguishing each object, while also creating an esthetic pattern.


Adding value
While exploring the possibilities of this framework we discovered utility in being able to hide certain objects, thus isolating a particular connection in the network.

To convey this functionality to the user we presented these interactions within a well adopted UI pattern that listed the hierarchy of connected objects.


Outcome
This feature contributed to moving our position on the analysts’ quadrant upward in the strength of our offering, and furthest ahead of our competitors in strategy as well as vision.

Its usage as intended remains to be studied over the long term, as its adoption is contingent upon organizational factors that customers keep opaque.


Case studies

User Research
Solutions to getting input

Consumerize Enterprise UX
DevOps Web Application

Core Function UI redesign
Release Automation

Innovation in DevOps UX
Runtime Visualization

Data Visualization
3D Network Topology

Enterprise Mobile UX
Commercial Real Estate Sales

Short Stories + Interactivity
Branded Episodic Content