As part of the Cisco.com redesign, I led a comprehensive audit and overhaul of the color system, focusing on clarity, consistency, accessibility, and visual hierarchy. I reviewed all UI components—including all interactive states—across varying background contexts to identify areas for improvement.

I reinforced color as a key communicator of information, establishing a scalable color framework built on semantic color roles and color tokens that align with specific UI functions.

KEY CONTRIBUTIONS:

Theming:

• Laid the foundation for a scalable theming system, starting with the implementation of a Light Theme (currently live on Cisco.com).

• Built the system to support additional themes in the future, ensuring long-term flexibility and consistency.

Color Schemes:
Defined five core color schemes to accommodate different content contexts:

• Default: White background, dark text, blue buttons—used across most of the site.

• High-Emphasis: Dark background with white text—used in endcap sections.

• Accent: Light gray background with dark text—used in mid-page content areas.

• Full-Bleed Light: Light imagery backgrounds with enhanced contrast for UI overlays.

• Full-Bleed Dark: Dark imagery backgrounds with white text and optional light-button styles to meet accessibility needs.

System Enhancements:

• Rationalized and reduced neutral tones and blues without defined roles.

• Established clear naming conventions for primary colors and frequently used tones.

• Solidified semantic color roles to align with UI function and improve maintainability.

• Refined hover states across all schemes using tonal variations of the primary color.

• Ensured all text met WCAG contrast and accessibility standards.

As Cisco.com underwent a major redesign, I identified a key opportunity to bring clarity and consistency to our use of foundations (such as space, color, type size, line height, border radius, border width) among similar values. The previous system relied heavily on hardcoded hex values, leading to inconsistent UI execution, time-consuming updates, and misalignment between design and development.

To address this, I collaborated closely with Dan Hannigan, Cisco.com’s lead front-end developer, and together we led the introduction and implementation of a design token system—transforming how foundational values are defined, applied, and maintained across Cisco.com.

Process/Results:

• Collaborated cross-functionally with engineering to integrate tokens into both design files and codebases

• Created a single source of truth for all design tokens for Cisco.com

• Eliminated hardcoded hex values, enabling faster updates and easier maintenance

• Improved accessibility, ensuring all text met WCAG contrast and size standards were met

• Aligned design and development workflows, increasing team efficiency and reducing friction

• Future-proofed the system that can modify the design token values without breaking the current framework

By championing this token-based system, I laid the foundation for a more cohesive, scalable, and maintainable design language at Cisco—elevating the visual integrity of Cisco.com while supporting agile delivery and brand consistency at scale.

I conducted a spacing exploration by analyzing our existing web design work—including components, patterns, and page templates—and identified opportunities for improvement. Through this process, I found that adopting a 4pt base grid would better serve our UI by providing greater flexibility for tighter, more consistent design. As a widely recognized industry standard, the 4pt system ensures scalable and efficient layouts. I presented the findings and proposed design system updates to the team, and collaborated with the entire UI team to implement the new spacing system across our interface.

Had a key hand. in building and creating appealing compositions for the pages for both the “Muse UI Kit” file and “Muse Design Tokens” file.

Working with a small team of designers, I helped rebuild our component library using the latest industry standards. I also styled the UI Kit pages, ensuring clear organization and precise layer naming.

Additionally, I designed the Muse Design Tokens file in Figma, populating all content while making key style and format decisions. Both files are widely used across Cisco but are not publicly accessible.

We built functional UI kit components in both default (light) and high-emphasis (dark) color schemes.

Leveraging my in-depth knowledge of the Cisco.com’s Muse design system UI, I created comprehensive documentation for a dozen design system components and two core foundations: color and iconography.

The documentation detailed key aspects such as usage guidelines, behaviors, states, use cases, technical implementation, styles, and versioning details. While not publicly available, it provides teams across Cisco with the guidance needed to publish consistent webpage experiences that are aligned with best practices.

I helped shape and refine the design language of Cisco.com’s design system by conducting a comprehensive audit of its UI elements.

While leading an in-depth evaluation of UI elements, I identified style inconsistencies that raised concerns about quality, scalability, and longevity. In response, I presented my findings to leadership, prompting a team-wide initiative to refine interaction states, standardize color roles, assess border radius usage, and enhance theming continuity. We also eliminated redundant components and patterns, resulting in a more cohesive, scalable, and systematic design framework.