FireMon
Reimagining data
Role
Lead UX Designer
Timeline
4 mo
Tools
Figma
About FireMon
FireMon delivers industry-leading security policy management, cloud security operations, and cybersecurity asset management solutions to over 1,700 enterprises in nearly 70 countries. Our security policy management platform is the only real-time solution that reduces firewall and cloud security policy-related risks, manages policy changes, and enforces compliance.
Overview
Dell came to us asking for an easier to way to exclude IP addresses and subnets from certain compliance zones. The current method required users to manually create individual network segment and then assign them to different compliance zones, only to remove them. They also had to manually check that there wasn't any overlap anywhere. This was an extremely long and tedious process.
The Goal
Give users the ability to exclude IP addresses and subnets from certain compliance zones all on the same page.
My Process
Research
-
User Interviews
Synthesize
Ideate
-
Task Flows
-
User Flows
-
HMW
-
Lo-Fi Sketches
-
Wireframing
Design
-
Hi-Fidelity Mocks
-
Hi-Fi Prototype
Research
I interviewed 5 users (security engineers) at Dell to find out what the peaks and pits in the experience of excluding IPs from compliance zones are. The interviews were also used to find out behavioral patterns around the app, such as motivation and barriers.
Asking the right questions
"It takes way too long to create individual segments."
.png){kind=small}
“It can take months to go through our list of IPs and create the proper network segments.”
“Why do I have to go to a different page to add/exclude IPs from compliance zones.”
“The entire process is long and tedious.”
I created a task flow to understand where in the process of completing the task, the user would experience friction. What I found was that there was no way of excluding certain IP addresses/subnets from compliance zones unless those IP's users want to exclude are grouped into a network segment. Further, in order to create a network segment, users needed to go to the network segments page to create one.
How do users use it now?
Paint points when performing the task
User needs to navigate to different pages to create network segments.
The process of creating network segments is too time consuming
Adding a network segment to a compliance zone in order remove it from a compliance zone is confusing.
Key insights from research
01
Inefficient workflow to complete a simple task
User needs to go to a different page to create network segments.
02
Creating network segments takes too long
Individually adding IP addresses is a long and monotonous process, taking months to complete.
03
The process of excluding IP addresses doesn't make intuitive sense
Users have to add a network segment to a compliance zone in order to exclude it from a compliance zone.
Ideate
What might the ideal workflow look like?
Having thought of solutions for the pain points, I tried to think of the most ideal way a user would perform this task. I created a user flow in order to better understand when each of my solutions would take place during the work process.
-
All on the same page
-
Less clicks
-
No confusion
Brainstorming, wireframing
I started brainstorming the layout of the new functionalities. To narrow down the scope, I focused on three features: 'Create Network Segment' button, a modal that creates network segments, and an 'Exclude' function.
How might we help the user stay on the same page to accomplish the task?
1.
Users needed to go to the Network Segments page of our app in order to create network segments. So the easiest solution was to be able to create network segments on the compliance zone page.
Solution 1:
A ‘Create Network Segments’ button was added to the compliance zone page so users can create network segments without having to navigate to the network segments page.
How might we make the process of creating network segments easier?
2.
User had to individually add every IP address which took an extremely long time.
Solution 2:
Create a modal in which you can create network segments using IP address ranges and CIDR.
How might we exclude IP addresses without having to add them to the compliance zone first?
3.
Having to add, then remove network segments from compliance zones was unintuitive and time consuming.
Solution 3:
Create an 'Exclude' function in which you can exclude network segments from compliance zones.
Design
Creating an MVP
After sketching, I started to design in hi-fidelity one solution at a time creating an MVP.
A 'Create Network Segment' button was created on the compliance zone page
A modal was created to be able to input IP addresses using IP ranges and CIDR
An 'Exclude' checkbox was created to give the user the option to exclude the network segment when creating one.
An 'Exclude' checkbox was also added next to all selected created network segments to give the user another opportunity to exclude. When unchecked, the network segment would be 'included' in the compliance zone.
The Pivot
Research reveals there's crucial information not being displayed on our tables
After having more conversation with our users, they all mentioned that our dual tables were missing information that would be valuable to them. 3 additional columns were added.
Type
Exclude
This would prevent users from naming their network segments with an IP address
This would differentiate between 'user' generated and 'system' generated network segments
This would give the user the ability to exclude or 'include' network segments from complaince zones.
A better way to display our tables
With the addition of extra columns, I came across the obvious issue of running out of horizontal space. The tables became difficult to read and navigate because there was no room for the information to breathe.
This was due to the fact that our dual tables sat horizontally next to each other. In order to keep the additional columns, I needed a way to display the tables' information in a way that wouldn't overload our users with information.
Lo-fi stacked tables
The solution was to stack the tables vertically. Not only would this solve our current problem, but also saves us headaches in the future. Also if we ever decide we need to add more columns later, this gives us the real estate to do so.
Additionally, toggle buttons were created in order to give the user the option to switch between the vertical and horizontal layout.
Hi-fi stacked tables
Hover-over info texts were added to educate the user of the new additional columns and functionality.
Collaborating with development
Many working sessions with development took place in order to design the vertically stacked tables. Technical restraints were taken into consideration and adjustment were made to the amount of information being displayed, the spacing between the tables, the 'Add' buttons underneath the tables, and the vertical and horizontal toggle icons.
Final design walkthrough
My final thoughts
What was initially thought to be just a compliance zone issue that could be solved fairly easily by implementing an 'exclude' function, other consequential user experience issues were discovered.
Our horizontal tables needed tweaking. When adding more information to them (which was inevitable), our tables became cluttered, convoluted, and difficult to read and understand. Simply stacking the tables saves users from exerting extra effort to find what they need due to information overload.
With the new UI, users can now create network segments and add and exclude IP's/subnets all on the same page, with tables that are easy to read and navigate.
If I had more time,
I would...
1.) Be able to test with users for feedback.
2.) Be able to create multiple network segments at once.
3.) Simplify table layout.
What I learned
I learned about information density and how it affects the overall experience. After making the decision that additional information needed in our tables, our tables needed to be redesigned in a way that would still be easily readable without overwhelming our users.
I also learned to be transparent about my design process with engineers and product managers earlier than I had been before. Due to technical limitations, many of my designs had to be reiterated on which prolonged the overall process. This could have been avoided if I had been more proactive with communicating with developers earlier on in my design process.