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
4 months
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
PROBLEM
So, what’s the issue?
So, what’s the issue?
The current system overwhelms users by hiding useful data and providing too little helpful information. This requires excessive clicks, greatly 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
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.
Why do we need to make changes?
Why do we need to make changes?
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.
How might we present comprehensive data in a way that is easily digestible and quickly accessible for 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:
Evaluate Current Dashboard
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.
Restructure Information Architecture
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
Adopt New Design System
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
Clear Navigation
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.
Status Breakdown
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
Stacked Cards for Quick Action
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.
Status Breakdown
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
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
Creative Chart Visualizations
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.
NEXT →
Crafting the Rapidly Evolving Design System
NEXT /
Crafting the Rapidly Evolving Design System →