HCL AppScan

Cross-platform design system for a leading AppSec brand

HCL AppScan is a leading platform for applications security testing. Their products and services help large scale organisations to test their code for vulnerabilities and manage their risks.

Project overview

Role: Contract Senior UI Designer.
Time: 2018-2022.
I was hired by HCL to develop the UI design of their AppScan product line.
The work started as a design consultancy, and gradually evolved into a nearly-full-time role, starting and leading the design system development and implementation, working with the in-house team through a brand acquisition, major product revamps and massive ongoing growth.
As part of the role I was also responsible for communication with the global HCL COE (Center of Excellence) team, for training of new designers, and for the design system documentation and maintenance.

Goals:

To allow a small team support several fast-growing, large-scale, highly-technical products.
To create and maintain experience consistency across different products and platforms.
To improve products positioning against competition.

Design System coverage:

Web environments (Cloud and on-premise).
Desktop products: Microsoft Windows, Mac OS, Linux.
Third party IDE plugins: VSCode, JetBrains IDEA.

Core principles:

Negative space:

The system was built to be adopted by mature, complex products, with significant legacy and strong user base, and needed to contain product gaps and differences within the offering, while gradually building UI consistency through them. Read about the Negative Space of Design Systems here.

Content Patterns before UI patterns:

System content (findings, data objects, etc) should retain consistent structure across differently visual environments, aspecially third-party plugins, when control of visibility and styling is limited. Read about Content Patterns here.

Lean core-UI pattern library:

Including only guidelines, atomic/ molecular components, and core basic layout and interaction patterns.

Platform consistency is prior to cross-product consistency:

Seamless integration with the user's environment of choice (web, Desktop apps, IDE) is prior to cross-product conventions.

Workflow

Core Pattern library: Include design tokens, design guidelines and atomic/molecular global patterns.
Platform Pattern libraries: Include 3-level design token hierarchies (identifier- description -role), platform-specific patterns with relevant guidelines.
Design to code: Design and initial implementation.
Code to Design: Aligning the end coded result to the Figma pattern library for documentation.
Agreed coded implementation (Storybook, etc.) as the SSoT (Single Source of Truth). Figma as reference.

General design pipeline approach, used for desktop products Design-Systems.

Portion of the AppScan Pattern-library components

Adopting product samples:

With the Design System at core, UI Specifications and major layout designs were applied to each product, and further used and developed by design and dev teams. This is a partial list:

AppScan on Cloud (online platform)

AppScan on Cloud is a cloud-based platform, providing organizations with rich monitoring, triage and scanning capabilities.
While working on this product, we also laid the foundation of the UI guidelines, components and design conventions at work throughout the rest of AppScan's web-based products.

Contribution:
- Product identity
- Product Design
- Design guidelines
- Product Design System
AppScan Standard (Windows native application)

Leading industry tool for Dynamic Application Security Testing (DAST), used by pen-testers and security experts, designed to work specifically as a Microsoft Windows native application.

Contribution:
- Product identity
- Product design
- Design guidelines
- Core UI pattern library
AppScan CodeSweep (IDE plugin)

Security tool installed as a plugin within different IDEs, such as Jetbrains IDEA or Visual Studio Code, Allowing developers to test while coding.
We were applying our content patterns and basic design guidelines to keep the AppScan data recognizable and consistent with it's original representations, yet seamlessly integrated into the IDE environments.

Contribution:
- Product design
- Design consultancy