Go to Top


Particle and UI Kit

View the Product

Particle is the UI/UX design system used for the entire product suite at AppDynamics. I founded the Design Technology team at AppD, led the design, partnered across the company, and rolled it out to Product teams. After Particle's launch, I transitioned into the role of Product Manager for its implementation.


Interaction Design, Prototyping, Documentation, Team Leadership, Vision, Product Management


AppDynamics (Cisco)

Particle and UI Kit


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:

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.

This was a roadshow presentation I gave to the AppDynamics Engineering organization in 2018 to garner support for our efforts.

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.

The Product area of the Particle site at launch included typography, icons, and colors used across the product.

Guidelines for use of the color palette were communicated using illustrations and content written by our design teams.

Browser Back button guidelines and accessibility were also parts of the Product part of the Particle compendium site.

Here's one example of Form component specifications, which started as a guidelines document in Sketch and later made it to Angular and React components built by the Engineering team.

View the full specs document here.

We created design tokens, variables that could be used in the design system for color, type, and spacing variations, for each component.

Layout diagrams and basic scroll behaviors were shared with the guidelines of Forms, as this was a higher-level design pattern (a "molecule", per the Atomic Design principles) that could also be included in higher-order components such as modal windows and page layouts.

We also worked with Engineering to establish appropriate tab orders, validation behaviors, and error states. These were all part of the initial 33 components built as UI Kit.

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.

UI Kit components are illustrated for front end engineers using Storybook. This is an example of chart dashboard components implemented in UI Kit, based on Particle specifications.

For front end engineers, we also provided a single code site with all the UI Kit components, which cross-linked back to Particle specifications.

We first rebuilt significant parts of the existing SaaS-based application using UI Kit components, and ensured all new screens used the Particle system.

Particle and UI Kit are also the foundation for the next-generation AppDynamics Cloud product UX.


Key Takeaways


I want to thank Eric Wienke, Rob Riccetti, Joe Angeles, Shy Dhanani, Ian Lin, and Andrew Hock for their work with me on the Particle Design System. From the Engineering side, Albert Chang, Olivier Crameri, Yin Li, and Jake Bassett were instrumental partners, as well as Dinesh Rajwani and Harrison Ng from Program Management. Linda Tong was my key executive partner and helped drive support for the project from the beginning. Finally, I wanted to send a cosmic thank-you to the late Rachel Reynard, who led Product Design at AppD and was my close partner in promoting and expanding the system's use.

Next Up: Innovation Suite ->