Design System Impact
5 products
3 Platforms
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
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.
Itay Levin
Head of Design, HCL AppScan
Copyright © 2024 Avin Vadas. All rights reserved.