Cisco DNA Center Cloud
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
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.
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.
Too deep into the site hierarchy
Diagnostic Tools
I made the following iterations to the diagnostic tools.
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.
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.
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.
Added a log so users could track in-progress tests and refer back to completed tests