A prominent information security (infosec) consulting firm contracted 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.
Below I share my strategy and the improvements made possible by applying user-centered principles and by moving from a Windows Forms (Winforms) platform to Windows Presentation Foundation (WPF).
To identify key workflows and expose usability issues in the legacy application, I held contextual inquiry sessions with “pentesters” (penetration testers or ethical hackers—the pros who help organizations fight cyber attacks). I then organized a card sorting event to prioritize key functionality, data, and filter parameters.
Moving from Winforms to WPF enabled better data visualization. The treemap below communicates a project’s distribution of vulnerability states and severities at a glance, data that was previously presented only in plain text format.
The ability to filter massive data sets is 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 to make functionality more discoverable to new users of the application (most 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 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 commonly recognized icons (e.g., search, filter, refresh, delete). The sampling below illustrates custom icons that incorporate common patterns where possible (filter-update instances, queue for import), as well as truly custom icons for functionality unique to the app (correlate master finding, bulk assign).
I collaborated with the visual designer to establish a pattern library with detailed specifications for all interaction elements, containers, and fields. Then, to ensure a consistent user experience throughout the application and to improve efficiency when developing new features, I established a design system that included an explanation for use, the visual design guidelines, and code snippets for all interface elements.
