Product feature, UX/UI
Creating a new concept for Scan History that integrates information from 2 platforms.
WHAT WE DID
One of our customers requested an interesting feature. The request was to display scans investigation ticket data flow in our dashboard, called X-ray. This feature will give the users the ability to understand how and when a request has been handled by our IR team.
As the project's designer, my goal was to create a straightforward and easy-to-use design that is simple enough to use, modern, and clean.
THE CHALLENGE & GOAL
Support requests are managed using Freshdesk, which is a 3rd party solution. The actual handling of the request is done using X-ray.
Customers and the incident response [IR] team don’t know anything about a requested scan except the fact it has been requested and the final verdict of the scan.
Before the introduction of the new capability, to see the specific results of a certain case or filter by a particular subject, users had to go through multiple stages. This included going to the Advanced Filter option - which is extremely complicated, detailed, and includes many additional filters. In addition, the length of the filter created a situation in which users who use the most common screen resolution - 720p (1280x720 pixels) - would even have to scroll down a fold to see the relevant filter, making the user experience even more complicated.
Based on a review we made with our customers, we understood that some users have never tried the built-in filters and weren’t aware of this functionality. Other users – who knew this feature is available - found that filtering by attribute data was especially cumbersome as they had to:
Open an expand-collapse modal
Scroll down until they found the category they originally needed
Search for or type the desired value
Scroll down until they saw the Apply button
Based on our findings, we decided to add new functionality: a filtered view of the Top X Attacks – based on the specific needs of the user.
The goal of this project was to improve the display of scan investigation ticket data flow in our dashboard, X-ray. The objective was to give users a clearer understanding of how and when a request was handled by our IR team.
To understand the needs and expectations of our users, we conducted user interviews with several members of our target audience. These interviews aimed to gather information about their current process for monitoring the progress of scan investigation tickets and their expectations for the X-ray dashboard.
Our user research revealed that users would like to have a clear and comprehensive view of what has occurred during the investigation of a scan, including the findings and all communication between the user and the IR team. Users expressed the desire to have a centralized location where they can access all relevant information about a scan, rather than having to search through multiple sources.
Based on our research findings, the following requirements were identified for the X-ray dashboard:
Display the status of a scan investigation ticket and its progress
Show a timeline of all communication between the user and the IR team
Centralize all relevant information about a scan in one location
These requirements served as the foundation for our design decisions and helped guide the development of the feature on the X-ray dashboard.
We changed the Scan History concept, to work as a "conversation" between 2 parties, our IR team, and the customer.
Additionally, we added to it the conversation itself from the Freshdesk tickets.
The messages will have a threshold of 2 lines, with the option to see more if the message is longer.
It was designed this way so that we can add more features in the future, such as letting our IR and customers communicate from it.
We need to do the next things:
Create an experience for admins to track and understand the scan flow while it has been investigated - using X-ray.
We don't need to create a ticketing system infrastructure - meaning with no response using that feature - only visibility.
When we started designing this component, we wanted to make it short, easy to understand, and not too extrusive. We thought about the timeline and how the user will understand the order of events.
At the start, we designed it in a shipment model, you know like you order an item from Amazon but that didn’t work because:
The information was shown in steps and not all at once, making the user move from tab to tab in order to understand what was going on.
Some of the steps had very little content making huge gaps between the content and the edge of the component.
It was too big and took almost half of the screen.
So we looked at other timeline display methods. In the end, we choose the online chat method (look and feel/component/vibe).
We wanted to make it easy for the user to understand the timeline of events. Therefore, we designed it as a "conversation" between 2 parties, our IR team, and the customer in order to help the user understand who said what and when. Additionally, we added to it the conversation itself from the Freshdesk tickets.
In order to save space so the whole component will appear over the fold, long messages will fade after a few lines, and users will be able to choose if they want to display them or not.
In order to check user feedback about this new feature, we made a few points we need to check:
Monitor the number of clicks on the feature.
Add a rating option.
Monitor how many users go directly to Freshdesk - using the “Open in Freshdesk” option.
As a cyber security company, visibility is highly important. We wanted to show our customers more visibility regarding the investigation process that is shown on our platform. This led to a new feature that combines a flow from two different platforms.