Transforming Cisco's Nexus Dashboard Orchestrator

Transforming Cisco's Nexus Dashboard Orchestrator

Transforming Cisco's Nexus Dashboard Orchestrator

My Role

Product Designer II

Team

Sr. Director of Engineering,

Principle Technical Marketing Engineer

Sr. Product Design Manger

UI Manager

Timeline

March 2023 - June 2023

Overview

NDO faced challenges like cognitive overload from complex task flows and dense information, as well as inconsistent visual styles.


I worked with cross-functional teams in engineering, marketing, and QA to analyze use cases, and streamline processes to address issues effectively.


The final design launched successfully within three months and was prominently featured at Cisco Live 2023 in Las Vegas. Showcased to 20,000 attendees and nearly a million online viewers, the redesign significantly improved network performance and scalability for major companies like CVS, Rakuten, Verizon, and Skanska.

NDO faced challenges like cognitive overload from complex task flows and dense information, as well as inconsistent visual styles.


I worked with cross-functional teams in engineering, marketing, and QA to analyze use cases, and streamline processes to address issues effectively.


The final design launched successfully within three months and was prominently featured at Cisco Live 2023 in Las Vegas. Showcased to 20,000 attendees and nearly a million online viewers, the redesign significantly improved network performance and scalability for major companies like CVS, Rakuten, Verizon, and Skanska.

CONTEXT

CONTEXT

The Symphony of Network Management

The Symphony of Network Management

In any symphony, you need a good conductor to help orchestrate all the different instruments to produce a harmonious sound —
It is the same with networks.

In any symphony, you need a good conductor to help orchestrate all the different instruments to produce a harmonious sound —
It is the same with networks.

Cisco's Nexus Dashboard Orchestrator (NDO) conducts your network operations, aligning every system to deliver seamless data center performance.


With NDO ensuring consistent network policies, scalability, and disaster recovery, your network plays in perfect harmony across environments.

Cisco's Nexus Dashboard Orchestrator (NDO) conducts your network operations, aligning every system to deliver seamless data center performance.


With NDO ensuring consistent network policies, scalability, and disaster recovery, your network plays in perfect harmony across environments.

NDO

NDO

Problem Statement

Problem Statement

So, what’s the issue?

So, what’s the issue?

The current system overwhelms users with dense information and requires excessive clicks, severely reducing task efficiency.

The current system overwhelms users with dense information and requires excessive clicks, severely reducing task efficiency.

The current system overwhelms users with dense information and requires excessive clicks, severely reducing task efficiency.

CHALLENGES

CHALLENGES

Setting the Stage for Innovation

Setting the Stage for Innovation

After discussions with the marketing team and senior leadership, I identified several critical issues with the existing information architecture. The primary users, including network operators, administrators, and IT professionals who manage data center operations, face the following challenges:

Old NDO interfaces

Why do we need to make changes?

Why do we need to make changes?

1 /

1 /

Cognitive Overload & Complex Flows

Cognitive Overload & Complex Flows

IT professionals faced overwhelming data and complicated workflows, making it challenging to grasp network health and manage tasks efficiently.

IT professionals faced overwhelming data and complicated workflows, making it challenging to grasp network health and manage tasks efficiently.

2 /

2 /

Inconsistent Visual Styles

Inconsistent Visual Styles

A lack of visual consistency across the platform caused user confusion and cumbersome.

A lack of visual consistency across the platform caused user confusion and cumbersome.

3 /

3 /

Visibility needs

Visibility needs

There was a pressing need for a dashboard that could provide at-a-glance monitoring of network connectivity and configurations across multiple data centers and cloud environments.

There was a pressing need for a dashboard that could provide at-a-glance monitoring of network connectivity and configurations across multiple data centers and cloud environments.

There is a critical need to simplify navigation paths and reduce cognitive load to enhance overall usability and productivity. Addressing these challenges will ensure a more intuitive and efficient experience for all users.

DESIGN PRINCIPLE

DESIGN PRINCIPLE

Crafting with Care

Crafting with Care

Given the complexity and high demand for configuration and automation in data center products, the redesign adhered to the following core principles to guide our creative process:

Given the complexity and high demand for configuration and automation in data center products, the redesign adhered to the following core principles to guide our creative process:

Intention

Intention

Solutions backed by data-driven research

Solutions backed by data-driven research

Simplicity

Simplicity

Eliminate unnecessary steps and clarify paths to improve task efficiency.

Eliminate unnecessary steps and clarify paths to improve task efficiency.

Intuitive

Intuitive

Create a logical layout that matches user expectations for easy navigation.

Create a logical layout that matches user expectations for easy navigation.

Tone

Tone

Friendly graphics paired with natural verbiage

Friendly graphics paired with natural verbiage

REVAMP FLOW

REVAMP FLOW

Redefining: A Strategic Overhaul

Redefining: A Strategic Overhaul

Finding structure amidst the chaos

Finding structure amidst the chaos

