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 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 the maturity of the offering products required 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.
Context-fit before cross-product consistency
When conflicted, Seamless experience between product to its user's environment of choice (Say: CodeSweep to IDEA or VSCode, AppScan Standard to Windows) is prioritized over brand and cross-product consistency.
Information Architecture is major anchor
Data recognizability is at major importance when moving across environments that shift and vary.
Design infrastructure
Design tokens
As multiple environments shaped different interaction patterns and conventions across the offering products, design tokens were heavily relied on for cross-product consistency.
Core component library
A core component library was created for web environment, and expanded to support Windows Native and general desktop apps (Used on Linux and MacOS).
Information architecture
Content patterns were used to maintain data recognizability across platforms.
Brand repositioning
As the offering left IBM, new positioning to its different products was essential.
Itay Levin
Head of Design, HCL AppScan
Copyright © 2024 Avin Vadas. All rights reserved.