Overview
Particle Design System
A robust design system and component library supporting cisco cloucdenter and product suite falling under the same organization.
The problem
CloudCenter merged with multiple products under a single organization.
Consistency was limited and developer efficiency needed improvement. We needed a scalable way to manage components and page types.
Our Solution
Provide guidance on what, how, and when to use components & page layouts for both design and dev.
We took our existing cloudcenter components and used this as our baseline for evolving the full suite ecosystem.
Flexible
Allow components to adhere multiple use cases.
Accessible
Make sure accessibility was built at the component level.
Localized
Support multiple languages across the world.
Themed
Provide each product with it's own style and flare.
Style Guide
Color, Typography, Spacing, Elevation, & Motion
This was primarily created and managed by our visual design lead. He helped establish brand and visual styling with references to Cisco's larger experience.
Spacing always seemed to be the biggest inconsistency we would find within our products that needed to be addressed.
Components
Topology
Variations
Creating hierarchy was tricky. We took an atomic approach creating "Pages, Parts, and Pieces". A "Select" piece for example also had multiple variations such as multiselect, grouped, multi-lined, etc. Each was built off a base component to ensure efficiency and consistency.
Extras
Options
Options gave us flexibility to adhere more use cases. The separation between type of component and options allowed us to scale more effectively. Pinning or locking for example could be applied to any variation.
Interactive
Working Examples
Examples allowed both designers and devlopers to experience how the component should behave. This helped clear up questions before they were asked.
Resources
Dev Tools
We needed to provide developers with everything they needed for informed decisions. This included toggles for notes, source code, action logger, and prop types.
In Depth
Design Specs
Each component would carry with it a set of specs that included structure, accessibility, interaction, and dynamic behavior. Some of course we more complex than others.
Example
Before & After
The following is a look at one of our legacy products called worklow orchestrator with a before and after we utilized particle to update components. This as not only a visual reskin, but an overhaul of the full user experience.
Final thoughts
One of my favorite projects to date. We accomplished a lot in a short period of time with quick team adoption.
This was the type of project that really started me on my interest in design systems and the direction for my career focus.
