UX/UI DESIGN · CISCO SYSTEMS

Cisco Enterprise Design System

Designed and maintained core UI components, design tokens, and pattern libraries for the Cisco Enterprise Design System. Collaborated across engineering and product teams to establish unified design standards that streamlined design-to-code workflows and ensured visual consistency across complex enterprise applications.

ROLE
Lead UX/UI Product Designer

CLIENT
Cisco User Experience Engineering

TOOLS
Figma · Sketch · Adobe Creative Suite

Project Summary

In a landscape of rapidly evolving enterprise technologies, the Cisco Enterprise Design System was conceived to unify and accelerate the creation of impactful solutions. I collaborated closely with design and engineering teams to develop this comprehensive enterprise design system, focusing on clear navigation, consistent visual elements, and accessible components. This system empowers designers and developers to build cohesive experiences, maintain brand identity, and drive innovation at scale by providing a foundation of reusable building blocks, guiding principles, and collaborative tools.

  • Collaborated with cross-functional engineering teams to develop and implement the Cisco Enterprise Design System, ensuring seamless integration and adoption.
  • Designed and implemented a modular component library, promoting consistency and efficiency across all Cisco enterprise applications and services.
  • Prioritized accessibility standards (WCAG) throughout the design system, ensuring inclusivity for all users.
  • Created detailed documentation and style guides, enabling developers and designers to effectively utilize the design system’s resources.
  • Developed clear navigation structures and intuitive interfaces for the design system’s platform, facilitating easy access to components and guidelines.
  • Conducted user testing and gathered feedback to iterate on the design system, ensuring its usability and effectiveness.
  • Contributed to the development of guiding principles and best practices, fostering a unified design language across the enterprise.
  • Facilitated workshops and training sessions to promote the adoption and understanding of the design system among Cisco teams.

Digital Identity Standards

The Digital Identity Standards define and detail the uniform execution of the navigation and menu layers through common visual and UI elements and components.
Our Digital Identity Standards are applied in examples throughout this document. They are meant to inspire and inform your designs as you apply the standards.

  • Visual Principals
  • Visual System: Icons
  • Visual System: Core digital palette
  • Visual System: Supporting Colors
  • Visual System: Status Colors
  • Visual System: UI Design Components

Application & Website UX/UI Design

The application and website design examples define and detail the uniform execution of the navigation and menu layers through common visual and UI elements and components.
Our Digital Identity Standards are applied in examples throughout this document. They are meant to inspire and inform your designs as you apply the standards.

  • Application Screen Designs
  • Website Design Screen Designs

Mobile UX/UI Design

The mobile screen design examples define and detail the uniform execution of the navigation and menu layers through common visual and UI elements and components.
Our Digital Identity Standards are applied in examples throughout this document. They are meant to inspire and inform your designs as you apply the standards.

  • Mobile Screen Designs

Iconography Design

The iconography design system establishes standards for the uniform execution of navigation menu icons, utilizing vector SVG assets. This results in enhanced scalability, consistent brand representation, and improved UI performance, ultimately ensuring a cohesive and efficient user experience by streamlining icon usage across the platform.

  • Vector SVG Asset Creation: Designed a comprehensive library of icons in vector SVG format, guaranteeing optimal scalability and resolution independence across all devices.
  • Design System Integration: Integrated the iconography library into the Enterprise Design System, establishing a unified visual language and promoting brand consistency.
  • Scalability and Responsiveness: Ensured all icons maintained visual clarity and integrity at various screen sizes, providing a responsive and consistent user interface.
  • Brand Identity: Designed icons that strictly adhered to the established brand guidelines, strengthening brand recognition and visual cohesion throughout the platform.
  • Performance Optimization: Replaced less efficient image sprite workflows with vector SVG based assets, creating a faster more efficient application.
  • UI/UX Enhancement: Improved the overall user experience by providing a consistent and intuitive visual representation of actions and information.

Project Overview

  • Client: Cisco Systems, Inc.
  • Product: Cisco Enterprise Design System
  • Objective: Develop a scalable and comprehensive design system to unify Cisco’s enterprise products and services, improve efficiency, and maintain brand consistency.
  • Target Users: Cisco designers, developers, product managers, and stakeholders.
  • Team: UX/UI Designers, Frontend Developers, Engineering Leads, Product Managers.

  • Inconsistent user experiences across Cisco’s enterprise products and services.
  • Inefficient design and development processes due to lack of reusable components and guidelines.
  • Challenges in maintaining brand consistency across a diverse portfolio of products.
  • Need for improved collaboration and knowledge sharing among design and development teams.

  • Methodology
    • Surveys with designers and developers to understand pain points and needs.
    • Interviews with stakeholders to gather requirements and expectations.
    • Competitive analysis of other enterprise design systems.
    • Audit of existing Cisco products to identify inconsistencies.
  • Key Findings:
    • Need for a centralized repository of design components and guidelines.
    • Desire for improved collaboration and communication tools.
    • Importance of accessibility and usability.
    • Need for better search and filtering of components.

  • Establish a unified design language and brand identity.
  • Improve efficiency and consistency across Cisco’s enterprise products.
  • Enhance collaboration and knowledge sharing among design and development teams.
  • Ensure accessibility and usability for all users.
  • Create a scalable and maintainable design system.

  • Information Architecture: Organization of the design system’s content and navigation.
  • Component Library Design: Development of reusable UI components.
  • Style Guide Creation: Definition of visual elements and brand guidelines.
  • Documentation: Creation of comprehensive documentation and tutorials.
  • Prototyping and Testing: User testing and iteration of the design system’s interface.
  • Accessibility reviews.

  • Key Features:
    • Modular component library with reusable UI elements.
    • Comprehensive style guide with visual and brand guidelines.
    • Detailed documentation and tutorials.
    • Search and filtering functionality for easy component access.
    • Collaboration tools and communication channels.
    • Accessibility features.
  • Technical Integration:
    • Integration with existing Cisco development tools and workflows.

  • Measurable Results:
    • Increased adoption of the design system across Cisco teams.
    • Reduced development time and costs.
    • Improved consistency and quality of user experiences.
    • Increased user satisfaction.
  • User Feedback:
    • Positive feedback from designers and developers on the design system’s usability and effectiveness.

  • Challenges:
    • Gaining buy-in from diverse teams and stakeholders.
    • Maintaining consistency across a large and complex organization.
    • Ensuring accessibility and usability for all users.
  • Solutions:
    • Collaboration and communication with stakeholders.
    • Iterative design and development process.
    • User testing and feedback.

  • Continuous improvement and updates to the design system.
  • Expansion of the component library and guidelines.
  • Integration with emerging technologies and platforms.
  • Establish a design system governance model.

The Cisco Enterprise Design System, born from the need to streamline and unify development in a dynamic technological landscape, has proven to be a vital asset. Through meticulous collaboration with design and engineering teams, we successfully implemented a comprehensive system that prioritizes clarity, consistency, and accessibility. This foundation of reusable components, guiding principles, and collaborative tools has not only empowered Cisco’s teams to build cohesive, brand-aligned experiences but has also accelerated innovation, enabling the rapid creation of impactful enterprise solutions. By bridging the gap between design and development, the Enterprise Design System has become a catalyst for efficiency and excellence across Cisco’s diverse portfolio.