Cisco Systems

Nexus Dashboard

UX/UI

Enterprise

SaaS

B2B

Overview

Cisco's Nexus Dashboard provides a variety of network management tools such as customization and configuration, troubleshooting and remediation of system issues, and visibility into their data and analytics. As the lead designer, I am responsible for shipping features end-to-end, driving user centricity in a cross-collaborative environment, and ensuring consistency throughout the product.

Cisco's Nexus Dashboard provides a variety of network management tools such as customization and configuration, troubleshooting and remediation of system issues, and visibility into their data and analytics. As the lead designer, I am responsible for shipping features end-to-end, driving user centricity in a cross-collaborative environment, and ensuring consistency throughout the product.

Cisco's Nexus Dashboard provides a variety of network management tools such as customization and configuration, troubleshooting and remediation of system issues, and visibility into their data and analytics. As the lead designer, I am responsible for shipping features end-to-end, driving user centricity in a cross-collaborative environment, and ensuring consistency throughout the product.

Role

Lead Product Designer

Lead Product Designer

Lead Product Designer

Tools

Figma, Atlassian, Miro, Maze

Figma, Atlassian, Miro, Maze

Figma, Atlassian, Miro, Maze

Duration

3+ years

3+ years

3+ years

Product revamp

When Cisco made the initiative for all networking products to adhere to a new internal design system, we decided it was the perfect time for Nexus Dashboard to undergo an entire product revamp. This included building new design principles and updating all our features with the new and improved design component library. The revamp brought great results in providing consistency, accessibility, and overall enjoyment across Cisco's networking products.

When Cisco made the initiative for all networking products to adhere to a new internal design system, we decided it was the perfect time for Nexus Dashboard to undergo an entire product revamp. This included building new design principles and updating all our features with the new and improved design component library. The revamp brought great results in providing consistency, accessibility, and overall enjoyment across Cisco's networking products.

When Cisco made the initiative for all networking products to adhere to a new internal design system, we decided it was the perfect time for Nexus Dashboard to undergo an entire product revamp. This included building new design principles and updating all our features with the new and improved design component library. The revamp brought great results in providing consistency, accessibility, and overall enjoyment across Cisco's networking products.

Brainstorm new design principles

Before the revamp, we found user pain points such as information overload, endless scrolling workflows, and tech-heavy language that was not inclusive, especially for first-time users. With these pain points in mind, the UX team brainstormed on how to improve our products' user experiences with the following key takeaways:

Before the revamp, we found user pain points such as information overload, endless scrolling workflows, and tech-heavy language that was not inclusive, especially for first-time users. With these pain points in mind, the UX team brainstormed on how to improve our products' user experiences with the following key takeaways:

Before the revamp, we found user pain points such as information overload, endless scrolling workflows, and tech-heavy language that was not inclusive, especially for first-time users. With these pain points in mind, the UX team brainstormed on how to improve our products' user experiences with the following key takeaways:

😊 Friendly and human tone

📐 Consistency and scalability

💡 Design with intention and intuition

⚖️ Accessible and inclusive

Adopt a new design system

As a part of the revamp process, we collaborated with our internal design system team to adopt their comprehensive component library and behavior guidelines. Learn more about the adoption process in my Blueprint Design System project.

As a part of the revamp process, we collaborated with our internal design system team to adopt their comprehensive component library and behavior guidelines. Learn more about the adoption process in my Blueprint Design System project.

As a part of the revamp process, we collaborated with our internal design system team to adopt their comprehensive component library and behavior guidelines. Learn more about the adoption process in my Blueprint Design System project.

Blueprint Design System

Overview of revamped features

Here are just a few features we've developed during the revamp of Nexus Dashboard.

Here are just a few features we've developed during the revamp of Nexus Dashboard.

Here are just a few features we've developed during the revamp of Nexus Dashboard.

Onboarding journey

First-time user journey for onboarding Nexus Dashboard

First-time user journey for onboarding Nexus Dashboard

First-time user journey for onboarding Nexus Dashboard

Explorer

Global search engine

Global search engine

Global search engine

Custom dashboards

Build your own personal dashboard and widgets

Build your own personal dashboard and widgets

Build your own personal dashboard and widgets

Toplogy

Visualize devices in your network

Visualize devices in your network

Visualize devices in your network

Sustainability

Manage energy costs and emissions

Manage energy costs and emissions

Manage energy costs and emissions

Alerts and rules

Customize network configurations and communication

Customize network configurations and communication

Customize network configurations and communication

Feature Deep Dive

Analyze anomalies

Anomalies are system generated alerts detected in your network. As a troubleshooting product, analyzing anomalies is one of the most frequented features, so it is important that users can quickly understand and remediate their anomalies.