To transform the Nexus Dashboard Orchestrator and streamline its workflow, I first evaluated the existing dashboard to identify key pain points. This analysis highlighted structural issues in the information architecture and pinpointed areas that needed reorganization for improved clarity. With these insights in hand, I undertook the following steps:

To transform the Nexus Dashboard Orchestrator and streamline its workflow, I first evaluated the existing dashboard to identify key pain points. This analysis highlighted structural issues in the information architecture and pinpointed areas that needed reorganization for improved clarity. With these insights in hand, I undertook the following steps:

  1. Evaluate Current Dashboard

  1. Evaluate Current Dashboard

I found that the multi-layered left navigation, combined with the page information architecture, made finding specific tasks challenging, which including:

I found that the multi-layered left navigation, combined with the page information architecture, made finding specific tasks challenging, which including:

1 /

1 /

Navigation and Info.arch

Navigation and Info.arch

The multi-layered left navigation and page information architecture made it challenging for me to find specific tasks efficiently.

The multi-layered left navigation and page information architecture made it challenging for me to find specific tasks efficiently.

2 /

2 /

Site Status Tooltip

Site Status Tooltip

Tooltips were too large, exposing unnecessary secondary-level information and cluttering the screen.

Tooltips were too large, exposing unnecessary secondary-level information and cluttering the screen.

3 /

3 /

Data dense table

Data dense table

While tables were effective for viewing large datasets, I needed a more actionable, at-a-glance visualization from a top-down perspective.

While tables were effective for viewing large datasets, I needed a more actionable, at-a-glance visualization from a top-down perspective.

Why do we care?

Why do we care?

The cluttered navigation and oversized tooltips made it difficult to find information efficiently. More intuitive and actionable visualizations were essential for improving data clarity, navigation, and workflow efficiency.

The cluttered navigation and oversized tooltips made it difficult to find information efficiently. More intuitive and actionable visualizations were essential for improving data clarity, navigation, and workflow efficiency.

  1. Restructure Information Architecture

  1. Restructure Information Architecture

After identified those existing problems in the existing dashboard, I then collaborated with senior leadership to reorganize the information architecture, minimizing unnecessary information exposure for users.

After identified those existing problems in the existing dashboard, I then collaborated with senior leadership to reorganize the information architecture, minimizing unnecessary information exposure for users.

+ Consolidated left navigation to streamline user access to key functionalities.

+ Consolidated left navigation to streamline user access to key functionalities.

+ Integrated dynamic, scrollable data visualizations for more efficient data interpretation.

+ Integrated dynamic, scrollable data visualizations for more efficient data interpretation.

Before & after information architecture

Before & after information architecture

  1. Adopt New Design System

  1. Adopt New Design System

While working on revamping the NDO dashboard, I led the team's transition to a new design system. In maintaining this new system, I ensured that the dashboard was not only revamped but also comprehensively redesigned according to the new standards.

While working on revamping the NDO dashboard, I led the team's transition to a new design system. In maintaining this new system, I ensured that the dashboard was not only revamped but also comprehensively redesigned according to the new standards.

check out Blueprint design system project

IDEATION

From Evaluation to Innovation

Based on the current evaluation of the dashboard, I began sketching out ideations and experimenting with data visualization to find a more effective way to translate table data. After several rounds of design critiques with the design team and senior leadership, we refined our approach to ensure the best possible outcomes.

Dashboard redesign ideations

IDEATION

From Evaluation to Innovation

Based on the current evaluation of the dashboard, I began sketching out ideations and experimenting with data visualization to find a more effective way to translate table data. After several rounds of design critiques with the design team and senior leadership, we refined our approach to ensure the best possible outcomes.

Dashboard redesign ideations

REVAMP OVERVIEW

REVAMP OVERVIEW

Global Visibility Redefined: Before and After

Global Visibility Redefined: Before and After

Centralized global visibility - dashboard overview

Centralized global visibility - dashboard overview

  1. Clear Navigation

  1. Clear Navigation

Consolidated the left navigation to provide a streamlined information architecture, reducing unnecessary clicks.

Consolidated the left navigation to provide a streamlined information architecture, reducing unnecessary clicks.

  1. Status Breakdown

  1. Status Breakdown

Divided the status section into two parts: single site status and aggregated site status for better clarity.

Divided the status section into two parts: single site status and aggregated site status for better clarity.

Health monitoring -Sites

  1. Stacked Cards for Quick Action

  1. Stacked Cards for Quick Action

Consolidating the left navigation streamlines the information architecture, reducing clicks and simplifying user flows for quicker access to essential features.

Consolidating the left navigation streamlines the information architecture, reducing clicks and simplifying user flows for quicker access to essential features.

  1. Status Breakdown

  1. Status Breakdown

Splitting the status section into single site and aggregated site status enhances clarity, providing users with a more granular understanding of network health across different levels.

Splitting the status section into single site and aggregated site status enhances clarity, providing users with a more granular understanding of network health across different levels.

Tenant

  1. Tenant Treemaps

Treemaps visualize the scale and category of tenants in a compact format, offering a high-level overview that simplifies comprehension and aids strategic planning.

