HCL AppScan Design System

HCL AppScan Design System

2018-2022
Full-scale Design-System
Role: UI Design Lead & Design System owner

2018-2022
Full-scale Design-System
Role: UI Design Lead & Design System owner

Design System Impact

5 products

3 fully adopting products & 2 in process by the end of the role.

3 fully adopting products & 2 in process by the end of the role.

3 Platforms

Web, Windows, Electron and
policy for IDE plugins

Web, Windows, Electron and
policy for IDE plugins

2 revamps

Full revamp facilitation for AppScan Standard and AppScan on Cloud

1 Acquisition

The system supported a major brand transition, from IBM to HCLTech

Overview

HCL AppScan

HCL AppScan is a leading platform for Application Security Testing (Gartner, 2021). Their products help large-scale organizations to test their code for vulnerabilities and manage their risks.

The AppScan Design System

The AppScan Design System creates a layer of consistency across the different products of the offering, complementing one another while operating in different platforms and contexts.

Adoption samples

Microsoft Windows App

AppScan Standard is a Leading industry tool for Dynamic Application Security Testing (DAST) work specifically as a Microsoft Windows native application.

Microsoft Windows App

AppScan Standard is a Leading industry tool for Dynamic Application Security Testing (DAST) work specifically as a Microsoft Windows native application.

Microsoft Windows App

AppScan Standard is a Leading industry tool for Dynamic Application Security Testing (DAST) work specifically as a Microsoft Windows native application.

Cloud web platform

AppScan on Cloud is a SaaS cloud-based platform, that provides organizations with rich monitoring, triage, and scanning capabilities to manage their risks.

Cloud web platform

AppScan on Cloud is a SaaS cloud-based platform, that provides organizations with rich monitoring, triage, and scanning capabilities to manage their risks.

Cloud web platform

AppScan on Cloud is a SaaS cloud-based platform, that provides organizations with rich monitoring, triage, and scanning capabilities to manage their risks.

IDE plugin

CodeSweep is a Security tool installed as a plugin within different IDEs, such as Jetbrains IDEA or Visual Studio Code, Allowing developers to test while coding.

IDE plugin

CodeSweep is a Security tool installed as a plugin within different IDEs, such as Jetbrains IDEA or Visual Studio Code, Allowing developers to test while coding.

IDE plugin

CodeSweep is a Security tool installed as a plugin within different IDEs, such as Jetbrains IDEA or Visual Studio Code, Allowing developers to test while coding.

The problem

Legacy gaps

The offering contains leading, mature tools, each with a loyal customer base, and long built design differences between one tool and another

Platform gaps

each tool is built for different environment and context of work, from SaaS through several native desktop OS and on to IDE plugins

Small team

The range of products was designed and maintained by a highly professional, yet very small team, and epic updates were coming.

Acquisition

After years under IBM, the AppScan offering was acquired by HCLTech, requiring a new visual language.

Principles

Plan around a "Negative space"

The complexity and high level of maturity of the offering products required planning the epic movements ahead around slow, piecemeal updates. This meant that for a long period, the users' experience of an offering gradually shifting should bring into account the negative space: The features and products not yet adopting it, so familiarity and consistency are preserved throughout the updates.

Context-fit before cross-product consistency

Since more and more of the code testing rely on integrations with the organisation development routines (AKA Shift-Left), their user experience is more about seamlessness within the user's environment of choice than it is about the AppSec offering consistency. From design-system perspective, this means supporting wide range of platform differentiation on component level, and base consistency on the deeper level of Design-Tokens and Information Architecture.

Information Architecture is major anchor

As products interaction patterns vary across different platforms, consistent content patterns were at most importance to maintain data, content and UI recognisability.

Design infrastructure

Design tokens

Since interaction patterns and conventions varied across the offering products, design tokens were heavily relied on for cross-product visual consistency.

Core component library

A core component library was created for web environment, and expanded by need to tiers supporting Windows, Linux MacOS desktop apps.

Information architecture

Recognisable content patterns were used to maintain consistency across changing environments and platforms.

Brand repositioning

As the offering left IBM, new positioning to its different products was essential, to both internally relate complementing offering products to one another, as well as support each of them against external competition.

“Avin developed our product design system, which helped us to revamp our products and have a better alignment across the offering. We have great synergy with Avin and he was a part of the team's maturity. His availability to the team was outstanding even when we were in different time zones.”

“Avin developed our product design system, which helped us to revamp our products and have a better alignment across the offering. We have great synergy with Avin and he was a part of the team's maturity. His availability to the team was outstanding even when we were in different time zones.”

Itay Levin

Head of Design, HCL AppScan

Copyright © 2024 Avin Vadas. All rights reserved.