top of page

Cisco DNA Center Cloud

diagnostic tab.png

The Product

Cisco DNA Center Cloud is a cloud-based network management solution built to help mid-market customers set up, maintain, and troubleshoot their network.

The Challenge

Network engineers in mid-market companies spend most of their time troubleshooting network issues. We wanted to redesign our product to help our users discover and troubleshoot issues more quickly.

Previous Design

Previous Design

I designed the previous diagnostic page with the following knowledge of our users and solutions in mind for them: 

  • Users are more reactive than proactive.

  • Users only look at diagnostic tools and charts if there is an issue. 

  • Provided a link to tools and charts in proximity to the main issue alert.

  • All diagnostic and troubleshooting tools live in one location together so they're out of the way when not necessary and conveniently in one place when there's a problem. 

  • Users rely heavily on audit trails to look for issue root causes. 

  • We interviewed many users to find out which diagnostic actions they take the most. 

  • Users use charts to search for correlation and causality. 

  • Put audit trail in prime location.

  • Designed a diagnostic toolbox with the most heavily relied on actions. 

  • Added indication of any network changes to charts so users could pinpoint root causes of connection failures. 

diagnostic page.png

Usability Issues

We conducted user tests, and discovered the following usability issues:

1.

Testers completely missed the link to the diagnostic tools and charts.

Not obvious enough

2.

For the task "find out why clients aren't connecting", testers went looking in the Clients tab instead of the diagnostic page. 

3.

Testers wouldn't stay on the diagnostic page. They would go back and forth between that page and the higher level pages very often. 

breadcrumb.png

Too deep into the site hierarchy

Usability Issues
Diagnostic Tools

Diagnostic Tools

I made the following iterations to the diagnostic tools.

iteration1.png

Placed diagnostic tools on the main device page among core tabs for quick and easy navigation back and forth

Used card component from our design system to allow users to pick their tool.

iteration1.png

Problem! The cards are not easy to scan through and take up lots of space. In the future there would likely be more tools added too. 

I explored a tree-like design to organize the tools into broader categories.

iteration2a.png
iteration2b.png

I dropped this idea because it was not in our design system and would take more time to build. It also left a lot of empty space on the right side of the page. 

Final design:

I utilized a different card component from our design system that could organize the tools into categories and create more visual appeal. 

diagnostic tab.png

Added a log so users could track in-progress tests and refer back to completed tests

Data Charts

To minimize the need to navigate back and forth between different pages, I moved charts to pages where the relevant details were. For example, charts about client were moved to the "Clients" tab. 

​

I also embedded bar charts into the object tables because users often looked at the charts and complained that there weren't enough details. If they saw that a client was using the most data, they could just see that client's details right there on the same view. 

clients tab.png

For charts that didn't have a relevant tab, I grouped them together in their own tab as general System Stats. 

charts.png

This re-arrangement followed the users' flow of thought since they would first think about the object itself (whether it be network clients or network devices), go to that object tab, look at data comparisons to see if there are specific objects that they should pay attention to, and then dig further into that object's details. 

Data Charts
bottom of page