Cisco, 2023-24
Role: Team Lead (7 people) and contributor. UX liaison to partners and Cisco teams.
Background
Copper stands for Cisco Observability Platform Product Experience Repository. The Cisco Observability Platform is focused on OpenTelemetry, anchored on metrics, events, logs, and traces (MELT) and provides AI/ML driven analytics. It can be extended through various modules and third-party applications.
A recently developed AppDynamics product needed to be rebranded as a Cisco product and align with a Cisco-developed design system for consistency across their software portfolio. Our technology stack did not allow the use of Cisco's component library directly, so we needed a gradual transition from our existing library to a new one.
Meanwhile, product designers were coming up with different designs for related use cases, resulting in an incoherent user experience and unnecessary duplicative work.
Prior to the official launch, Cisco onboarded several partners to launch their apps on the platform. They needed guidance on the UX, and we had to ensure we wouldn’t launch the platform with different experiences across the various internal and partner apps.
Actions
Led a team of seven to launch a new high-level design system grounded in the Cisco design system. Created a design library consisting of the new components and patterns and templates that utilized them.
Put together extensive usage guidelines that showed how to utilize the library and design consistent experiences for the product.
Provided in-depth training for product designers to align with the new standards.
Provided the UI development team with a clear path toward converting the existing component library to the new look and feel.
Created a rapid prototyping framework in React to instantly spin up new prototypes based on the actual product UI.
Led feedback sessions with developer partners.
Impact
Improved product cohesion while drastically reducing the time it took to design common experiences, allowing designers to focus on the hard and unique use cases.
Enabled partners and third-party developers to rapidly develop applications with well-defined and documented UX/UI frameworks for common use cases (i.e. Dashboards, Home Pages).
Went from hands-on white glove partner onboarding to self-service app development within 6 months, allowing the platform to scale from initially 5 applications to over 50 less than a year later.
Enabled rapid real-code prototyping, reducing prototype turnaround time from weeks to 1-2 days while freeing up designers.
Process
Discovery & Definition
Inventory and gap analysis: My team and I identified the key components and repeatable patterns that we had to prioritize. I then conducted a ton of stakeholder interviews, with engineers, product, sales enablement. I also reviewed previous user feedback from studies we already conducted.
I then got to the estimation stage where I coordinated and negotiated with the component developers which features to prioritize. This led to an initial prioritization and an extensive backlog and future roadmap that my team, PM and Engineering agreed on.
Execution
For the component & pattern library in Figma, we wrapped the existing design system components, added unique components and created higher-order re-usable patterns and page layouts. The resulting library was shared with designers to use instead of other libraries.
I negotiated component development priorities with the engineering team. That required making and keeping track of many trade-offs. Some components would be very difficult to change from what was already there
We then focused on usage guidelines for designers and partners. Partners often didn’t have their own designer, so they needed guidelines on how to create a basic application or module, i.e. IA, common patterns, data visualizations, etc.
We created a separate dashboard framework, distinct from the overall product UX. Dashboards make up a huge part of the product, and many third-party applications consist mostly of dashboards. These were rendered with a separate UI library developed by a distinct engineering team. Also, the dashboard IA and data manipulation was distinct from the rest of the product because it needed more flexibility and customization.
After the initial guidelines were rolled out, we provided in-depth training and established processes and a support structure.
A separate area of focus was the development of a prototyping framework, which allowed us to spin off realistic prototypes in much less time for user testing or showcases.
Eventually, we began porting and adapting our existing Sketch plugins to Figma, specifically plugins to get real in-product data via our APIs and another to quickly create data visualizations that conform with our design specs by picking a visualization type and entering mock or real data.
Problems and Roadblocks
Much bigger product launch under Cisco umbrella, with many stakeholders across different organizational silos. Pressure from E-Staff and competing priorities.
Tech stack limitations meant constant adjustments to components and priorities.
Cisco design system team had to support many users and would react slowly to requests.
Intense time pressure meant little time for discovery research.
Shifting priorities – last minute executive decision to launch in light theme instead of dark while we weren't set up of switching themes yet.
The Cisco team was very protective of their relationship with partners and it took time to gain their trust.
Lost dedicated PM support midway through due to a re-structuring and re-focusing of the Product org.
Highlights
Building Blocks
Component Library (Figma)
Usage Guidelines
Dashboarding Framework
Prototyping Platform
Figma Plugins
Figma Component Library
Wrapped underlying design system library and added custom components
Version-controlled with opt-in updates
Fully modular – no detaching of symbols
Usage Guidelines
There was no shared understanding what it means to design for the platform, so we needed UX Guidelines both for designers and third-party developers, including high-level things like how to design an application for the platform. The main focus was on the IA, common use cases, and reusable design patterns.
Dashboard Framework
Many applications would consists only of one or more dashboards, and they needed more flexibility than other parts of the product. So we developed a complete set of rules, specs, and IA for building dashboards, including filtering and drill-down behaviors, chart interactions, and the responsive behavior.
Prototyping Platform
Example of a prototype created with the prototyping platform.
My team created a product clone skeleton, written in React, combining actual product components and custom components. This base prototype is fully interactive with all micro-interactions and can use custom mock-data or real staging data. It's easy to extend/expand so new prototypes can be spun up quickly and customized for user testing or demos. The skeleton includes all common screens like Overview, Onboarding, Settings or Help, so all of these pages are fully functional. Using this framework, we were able to create new custom prototypes in 1-2 days, which used designers to take over a week with much less functionality and fidelity.
Productivity Plugins
This still-in-progress project is about porting porting the Sketch plugins we used for our previous design system, Particle, to Figma to boost designer efficiency.
Initially, we focused on two key plugins: one for inserting real data from the SaaS product via APIs into design files. and the other for adding custom data visualizations with mock or real data, that are compliant with design specs.
Design QA
An important ongoing aspect of Copper is validating design and implementation for conformance. We achieve this through several channels:
Regular in-product audits
Office hours support for designers and developers
Quarterly Bug Bashes
Weekly Design Round Tables where designers present WIP designs to catch problems early and identify common patterns that could be standardized
Partner Developer Feedback Sessions