Anomalies are system generated alerts detected in your network. As a troubleshooting product, analyzing anomalies is one of the most frequented features, so it is important that users can quickly understand and remediate their anomalies.

Anomalies are system generated alerts detected in your network. As a troubleshooting product, analyzing anomalies is one of the most frequented features, so it is important that users can quickly understand and remediate their anomalies.

User goals 👩‍💻

  1. Quick anomaly remediation

  2. Tools for team collaboration and organization

Business needs 💸

  1. Maximize user productivity

  2. Healthy hardware and software for maximum performance

Solution 🚀

  1. Step-by-step remediation guide

  2. Tagging and commenting with team members

User flow

The user flow outlines the workflows for the main user end goals of the feature. In this case, we have two in the anomaly detail screen: step-by-step guide to anomaly remediation and custom action items.

The user flow outlines the workflows for the main user end goals of the feature. In this case, we have two in the anomaly detail screen: step-by-step guide to anomaly remediation and custom action items.

The user flow outlines the workflows for the main user end goals of the feature. In this case, we have two in the anomaly detail screen: step-by-step guide to anomaly remediation and custom action items.

Step-by-step remediation guide

In the anomaly detail screen, we designed a step-by-step guide to intuitively guide our users to their anomaly remediation.

In the anomaly detail screen, we designed a step-by-step guide to intuitively guide our users to their anomaly remediation.

In the anomaly detail screen, we designed a step-by-step guide to intuitively guide our users to their anomaly remediation.

  1. What's Wrong?

General information and relevant associations

General information and relevant associations

General information and relevant associations

  1. What triggered this anomaly?

What is directly causing anomaly to be raised

What is directly causing anomaly to be raised

What is directly causing anomaly to be raised

  1. What's the impact?

What is currently or potentially being impacted by the anomaly

What is currently or potentially being impacted by the anomaly

What is currently or potentially being impacted by the anomaly

  1. How do I fix it?

One click fixes, recommended solutions, and workarounds for remediating the anomaly

One click fixes, recommended solutions, and workarounds for remediating the anomaly

One click fixes, recommended solutions, and workarounds for remediating the anomaly

Customizable actions

Since our users often times work in teams, we added customizable tools like tagging and commenting to allow users to work collaboratively in remediating their anomalies.

Since our users often times work in teams, we added customizable tools like tagging and commenting to allow users to work collaboratively in remediating their anomalies.

Since our users often times work in teams, we added customizable tools like tagging and commenting to allow users to work collaboratively in remediating their anomalies.

Tags

Apply customized tags to your anomaly for organizing and filtering anomalies across the teams.

Apply customized tags to your anomaly for organizing and filtering anomalies across the teams.

Apply customized tags to your anomaly for organizing and filtering anomalies across the teams.

Comments

Leave comments and tag teammates to keep track of anomaly statuses and remediation tips.

Leave comments and tag teammates to keep track of anomaly statuses and remediation tips.

Leave comments and tag teammates to keep track of anomaly statuses and remediation tips.

Acknowledgement

Acknowledge (or archive) anomalies that no longer need to be addressed.

Acknowledge (or archive) anomalies that no longer need to be addressed.

Acknowledge (or archive) anomalies that no longer need to be addressed.

Bookmarks and recent history

Jump back into your favorite or most frequented pages using the bookmarks or recent history drawers.

Jump back into your favorite or most frequented pages using the bookmarks or recent history drawers.

Jump back into your favorite or most frequented pages using the bookmarks or recent history drawers.

Usability testing and feedback

UX Research

Product demos and interviews with customers to gain insights and engagement on features.

Product demos and interviews with customers to gain insights and engagement on features.

Product demos and interviews with customers to gain insights and engagement on features.

Feedback Survey

Receive direct in-product feedback from our customers for UX and PM to address.

Receive direct in-product feedback from our customers for UX and PM to address.

Receive direct in-product feedback from our customers for UX and PM to address.

5 star reviews

Reviews from our customers managing their data center networks.

Reviews from our customers managing their data center networks.

Reviews from our customers managing their data center networks.

Detect anomalies before they happen

Nexus Dashboard gives us a proactive notification for a specific Anomaly in each of our ACI sites. This tool provides a more efficient way to detect possible faults before they can actually happen and provides us with a recommendation on how to properly address the detected anomaly. Overall, this tool really helps us a lot in maintaining the reliability and operation uptime of our ACI Fabric.

Comprehensive network management

Cisco Nexus dashboad offers several features that make it a useful tool for network management. One of its main features is network visibility, which provides instant insights into network performance and usage patterns. This enables our tech teams to identify issues quickly and make critical decisions to resolve the issues.

Want to see more?

I'd love to chat more about my process and features I've lead while at Cisco.

I'd love to chat more about my process and features I've lead while at Cisco.

Say hello!

Blueprint Design System