Designing
Command Tool
UX Research, UX/UI Design
Overview
ITPIE is web-based networking software that connects to network devices using specific commands users add to a “command” folder. Previously, the user created these commands using a combination of different tools. Our goal was to streamline this process by consolidating the tools into a single interface.
My Role
UX research
UX design
UI design
Team
1 UX Designer
2 Developers
1 Product Owner
Tools
Miro
Adobe XD
Research & Discovery
We asked users to talk us through their process of creating a command. Then, we conducted field research where we watched users use software to create a command.
Findings
Process of Creating a Command
We had two major discoveries as a result of watching users add commands.
The process for adding a command included 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.
Each command has subfiles (parsers), and each subfile connects to a specific type of device and version of that device.
Problems Discovered
Through these interviews, we identified three (3) major pain points users encountered when creating a command:
Users had to copy and paste information between applications constantly.
Users had to manually validate each subfile (parser) they created for a command. There can be multiple subfiles for each command.
Users 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.
Design Phase
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.
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).
Whiteboard Sketches
During the initial design iteration, when working on whiteboard sketches, we realized that users’ needs may change depending on the exact task they are performing, so 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 needed to accommodate different user tasks (coding and testing).
UI Design
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. In doing so, it is now clearer to users which command subfile is being used, eliminating any guesswork.
To optimize the screen space to accommodate a variety of tasks, we incorporated the following features:
Users can view testing results in a separate window, which can be moved to a different monitor if desired.
Users can collapse sections that are not needed or used.
Users can close the testing window entirely when not needed.
Final Interface Design
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 continued to receive user feedback in an effort to fine-tune this interface further and accommodate users’ needs.