Avin Vadas

Product Design

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.

Role and 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.

Initial Design system coverage

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


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

Products app icons:

As part of the design system work, we also developed a unified set of product icons, to be used across the product line. It helps users identify the different products and their roles within the offering, while establish an affiliation between each product and the AppScan brand, and reposition it in front of competition.

AppScan product icons

AppScan product icons implementation

"Avin developed our product design system, which help us to revamp our products and have a better alignment across the offering... We have great synergy with Avin, we enjoyed his knowledge of design 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. He always does things professionally, creatively and with enthusiasm."

Itay Levin, Design lead at HCL AppScan

Back to portfolio

Contact: