Device Port Mapping
Network engineers need an automated way to assign VLANs (Virtual Local Area Network) to device ports as part of the network setup experience.
Business background
Our product was not growing as fast as anticipated. Many customers were deploying our product in their lab environment, but not for production. So as an incentive to adoption, our organization rolled out a program, which I’ll call it “GT” for NDA reasons. The GT program had a series of workflows, which are step-by-step wizards that helped network admins perform tasks that was necessary to build an access network for their organization. And there was a sales incentive for customers who can complete a certain number of workflows for their organization. This was a huge opportunity for our UX team to leverage to reimagine the experience of setting up an access network.
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 was to design the Wired Endpoint Onboarding- Port Mapping step in particular. 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 was the screen and notes that the UX Architect delivered to me to start designing.
These were some of the design tasks that I had to consider and work on:
I had to redesign the device illustration to be accurate to what it looks like in real life.
I had to decide the entire interaction of how a user would select and assign VLANs to a port
I had to design the flow for both the automated and manual versions
Before I started redesigning, I rewrote the design requirement for myself so I can understand what the user is trying to do. This was my notes.
The first challenge was how the overall layout should look like to accommodate the scale of the number of VLANs a user could have. I explored a few different ideas, but ended up with the most simple approach, which is showing the device on top, with VLANs on the bottom, and user will only make selections by click on the ports (instead of drag and drop, or other interactions)
And then, it was thinking through all the interactions a user would want to have in selecting ports. I had to dig in and understand how the user thinks about the ports, and how they assign and decide manually. I also looked at seat selection interaction for movies and airplanes as inspiration for the design. I also had to research and look at several variations of switching devices, so I can simplify the illustration into building blocks so other designers can easily recreate other device illustrations.
Lastly, the main design challenge for Port Mapping was how to show the different assignments that was meaningful for the user, but still scalable because a user can have hundreds of VLANs that he has to assign. The UX Architect had already used the concept of using colors for different assignments, but we quickly realized that we cannot rely on color to be the unique identifier. I decided to use the color as indication of the different VLANs on a given screen, but they will not be unique identifiers of the VLAN. This reduces how many colors we needed, but we can still differentiate between the VLANs on a single device.
Learnings
I had a lot of fun getting into the colors and states of port mapping interaction. I think one lesson from this project was that with enterprise products, scale is always a factor that designers have to think about. The color coding looked beautiful on the design, but in practice, it is completely useless if each color was going to be unique identifiers. There were no enough colors in our design library to accommodate that many, and even if there were, the user would not be able to make sense of it.
