Overview
ITPIE is a web-based networking software that gives users insight into the physical and logical assets, where they are located, how they are related, and how they are changing over time.
To help our users manage their networks efficiently, we added a mapping feature to our software. This feature allows users to visualize their network. It does not require manual updating as it is based on an automatic collection of information from network devices.
Our initial implementation of this feature was crude, and we intended to redesign it once we received user feedback. A year after releasing the mapping feature to our users, I was tasked with leading the research and design effort to improve and redesign this feature. This post describes that process.
My Role
UX research
UX design
UI Design
Team
1 UX Designer
2 Developers
1 Product Owner
Tools
Miro
Figma
User Research
I started by conducting contextual interviews with users. I also observed users working through tasks to gain insight into how they use the mapping feature, including any pain points they encountered.
Positive Findings
Prior to the implementation of the mapping features, users relied on spreadsheets and Vizio to organize and visualize network information. However, this new mapping feature helped users quickly visualize the network map without any manual effort, saving a significant amount of time.
Problems discovered
Despite its benefits, our research found that users were facing some major usability issues with the mapping feature. To address these issues, we used an impact effort matrix to assess the short- and long-term redesign plans.
In the short term, we decided to focus on low-effort changes to improve the overall user experience. We focused on elements that were easy to change while simultaneously investing time to design and iterate on more robust features.
Following are the problems we identified that we felt were relatively easy to fix but would significantly improve the user experience.
Limited working area
The area for viewing devices and connections was limited. The web application has a side navigation menu and a page header that, combined, consumes about 30% of available screen space. The functionality for this feature is spread across the screen, limiting the workable area. As a result, users were left with an extremely small area in which to view their networks.
Inconsistent and confusing UI
The mapping feature's UI was inconsistent and confusing, largely the result of various features and functionality having been added ad hoc over time at the request of users. Over time, the interface had become peppered with buttons and information in the side panel without any consistent approach. This required users to memorize where each functionality existed.
Poor navigation between maps
There was no way for users to switch from one map to another within the map interface. With no thumbnail or other indicator to signal which map they were opening, users often had to open up multiple maps to find what they were looking for, each time navigating back to the map list. Users described this workflow as tedious and time-consuming.
Design Phase
Our primary goal at this stage was to address the above problems in a short period of time. The team felt that addressing these issues would have a significant and immediate impact on user experience without necessitating an extensive redesign.
We iterated through several design cycles, reviewed different web applications, participated in UX brainstorming sessions, and even engaged in Improv sessions. (Apparently, we weren’t the only team to use Improv for a UX project!)
Increase Workspace
During the research phase, we learned that almost all users had at least two monitors on their desks. After consulting with the developer team, we decided to provide users with the following functionality:
Expand the UI to full screen to eliminate the navigation and header, resulting in a larger work area;
Provide an option for users to view the map on one monitor and the toolbox on a second monitor; and
Provide users with the ability to adjust toolbox size when only working on a single monitor,
Consistent UI
Increasing the workspace area was a stepping stone to our next area of focus, which was to create a consistent UI for the mapping feature functionality. During a design brainstorming session, the team established the following requirements for a taskbar:
A tool area that could be adjusted by the user and minimized when not needed
Ability to search for and access tools with ease
Ability to move tools to any area of the UI
Reviewing different web applications such as Google Maps and Invision (a prototyping tool), I proposed two different options.
We added details to the sketches and reviewed options with stakeholders. During the review, we realized that although the proposed options improved the consistency of the UI, the UI could not be easily expanded to add more functionality.
With that in mind, we went back to the drawing board.
After a couple of design brainstorming sessions, we designed a toolbox interface with all the desired qualities, including an interface that is easy to expand and does not limit the ability to add functionality. This design pattern was inspired by the Adobe Photoshop software, which breaks the toolbox down into categories, includes a search field at the top, and allows users to move and resize the toolbox.
In addition, because a second monitor provides more area for users to complete complex tasks, we implemented the ability for users to keep a tab open for frequently-used tools. We also implemented the ability to arrange tab order and resize tab windows.
Navigation Overhaul
To address the navigation issues, we looked at different applications for inspiration. We relied heavily on the Windows Explorer design pattern to accommodate a folder structure available from within the map. This gives users the ability to navigate from one map to another in a single click using a familiar design pattern.
User Feedback
We conducted usability testing to validate our designs before releasing the new UI to our users. Users were excited and genuinely overjoyed to learn that they could now extend their viewing area and navigate between maps in a single click. We continued to work on additional enhancements, but our users' positive feedback following the release of the new UI validated our decisions.