Templates

  1. Creative Chart Visualizations

  1. Creative Chart Visualizations

Using creative charts to depict subcategorical data helps users quickly understand templates by state, type, and status, promoting informed decisions and efficient management.

Using creative charts to depict subcategorical data helps users quickly understand templates by state, type, and status, promoting informed decisions and efficient management.

DESIGN ITERATION - EDGE CASES

DESIGN ITERATION - EDGE CASES

Optimizing for Scale

Optimizing for Scale

During the design iteration process, we encountered various edge cases that required creative solutions to maintain clarity and usability. Here’s how we tackled these challenges:

During the design iteration process, we encountered various edge cases that required creative solutions to maintain clarity and usability. Here’s how we tackled these challenges:

How do I display adjacent sites on a map?

How do I display adjacent sites on a map?

Aggregated view zooms into individual statuses

Aggregated view zooms into individual statuses

Two sites on the map often don't overlap, but it's possible given the dashboard map's scale


To address this, I designed a dynamic aggregated view with status indicators to show stacked sites. When zooming in, the aggregated view separates into individual status views.


It provides a clear, organized representation of stacked sites, enabling users to differentiate and monitor adjacent sites efficiently. This solution enhances visibility and prevents overlap on the map, ensuring seamless navigation between sites

Two sites on the map often don't overlap, but it's possible given the dashboard map's scale


To address this, I designed a dynamic aggregated view with status indicators to show stacked sites. When zooming in, the aggregated view separates into individual status views.


It provides a clear, organized representation of stacked sites, enabling users to differentiate and monitor adjacent sites efficiently. This solution enhances visibility and prevents overlap on the map, ensuring seamless navigation between sites

Wait, what if we have more than 100?

Wait, what if we have more than 100?

Simple & intuitive

Simple & intuitive

It is good see all data got visualized in charts, however, when managing a large amount of networks, optimization is the key. Though with the new data visualization make the table more glanzble, it missed the capability of viewing hundreds of data.


By add a button for users to “view all”, it still gave the user capability to consume a large amount of information.

It is good see all data got visualized in charts, however, when managing a large amount of networks, optimization is the key. Though with the new data visualization make the table more glanzble, it missed the capability of viewing hundreds of data.


By add a button for users to “view all”, it still gave the user capability to consume a large amount of information.

Too small to see?

Navigating the Details in Compact Spaces

Navigating the Details in Compact Spaces

Although treemaps are effective for visualizing large amounts of data hierarchically, they sometimes present challenges when displaying detailed information.


The smallest sections of the map may not support secondary level drill-downs due to their limited size, and subtle color differences can also become difficult to discern.


To address these issues, I implemented tooltips to reveal secondary information, ensuring that users can access detailed data insights without compromising the overall visual integrity of the dashboard.

Although treemaps are effective for visualizing large amounts of data hierarchically, they sometimes present challenges when displaying detailed information.


The smallest sections of the map may not support secondary level drill-downs due to their limited size, and subtle color differences can also become difficult to discern.


To address these issues, I implemented tooltips to reveal secondary information, ensuring that users can access detailed data insights without compromising the overall visual integrity of the dashboard.

Iteration

Iteration

What’s next?

What’s next?

Design critique

Design team

After the initial design rounds, I organized an open design critique session, inviting every designer on the team to review and provide feedback.

Technical Marketing Team (TME)

Technical Marketing Team (TME)

Subsequent iterations incorporated input from senior leadership and marketing team stakeholders, culminating in a comprehensive review session that ensured the final product met all technical and user experience standards.

Subsequent iterations incorporated input from senior leadership and marketing team stakeholders, culminating in a comprehensive review session that ensured the final product met all technical and user experience standards.

OUTCOME

OUTCOME

Showcasing at Cisco Live

Showcasing at Cisco Live

The final design was launched successfully within three months and featured prominently at Cisco Live 2023 in Las Vegas. Presented in front of 20,000 in-person attendees and nearly a million online viewers, the revamped NDO dashboard demonstrated our commitment to leading-edge solutions and user-focused design.

RETROSPECTIVE

RETROSPECTIVE

Lesson learned

Lesson learned

During the project, I grasped the significance of stepping forward and anticipating opportunities to enhance our creations. Collaborating with top senior leaderships, I recognized the importance of synchronizing our objectives and communicating proficiently to guarantee their strategic perspective was incorporated into the concluding work.

By engaging them actively in the creative process, I succeeded in harvesting valuable viewpoints, securing their approval, and steering choices that resulted in groundbreaking resolutions while cultivating a cooperative atmosphere.

During the project, I grasped the significance of stepping forward and anticipating opportunities to enhance our creations. Collaborating with top senior leaderships, I recognized the importance of synchronizing our objectives and communicating proficiently to guarantee their strategic perspective was incorporated into the concluding work.

By engaging them actively in the creative process, I succeeded in harvesting valuable viewpoints, securing their approval, and steering choices that resulted in groundbreaking resolutions while cultivating a cooperative atmosphere.