The Redesign of Mapping Feature
Background
Until recently, network engineers who manage big and small networks across cities, states, and continents did not have a way to visualize their managed network as a dynamic diagram. The only option was to create a Visio diagram, into which thousands of devices would be added along with device information (i.e., IP address, Hostname, etc). To keep the diagram current, network engineers would need to update it by hand as their network changed over time.
To help our users manage their networks more efficiently, we added a mapping feature to our software. This feature helps users visualize their network. It does not require any manual updating as it is based on an automatic collection of information from network devices.
Our initial implementation of this feature was crude, and the intent was to redesign it once we received feedback from users. A year after we released 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.
Research and Discovery
I started by conducting contextual interviews with users. I also observed users working through tasks in order to gain insight into how they use the mapping feature, including the tasks for which they use this feature and any pain points they encounter.
Based on this research, we learned that our users were facing some major issues. We used an Impact Effort Matrix to assess the short and long-term plan for the redesign.
Problems Identified
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 have a significant impact on 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.
Lack of a Cohesive UI in Map Section
The UI of the mapping feature lacked any semblance of a consistent UI. This was largely the result of adding functionality to this section as users requested it. As a result, the interface became peppered with buttons and information in the side panel, but without any consistency, requiring users to memorize where each functionality existed.
Lack of an On-Boarding Workflow
We learned that users were frustrated when they found themselves on an empty screen with no information about how to process.
Poor Navigation Between Maps
Users had to toggle between different maps to understand various parts of the network. This required 3 to 4 clicks for most users to navigate.
Design Phase
Our primary goal at this stage was to address the above changes in a short period of time. Our thought process was 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!)
Initially, we designed a new toolbar that could be changed by users based on personal preference. Users could collapse the toolbar if they were just viewing a map.
However, during a feedback session with our product manager, we realized that this approach limited us to a certain number of functionalities. While we liked the initial proposal, we wanted to ensure the new pattern could accommodate additional functionality as needed.
I engaged the team in a brainstorming session during which we agreed to a design approach that addressed the following traits that we felt were important:
- A tool area that could be adjusted by the user and minimized when not needed.
- Ability to search for and access tools with ease.
- An interface that is easy to expand, not limiting the functionality that can be added.
- Ability to move tools to any area of the UI.
After a couple of design brainstorming sessions, we designed a new toolbox that had all the desired qualities. Inspired by the Adobe Photoshop software, the toolbox is broken into groups, a search field is available at the top, and users can move the toolbox to any area on the map and resize it as needed.
Increase workspace
The next task was increasing the workspace. During our discovery phase, we found out that most (if not all) of our users had at least two monitors on their desks. After consulting our developer team, we decided to provide users with the following functionality:
- Expand the UI to full screen to eliminate the navigation and header to provide a larger work area;
- Provide an option for users to view the map on one monitor and the toolbox on a second monitor; and
- Ability to adjust the toolbox size for instances where users are only working on a single monitor.
We realized that a second monitor provides more area for users to complete complex tasks. Therefore, we implemented the ability for users to keep a tab open for tools they frequently use. We also implemented the ability to arrange tab order and resize tab windows.
Navigation Overhaul
Users repeatedly mentioned that they need to switch between different maps and in doing so often keep multiple tabs open. Users expressed the desire to have a folder system in which they can organize these different maps.
We looked at different applications for inspiration when redesigning the navigation system, but realized that the design pattern we were looking for was the Windows Explorer window.
This approach allowed us to accommodate a folder structure and give users the ability to navigate from one map to another in a single click.
User Feedback
We conducted usability testing to validate our designs before releasing the new UI to our users. There was a lot of excitement among users who were genuinely overjoyed to learn that they could now extend their viewing area. We continue to work on additional enhancements, but watching our users navigate and work with the current UI with greater ease indicates our initial decisions were good ones.