Campus Network Topology

Network engineers need an easy and flexible way to design the network topology for his company’s campus as part of the network setup experience.

Business background

See Device Port Mapping

My Role

I was asked to join the project to design the interaction of different steps within the Build an Access Network Workflow, and for this project it was to design the topology interaction for the Design Topology step. My role was being the visual and interaction designer, and producing high-fidelity mockups, while the Principle UX Architect, who was the main driver for this project, took on the product manager role and also had already designed out the initial wireframe and flow.

Results

This project was paused due to business priority reasons, and it was never implemented. But my designs were referenced by other designers to continue to push the design quality of the product.

The Process

This project was essentially a design for a canvas experience. First, I had to understand how much control do we want the user to have. This interaction could’ve been more free form, like a design canvas, or PowerPoint, where you can drag and drop anything to anywhere on the canvas, and make your own diagram. Or it could’ve been a more controlled experience, where the user simply clicks and types to make this diagram, and allow the system to do the drawing. Given that the user has a lot going on at this step of the network set up workflow, we felt like the user will need more handholding, and decided to go with a more guided experience.  

Below is a step animation of the final interaction design for a user to tweak from a topology template.