Introduction 👋
AppViewX is a leading provider of automation and orchestration solutions for managing digital certificates, network infrastructure, and security.
AppViewX was launched in 2008 to address the growing need for automation in network and security operations. Its solutions focus on simplifying certificate lifecycle management, improving network security through automation, and enabling efficient management of enterprise-grade IT environments. Since its inception, AppViewX has been a key player in the cybersecurity and automation landscape.
My role ♟️
Ashfaaq led the design system initiative at AppViewX. One of his key goals was to release an internal design system for other designers to reuse and develop a ReactJS component library. This library aimed to streamline workflows and significantly reduce development effort for the engineering team.
Responsibilities
Setting up a new design system to maintain consistency across the products
Closely working with the product team to define the road map and plan and execute design
Research, design and prototyping
Collaborate with engineering team to setup a functional component library in reactJs
Documentation variables and system usage guidelines
Team size
2 designers + 6 developers + 1 manager
Tools
Figma, Miro, Meets, Trello, Whiteboarding, Jira
Research 🔬
Who are our users?
Primary users of the system are going to be the developers who will be building components and web screens for the appviewx products.
Secondary users are going to be us - designers.
Ashfaaq had never built a design system to support products at such a large scale in a fast-growing company. To ensure success, the project began with extensive research. Ashfaaq and his peer reviewed industry articles and studied design guidelines from leading organizations, including Google, Microsoft, Apple, and Atlassian.
Will this impact the speed of our design process?
What’s the purpose of building this?
Which specific problems are we aiming to solve?
How do we define success—for our customers, the business, and beyond?
Who is the primary audience for this?
What is the scope of this project?
Goals
Based on the research, we established key goals for all stakeholders, which served as a guiding direction for the project.
What are users saying
Inconsistency
The products at appviewx had many inconsistencies, be it in colors, components, search bars…, which can have detrimental effects on the overall experience & the brand image.
Redundancy
For designers, the absence of a component library resulted in inefficient, repetitive work when creating new product screens. This inefficiency extended to developers, who had to invest additional time and effort in building components due to inconsistent designs.
Communication
Maintaining and scaling the design system presents its own challenges, requiring strong communication among designers. Before making changes to an existing component, thorough research must be conducted to understand its usage across various use cases.
Atomic Design 🧬
The team’s primary objective was to establish a cohesive set of design elements that could seamlessly co-exist within a larger system. Priyanshu explored the Atomic Design methodology and identified it as an ideal foundation for the design system.
To apply this approach, Ashfaaq utilized Miro to map out all the components used across the platforms, organizing them into an initial structure of atoms, molecules, and organisms.
The process began with atoms-the smallest building blocks of the design system-including typography, colors, screen grids and spacing, which formed the foundation for all subsequent elements (called molecules).
Final System 🌟
While this would be the first of many iterations of the design system, the initial draft successfully established a brand identity for AppViewX products. It also enhanced the customer experience by ensuring consistency across the product suite.
Ashfaaq had collaborated with the development team to build the component library in ReactJS. Since Figma’s Dev Mode had not yet been launched, he created and shared a comprehensive style guide with the team to streamline the implementation process.
Atomic Design (eg. radio buttons)
Here is an example of how Ashfaaq built a simple radio button group using atomic design methodology.
Anatomy (eg. input fields)
Guidelines
Screens
Ashfaaq was honored as the Top Performer (2022-2023) in the product team for his exceptional work in defining AppViewX’s digital identity and significantly reducing development costs.
