As technologies advance, cybersecurity becomes more and more paramount. Dealing with consequences of data breaches is more challenging than working on their prevention. After all, once the sensitive data is out, it could hurt everyone it concerns and the damage can’t be undone.
DarkWave from Vector0 is a platform that provides complete Attack Surface Management capabilities. They help clients reduce potential of a breach by highlighting their entire attack surface, risk, vulnerabilities, and misconfiguration that could be dangerous.
Such an advanced solution usually requires high-end UI and UX. Being a small startup, Vector0 were trying to do most of the work themselves. But having just one UI developer working on the UI and the back-end, they quickly understood it was not enough.
Vector0 planned to launch their DarkWave product in 6 months, and hoped to have a full-functioning MVP completed by that time. So, they were looking for a designer experienced in cybersecurity solutions to help with the UI and create the UX from scratch.
Others did not understand the cybersecurity or SaaS space as in-depth as Eleken did, which removed more vendors from our selection criteria. In the end, Eleken provided an affordable, easy-to-follow cost structure for small startups, excellent support, a dedicated engineer, and experience in our vertical.
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.
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:
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.
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
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.
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:
We have presented the new UX design created by Eleken next to the UX we threw together with no UX experience, and the overall feedback was terrific. Every advisor, investor, and the customer loved the new design.
If it feels like our UI/UX design company is a good match, but you still have questions about our work process, we can give you a free 3-day trial working with one of our designers.