Eleken made every advisor, investor, and customer love Vector0's new design

Using sidebars to make the pages look simple yet informative

Most of the DarkWave pages represent simple charts that contain all the essential information:

If you need to find more about a certain detail – like vulnerabilities for a certain IP address in this case – you can click on the IP to open the sidebar containing additional data. You can also expand the sidebar for more detailed information.

The expanding sidebar feature allows to retain the simple and straightforward look of the DarkWave while granting users easy access to additional information.

Designing metrics to contain all the important data without looking overwhelming

As DarkWave shows a lot of different data on vulnerabilities, we had to present this data in a simple and straightforward way, making it easy for the users to distinguish one chart from another and understand them even after a brief glance.

To achieve this, the client reached out to DarkWave users and asked them to share the feedback on how they want the metrics to look, what they like already, and what could be improved. After gathering feedback, we created two versions of one chart and showed it to users. After several iterations, we came up with this design for the chart:

The chart shows the existing vulnerabilities and whether they are past their due date or not. All the vulnerabilities are divided into four categories depending on their severity: critical, high, medium, and low. Each category has its own color to quickly distinguish the overall severity level in the chart.

As this design approach got approved, we used it as a reference for visualizing other complex metrics in the project. For instance, the Exemptions metrics was designed in a similar way:

Here’s how the metrics look altogether on a screen:

Viewing and editing vulnerabilities in a simple way

The main function of DarkWave is to spot and display vulnerabilities. To do that, it uses data collected from various sources, such as Rapid7, Tenable, and others.

Here’s how it looks at first glance:

Our designer added the Severity filter option to allow users to spot most threatening issues first. Severity is determined using the globally recognized Common Vulnerability Scoring System (CVSS). Users can also track the reporting source and access a concise chart summarizing vulnerability count and severity at the screen’s top. This provides essential insights on a single screen, streamlining information consumption.

And if you need more details, such as what exactly is the vulnerability and how to solve it, you can just click on the vulnerability and see its description, the solution, the source informing about the vulnerability, and other things:

The expanding layout allows users to preview data in the way they prefer to. You don’t necessarily need to see all the information about the vulnerability if you don’t need it (for instance, if it seems low-risk and therefore less significant), but you are always able to find out more about it in just one click.

Merging vulnerability records from different cybersecurity providers

DarkWave uses the data from different sources to record vulnerabilities. This is great for cybersecurity reasons, as the more sources, the better. Furthermore, different sources can provide various information on one and the same vulnerability. But at the same time, it might be confusing to see so many similar records in one list.

To fix that, we decided to add the merging feature to DarkWave. Now users can

Merge these records into one or unmerge when necessary

Choose a source from a drop-down list and easily switch between them

Exporting, updating, and editing vulnerabilities

While Eleken mostly focused on simplifying the data presentation in DarkWave, we also wanted to give more flexibility to those users who already feel familiar with the data. That’s why we created various features that allow to operate with vulnerabilities.

You can easily export all vulnerabilities or several of them.

Pick the type of report of the vulnerability you want to export and the file format.

Add custom vulnerabilities.

Add notes to vulnerabilities or edit them.

Eleken created the full-functioning MVP for Vector0 by their full launch in January 2023

Vector0 had a great concept that initially lacked UI/UX expertise. Our designer helped them create a cybersecurity solution that can be used by both beginners and experienced users. And though DarkWave is a data-heavy platform, it doesn’t look intimidating. Most of the essential information looks like simple charts with expanding sidebars providing additional data in one click.

As a result, our client received a full-functioning MVP by the deadline. We provided the Figma data, videos explaining the design, and the UI kit to help the developers integrate new design into their platform. The client was extremely satisfied by the outcome.

Here’s what Vector0 says about our collaboration: