What is Cisco and what is your role at the company?

Cisco is the world’s largest networking company, creating both software and hardware that connects the world. Cisco sells products in networking, data center, security, IoT, and collaboration (Webex).

At Cisco, I manage Design Systems and Design Operations in the Collaboration Technology Group. We are the group that builds Cisco Webex, including video conferencing, IP phones, Jabber, Webex Meetings, and Webex Teams. We have almost 200 designers who work in Cisco Collaboration across various business groups.

Cisco Design System Styles

What is the current state of your design system?

Momentum Design (http://momentum.design/) is our 3rd generation design system for Cisco Collaboration products. It is the first “full stack” design system we have created which includes code libraries and design libraries to scale design across a team of over 200 designers working on Collaboration product.

Cisco Design System Libraries

How supported is the design system effort in the company? Did it start off that way or did it take time?

In Cisco Collaboration, we’ve always moved quickly toward design trends to keep our end-user facing products fresh and relevant in the market. Previous generations of our design systems were considered design guidelines or style guides, but never fully embraced the idea of providing code libraries or engineering resources to our large engineering teams. With Momentum, we’ve evolved to having a strong core team of designers and developers who are producing design and code libraries that are really scaling design decisions throughout our software.

Because Cisco can sometimes have a very siloed culture, we have six or seven design systems currently being worked on throughout the company. Those of us leading those efforts have a forum where we compare notes and share between our projects, but we aren’t where any of us would like to be in terms of a company-wide design system.

What is the layout of your design system team?

Our team is composed of designers, developers, copywriters, and producers, but not everyone dedicated to the system is in the same team. We have a mix of solid line and dotted line relationships throughout the organization, which actually works better than you’d think. Having a team composed of individuals from across the business units inside Cisco Collaboration helps make this the design system for the whole technology group, and not just for one or two teams.

What are the major pieces that make up the design system?

  1. Our website at Momentum.Design captures our design decision-making, socializes the elements of the design system, and provides our users with a way to engage with the Momentum team. 
  2. Our front end libraries, available publicly through Github, are provided in React, Angular, AngularJS, and Vue (beta). They are used in internal projects and also by 3rd party developers who integrate their software into our tools as well.
  3. Our own framework-agnostic charting library and motion library
  4. Our design component libraries are available in both Sketch and Figma
  5. We have an extensive library of icons and illustrations, as well as a governance model for creation and approval of new icons and illustrations.
Cisco Design System Components
Cisco Design System Github

How did you go about evolving your design system?

In 2017, we kicked off a project to evolve our visual aesthetic across the entire portfolio. Creating a design system that included software libraries and which was deeply embedded with engineering codebases was one way we were able to scale this change through many products in a short amount of time.

What is the biggest challenge that you and your team have faced with the design system?

I think balancing our desire to support every customer (developer or designer) with their tool stack has been really hard to surmount. It’s caused our design toolbox (Sketch, Figma, XD) and our dev libraries (React, Angular, AngularJS, and Vue) to expand quicker than our team’s capacity. 

What advice do you have for someone in the early stages of starting their design system?

Create focus around a small set of customers you want to support first. Get them 100% bought-in, and go forward from there. Oh, also: web components are coming!

About Sam Anderson

Sam Anderson leads the design system and design operations team for the Cisco Collaboration Technology Group, makers of Cisco Webex. He lives in San Antonio, Texas with his spouse and 3 rowdy boys.

Sam Anderson Cisco
Previous articleEdPlus at Arizona State University’s Design System
Next articleStanding up DesignOps at Keap
Steven Meyer is a design leader at Keap where he oversees a team of product designers working to help small businesses succeed. Steven has history of leading large-scale efforts such as overseeing the creation of one of the largest design systems in the automotive industry. Steven’s experience has spanned through leading Marines, creating his own startup, working for a venture-backed startup, designing and developing at a Fortune 500 company, and more. Steven has worked for large brands such as O’Reilly Auto Parts, Pearson Education, and CDK Global. Steven holds an M.S. in Technology from ASU and a graduate certificate in Strategic Decision and Risk Management from Stanford University.