Particle and UI Kit

Introduction

Early in my career at AppDynamics, I worked with Linda Tong, the VP of Experience, to create AppDynamics' first design system. I named it Particle. The design organization was small but growing, with an expanding product that had been built in a very piecemeal fashion. A design system felt like the most powerful way of standardizing user patterns, improving the efficiency and consistency of our engineering efforts, and ultimately creating a better user experience. A new product was also on the horizon. And thus Particle was born.

Particle would include three major elements:

• Product and Engineering components based on design specifications. We launched the system with 33 components, ranging from bread and butter UI controls to multi-step wizards and form patterns.
• Design-led style guidelines, including typography, colors, icons, and common page templates.
• Brand guidelines and assets, including logos, typefaces, presentation templates, and email signatures. Eventually this got moved into a dedicated Brand library, but it helped to standardize and share these critical assets across the company.

My first step was to build up a 7-person Design Technology team to serve as the stewards, prototypers, and decision makers of the system. I also partnered with Product Design, PM, Engineering, User Research, Information Development, and Marketing leaders to build and evangelize the system. During this time, my role was to manage the efforts of many people, but I also got down and dirty with identifying and documenting some of the most critical components. Finally, I worked hard to gain executive buy-in up to the CEO of the company through a series of roadshows and all hands presentations.

Atomic Principles

I introduced the team to Brad Frost's Atomic design principles for the organization of the design system. We created components for basic buttons, form controls, content containers, then progressively moved up to form layouts, modals with embedded layouts, and eventually entire page layouts. Every component was backed by documentation, examples, and supporting design files for Sketch and in time, Figma.

Launching the System

I was fortunate to be supported by a great team of people, and we all pitched in to catalog the components and prioritize them based on the needs of our internal customers, chiefly the designers and front end engineers creating the product. The design and definition of the system and its 33 components took about 8 months. Our partnership with the UI engineering organization allowed us to embed Storybook interactive artifacts into the design system website, which provided a demonstration of the component and the many properties that could be changed. Within a year, we had established an open contribution model in which teams could contribute their components back to the larger system. Even though some teams had to spend some months refactoring their codebases to convert to the design system components, my initial sales pitches of the efficiency gains and user benefits helped teams achieve buy-in with all their stakeholders. I feel very proud of the multidisciplinary approach I instilled in the project from its inception.

Moving to PM

About six months after the debut of Particle, I got an itch for a new challenge. An opportunity opened up to fill the vacated position of Product Manager for UI Kit, which was the Engineering implementation of the internal Particle system. So I decided to hand off the team to another colleague and make a full transition over to PM.

My first goal was to straighten out the prioritization of Engineering work. Requests were coming in from teams all across the company for new design components and variations, and the centralized UI Engineering team was finding it difficult to focus on the most important things. Partnering with the Director of the org, I defined a scoring system for the scope and importance of all of the UI components, as well as global requirements for performance (e.g. page load time) and accessibility (e.g. keyboard shortcuts, tab orders). I ranked what needed to be built and created initiatives, epics, and user stories. In some cases, the initial specifications from the Design Technology team needed to be reworked. Meanwhile, I asked a small, dedicated team of UI Kit engineers to construct a library for charting and data visualization, which expanded the usefulness of the integrated system.