Project Type: UX/UI Design, UX Research

My Role: Lead UX designer and Researcher

Team: 2 Product Managers, 8 Engineers

Timeline: March 2021 - March 2022

 

Brief

VMware’s NSX-T Malware Prevention is a core feature of the NSX Advanced Threat Prevention (ATP) solution. It detects and analyzes malicious files in a sandboxed environment, providing security teams with insights to monitor and prevent threats in real time. This feature played a pivotal role in winning the Goal Prize in Cybersecurity Excellence Award in 2022 & 2023 as part of the ATP solution.

 

Problem

Designing for cybersecurity introduces distinct UX challenges, as Malware Prevention was a relatively new security feature lacking established design patterns.

The need is crucial to align complex backend requirements (e.g., malware detection techniques, security logs) with intuitive data visualizations.

Additionally, engineering priorities sometimes conflicted with business goals, creating ambiguity in design scope.

 

With primary internal research conducted with 14 participants. We synthesized the following feedback from two major user personas.

 
 
 

Solution Overview

Overview Page

Detailed Event View

Multiple Inspections

Customized Report

 

Understand Customer’s Expectation

In VMWorld 2022, I hosted an online UX workshop in 8 sessions with 83 worldwide customers. It was a great opportunity to learn about the day-to-day work of different type of IT professionals, and their expectations towards the new security feature. Afterwards, I synthesized all the key features they want into “Quotes”, which reflects the variation of user need from IT directors, IT admins, and Security Admins.

“I’m looking for scalable and seamless monitoring experience...”
“I’d like to view a list of files with verdict, and deep dive into details of the inspection...”
“I hope to view the essential information of a file inspection at first glance without extra clicks...”
“I want to be alerted to malware detected, and block suspicious files from downloading before it access to our data center...”
 

Design Challenge

After the online workshops, I collected users’ feedback and synthesized their expectations into 3 major categories: Advanced Filter, Monitoring View, and Detailed View.

However, the design challenge is how might we address the critical needs based on different personas, and balance the complexity among the key features addressed by the customers.

 

Target Users

After synthesizing the user feedback, I identified our target users into 2 major personas to dive deeper into their problem:
IT Admin:

  • Oversee the entire Operation environment, and monitor all the security issues.

  • View essential information without extra clicks.

Security Admin:

  • View a list of inspected files with similar timestamp or verdict score.

  • View detail of file inspection event with verdict.

 

Approach & Strategy

To solve these challenges, I collaborated with key stakeholders on potential ways to empower security professionals to navigate and respond to threats with confidence, and led the design strategy through a structured three-phase approach:

  • Phase 1 - Manage Complexity: Prioritized progressive disclosure for streamlined decision-making.

  • Phase 2 - Visual Hierarchy: Defined a hierarchical structure for primary actions (monitoring, allowlisting) and secondary tools (filters, reports).

  • Phase 3 - Actionable Insight: Worked with PMs to refine scope incrementally rather than attempting to solve all problems at once.

 
 
 

Measuring Success

To validate the effectiveness of the design on aligning with both user needs and business goals, I collaborated with PMs and engineer leads to define key success metrics from both business and engineering perspectives:

  • Number of clicks required to access key insights (reduce cognitive load & interaction cost).

  • Average time spent on advanced filtering (improve discoverability & efficiency).

  • User satisfaction ratings from internal security teams (ensure the UI meets the needs of real-world analysts).

 
 
 

Managing Complexity with Progressive Disclosure

I took the approach by breaking down the complex backend requirements into manageable user actions and workflows, specifically into 3 stages:

  • Stage 0: Listed down all the features from both PM requirements and backend APIs. Have an overview of all the supported attributes.

  • Stage 1: Sort, combine those into similar categories, to make it simple.

  • Stage 2: Group and align it with 3 panels to show on screen, see how it fits into each major panel on the monitoring page.

 
 
 

Design Solution 2 - Scatter Plot

Pros:

  • Impact score reflecting verdict in colors

  • Filter by customizable timeline

Cons:

  • Limited mouse-hover interaction space

  • No clear criteria to distinguish verdict

  • Not ideal for multiple inspections on a same timestamp

 

Design Iteration 1- Stacked Bar Chart

Pros:

  • View and filter detections in all categories

  • Showing total detections in single category

Cons:

  • Unable to view verdict score in chart

  • Lack of association between chart and detail panel

  • Time range filter is not supported in chart

 
 

Design Solution 3 - Timeline Visualization

Pros:

  • More balanced space for interactions

  • Use sizing to distinguish affected VMs

  • Filter timeline chart by verdict type

Cons:

  • A11y issues of event icon (color, size)

  • No multiple detections at same timestamp

 

Final Implementation

a. Mouse-over on legend will give a quick overview of detection type, malware family, verdict and etc.

c. Expandable card depicting detailed information of malware traffic trace flow.

b. On-click on legend pops up a list of unique file inspections showing multiple detections on a single timestamp.

d. Filter unique inspections by customizing timeline bar.

 

Impact

  • Security Design System Contribution – Created a reusable widget library with other designers for security-related & empty state pattern.

  • Feature Adoption & Onboarding – Designed an onboarding experience to help security teams understand the new workflows.

  • Industry Recognition – My design solution contributed to NSX ATP winning Gold Prize at the Cybersecurity Excellence Award in 2022 & 2023.

Security Widgets Pattern Library

Empty State Pattern Library

 

Learnings & Reflections

  • Breaking down large project scope into manageable steps - when overwhelmed by the scope working on a complex project with highly-specialized domains; small, digestible tasks would be helpful to manage and achieve key milestones.

  • Embrace ambiguity - Lack of prior experience in certain domain is not a roadblock or barrier to the working process, but always a great opportunity to innovate by exploring various options with creativity.

  • Strategic thinking is embedded in design decision - Design is not only creating beautiful interface, but also a process to think holistically and strategically before making every design decision.

  • A11y in security UIs is often overlooked; I initiated discussions on improving contrast ratios & alternative representations for color-coded threat indicators.