Bridging the gap between AppDynamics and Cisco products
Role
Product designer
Collaborators
2 designers, 6 engineers
timeline
Dec 2022 - Sep 2024
In December 2022, Cisco decided to transition to a unified design system called Magnetic for all applications. My team (Particle) was tasked to figure out how to move from our dark theme, data-dense design to match Magnetic's light, airy style. I was in charge of figuring out the design side, creating components and templates, as well as discussing with engineering the best way to approach changing the UI.
The first step to the theme switch is adjusting the values of our color tokens. Rather than creating a new set of tokens, this would allow our current components to automatically take the changes that we were making, instead of having to fix each component one by one. Two major issues arose:
✻
Color mode: Particle’s main theme was dark theme, and Magnetic only has a light theme.
✻
Color layering: Particle’s colors are based on an opacity scale, Magnetic only has full opacity colors.
A comparison of the neutral scale between the two systems.
We started by changing the values of color variables of Particle’s most important colors that were similar, and then following the scale for the rest. These color styles then updated for our components, and significant time was put into accessibility testing components for WCAG compliance, as well as looking at full page templates to see how cohesive everything looked together.
While the color change was important to get the demo looking like it belonged in the application family, a full change would have to happen. We talked to other teams in Cisco who transitioned to Magnetic before us and how they approached it. What we found was that creating a private library for our designers that wrapped the new library components would be beneficial for two reasons:
Code parity
It is unlikely that engineering could immediately switch to Magnetic’s React library fully. Stylizing existing components to look right would be the best option.
Managing updates
If an update that would break our designs is pushed, our wrapped components would not be affected unless manually updated.
We focused on wrapping the components, keeping properties by revealing nested instances, and also adding the components Particle had, but was missing in Magnetic. This new wrapped library was named COPPER , which stands for Cisco Observability Platform Product Experience Repository.
The wrapping approach, also used by Blueprint at Cisco, allowed for us to control updates and customize components to our needs.
Beyond component swaps, designers needed to see Magnetic's full impact: new grid, spacing, and layout rules. I helped build "ideal state" templates as a north star, owning traces, logs, dashboards, and authorization.
An example of how COPPER translated the Logs page in Cisco Cloud Observability.