Visual

   

Visual - Product UI Update

Company: Vectra AI
Teams: UI team
Duration: 6 months for initial launch and continuous update
Target devices: desktop and tablet
Role: Visual Design

What is the Vectra desktop

The Vectra desktop shows the analyzed real-time network and full life cycle of each event. It also shows whole network connections with its threat status.

Project description

The UI needs to be easily understandable by non-technical users. Each detection needs to be visually differentiated from each other by its type and threat score and the high threat event should be visually highlighted.  It exposes fundamental attacker behaviors in network traffic and isolates affected hosts and their networks.

Challenges and solutions

The networks involve a few hundred thousand hosts and triage the highest risk threats out of all threat events. I used force-directed three graphs to represent networks

The UI visual was simple but very typical, full of data tables and scores. To give a fresh look and make the user easy to approach the security concept, I utilized game-style graphics.

Solve problems creatively and design to the undefined needs of users

Original UI

The product UI was simple and clean but didn't have a visual hierarchy. Vectra used the corporate "Green" color for the main color scheme of the UI and didn't convey the urgency nor seriousness of threats that Vectra wanted to inform customers.

Final UI