THE CHALLENGE

A prominent information security (infosec) consulting firm hired me to overhaul the user interface for a complex, data-intensive, desktop application used to classify and report vulnerabilities for internal and external networks; web, mobile, and thick-client applications; and website code reviews.

The legacy application had grown with no framework as in-house security consultants requested new functions from the in-house development team.

New consultants relied on experienced users for training. Functionality was not easily discoverable and was “hidden” in contextual menus and keystrokes.

Because the app was built on Microsoft’s Windows Forms (WinForms) platform, there was little data visualization or ability to filter the massive data files associated with security assessment and mitigation projects.

Several status icons used the same shape and varied only by color. However, three of the pentesters (penetration testers or ethical hackers—the pros who fight cyber attacks) employed during my contract were color blind.

MY ROLE

UX architect, UX writer

THE SOLUTION

To identify key workflows and productivity issues with the legacy application, I held contextual inquiry sessions with both veteran and novice pentesters.

I then organized a card sorting exercise to prioritize key functionality, data, and filter parameters.

Moving from WinForms to Windows Presentation Foundation (WPF) enabled data visualization. New treemaps communicate distribution of vulnerability states and severities at a glance, data previously presented in plain text format.

The ability to filter massive data sets was essential to productivity. I replaced a cumbersome UI with a flexible pattern that allows the user to select relevant filters and parameters, and easily remove filters.

I also introduced a ribbon pattern so tools were discoverable to new users (functions in the legacy app were available only through contextual menus and keystrokes).

This application interfaces with many national and international databases, including the U.S. government’s National Vulnerability Database (NVD).

The NVD supports the Common Vulnerability Scoring System (CVSS), an industry standard for assessing the severity of security vulnerabilities. I designed the CVSS window to improve the visibility and editing of CVSS metrics.

To improve the affordance of all status icons (including consideration for color blindness), I worked closely with a visual designer.

The new icons also accommodate verification (V) and report (R) indicators so pentesters can assess multiple factors without opening additional tabs or windows.

The ribbon element includes many standard icons (e.g., search, filter, edit, refresh, delete), as well as custom icons that incorporate common patterns where applicable (filter-update instances, queue for import).

We also designed truly custom icons for functionality unique to the app (correlate master finding, bulk assign).

I collaborated with the visual designer to create a pattern library with detailed specifications for all interaction elements, containers, and fields.

To ensure a consistent user experience and improve efficiency when developing new features, I established a design system that included an explanation for use, visual design guidelines, and code snippets for the interface elements.

THE RESULTS

Both veteran and novice pentesters who tested the beta version reported substantially increased productivity and faster learning curves. However, shortly after my contract ended, new investors paused development of a licensed product to evaluate a web-based version of the app.