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.
We asked both the IR team and our consumers the following: What are the most important things that you would like to see and know about that occur during a ticket investigation?
After that, we checked if there was more important info we would like to display.
We made a list and designed the wireframes having this list in mind.
We wanted the users to track and understand the IR handling on requested scans.
What IR has done as part of the investigation conversation between the requested and the handler
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:
a. 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.
b. Some of the steps had very little content making huge gaps between the content and the edge of the component.
C. 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.