Designing User Tools in Networking Software

Background

This networking software connects to network devices using specific commands that users add to the “command” folder. Previously, these commands were built by the user using a combination of different tools. Our goal was to streamline this process by consolidating the tools to build commands into a single command development interface.

Command Creation Workflow (simplified):

Research and Discovery

We interviewed users who are currently responsible for adding commands to the software. We asked them to identify their process.

Through these interviews we learned that: 

  1. The process for adding a command includes actions in several applications, specifically, building the command using Visual Studio .NET, verifying the command using a RegEx validation website, and testing the command using Command-Line.

2. Each command has subfiles (parsers), and each subfile connects to a specific type of device and version of that device.

Through these interviews, we identified 3 major pain points developers encounter when creating a command:

  1. Users had to constantly copy and paste information between applications.

2. Users had to manually validate each subfile (parsers) that they create for a command. There can be multiple subfiles for each command.

3. Developers had no way of knowing which subfile (parser) was used when a command was run. Therefore, they had no way to identify which subfile worked or needed correction.  


Based on what we learned during the Research and Discovery phase, we identified ways in which we could improve the overall user experience while consolidating the tools to build commands into a single user interface.

Design Approach 

Using what we learned, we set out to design an interface that included all the steps users take to add a command and subfiles (parsers). 

During the initial design iteration when working on whiteboards sketches we realized that users’ needs may change depending on the exact task they are performing, we wanted to design a customizable interface to help maximize screen space. We also aimed to reduce the laborious copy-and-paste workflow that users were experiencing, with the aim of increasing user speed. 

We began whiteboard brainstorming on different design solutions. Through the design exploration, we realized we need to accommodate different user tasks (coding and testing).

Whiteboard sketches

We eventually designed a screen with two sections – coding (left) and testing (right), which can be resized. The two sections incorporated the entire workflow for creating a command.

By combining the coding and testing tools into one interface, we eliminated the need for copying and pasting information between applications. 

We added a button to the interface that runs all the subfiles in that command and highlights which subfile was used.

By providing a  simple indication of which command subfile is being used, users can see the code that is being used. This eliminates the guesswork.

Indicating which subfile is being used

In order to optimize the screen space to accommodate a variety of tasks, we incorporated the following features:

Open a separate screen for the testing window:

Collapse sections that are not needed:

Close the testing window entirely when not needed

User Feedback

We introduced this new interface to users and were met with overwhelmingly positive feedback. After users began actively using this new interface they reported improved productivity and a significant decrease in frustration from the previously-noted pain points. We continue to receive user feedback in an effort to further fine-tune this interface and accommodate users’ needs.

Final Command Development Interface