Reimagining D3 Smart SOAR Dashboard

Overview

This case study shows the process of redesigning D3 Security’s Smart SOAR’s dashboard to improve data visualization and enhance features to better suit the needs of security analysts and SOC (Security Operation Center) managers.

My Role

Lead Product Designer for a team of 3 designers. I led the redesign project and was involved in cross-functional discovery workshops, defined the project scope, and designed the information architecture of the redesigned dashboard module.

The other designers worked on designs for specific features within the dashboard module.

Challenge

The previous version of the dashboard was quickly built by integrating a 3rd party library plugin. It lacked a lot of customizability and did not properly fit the specific use cases of our users, such as:

  • Data visualization only provided basic chart types
  • Data query ability was not deeply integrated
  • Limited customizability of dashboards
  • Visually outdated
  • Since it was built upon 3rd party library plugin, it was very difficult to develop new features on top of it

Outcome

  • Addressed usability issues identified through user interviews and testing with security analysts and SOC managers
  • Rebuilt data query system from ground up to allow users to extract deeper data points
  • Created new workflow that allows users to customize their data visualization
  • Introduced a new dashboard builder to address SOC managers’ need for custom dashboards
  • Updated the UI to match our new design language

Finding the right data

Due to the nature of the cybersecurity realm, our application contains a ton of interconnected data types that are scattered throughout the system. Users must go through the painful process of extracting relevant data through queries to find what they need. To make matters worse, the UI of the 3rd party plugin was unable to visually represent the complex queries and so this was a very frustrating step for users. In the redesign, the goal was to make complex queries visual and intuitive – by using blocks and sections to represent the hierarchy between query expressions, and interactions like drag-and-drop to allow users to build complex, nested queries easily.

Transform, visualize, very nice

Through discussions with our engineers, we've stumbled upon a pretty important insight. When it comes to presenting data, we've got two main options: either show it as is, or we can summarize the data by applying aggregations such as averages, sums, min/max to the data. Configuring this important step can get pretty tricky. Thus, we've included a lot of guidance and explanation for each type of transformation. Plus, the users can see the results immediately on the same screen to see how the aggregations transformed their data.One more thing: we know that sometimes simple aggregation is not enough for some power users. If the user needs to tweak the data in ways that go beyond the basics, users can write their own custom Python code using third-party libraries.

After completing the data transformation, the user can select the preferred type of data visualization. They can choose from a vast library of charts, diagrams, and custom HTML elements to personalize the way in which the data is presented and save it as a reusable widget.

Bringing it together

Now that the user has finished the most challenging part of creating a dashboard, they can now finally build their dashboard. The user can search, sort, or filter by tags to find the exact widget they need and plop it onto the editor. It is as easy as dragging and dropping the widgets from the sidebar. Furthermore, they can resize and move the charts around to their heart's content to build their perfect dashboard.

Look good, feel good

I took this opportunity to revamp our visual identity as well, because this was the first module I had the chance to redesign from the ground up. You can see the effects of this in our mobile application redesign and also in our design system.

© Made in 2023
Email
Instagram