Cover.png

Cisco DNAC Assurance

AI-Powered Network Monitoring and Troubleshooting Tool
UX DESIGN · INTERACTION DESIGN · ARCHITECTURE 
PROJECT OVERVIEW

Need Discovery

Persona

User Journey Map

Design Workshop

User Testing

Service Blueprint

Visual Design

Framework Guideline

ROLE
  • My Role: UX Designer

  • Team: Collaborated with 1 Designer (in and out) and 1 Researcher

TIME AND TOOLS
  • Duration: 8 Months

  • Time: 2018 ~ 2019

  • Tools: Sketch, Invision Studio, Illustrator, Keynote

0. Prologue

0.1 WHAT IS DNAC ASSURANCE​?

For many years, networks have been implemented by highly-trained and experienced network operators manually with extensive use of CLI (Command Line Interface). However, the deployment and subsequent operation of a large geographically distributed network remains a very daunting task for most organizations. What if a network manager had a tool to input machine-generated configurations and just press a button? What if this tool could analyze the network and automatically spot issues when they arise and guide network managers to root cause it? Cisco DNA Center is Cisco's solution to provide single platform that can perform intent-based networking for large enterprises. And Assurance is the unit responsible for Day N monitoring and troubleshooting of the network.

 
 

0.2 WHAT DOES OUR UX TEAM DO?

Being a UXers in a big enterprise that used to be hardware-centric can be challenging, yet fulfilling. One the one hand, in the process of Cisco's expansion to the software industry, we tried to be the pioneer in terms of shaping the company's culture to be more dynamic, user-driven, and design-driven. Our team represents customer voice, we conducted generative user studies and design thinking workshops to help the business discover new opportunities and user needs. On the other hand side, we advocate simplicity and intelligence in our design solutions. Innovatively, we aim to turn the utilitarian and complex interface into an assistive and elegant experience, to make challenging tasks like "managing a network" easy and pleasant.

Design Process.png

1. Design Focus

1.1 WHAT IS MY DESIGN FOCUS​?

Within DNAC Assurance, I spent quite an amount of time working on understanding the user journey of troubleshooting network issues in their environment, propose simplified and elegant solutions to enhance the user experience of discovering, diagnosing, and fixing the issues. 

1.2 FINAL DESIGN​
Issue Banner with Text.png
issue dashboard present-01.png

Task-based Operational and Analytical Dashboards

A Scalable Framework for System-Guided Troubleshooting

AI-Driven Diagnosing Process

2.1 WHAT IS AN ISSUE?

Cisco DNA Assurance generates issues when it detects anomalies to alert users to take actions. The system can generate issues using thresholds and rules defined by many Cisco wireless and wired experts, TAC engineers and escalation support. The power of Machine Learning also allows issues to be triggered when the respective KPIs go beyond the normal baseline for the specific environment.  

2. Understand Users

Lifecycle of an issue

2.1 WHO ARE OUR USERS?

Cisco DNA Assurance's target users are all tiers of network engineers, from network operators to senior network architects. They are responsible for monitoring organizations' networks and assure everything works fine. They troubleshoot issues when an anomaly happens.

Issue Persona.png
SAMPLE OF USER JOURNEY

3. Drive the process

One of the key factors to a successful product is a well-established design process. Previously, our team acts more like a "mockup machine" (we joke about it all the time!) due to the fact that lots of requirements and ideas are already determined by our stakeholders. When I worked on "Issue Dashboard + Issue Details" design, I tried to speak up and evangelize a proper UX methodology. Below is what we accomplished in the end.

Issue Work Process.png

4. Deep Dive

        4.1 Issue Dashboard

NAVIGATE AMBIGUITY

Sometimes we get ambiguous requirements from our stakeholders and we have to be able to deal with it and find a way to navigate ourselves to the treasure. For example, the initial requirement for redesigning the issue dashboard was "We need to add some analytics to the page". In order to find users' real needs for this dashboard, I convinced the team to launch a concept testing to validate our original direction.

We need to add some analytics to the issue catalog page.

REDEFINE THE REQUIREMENTS

During the concept testing study, we focused on learning users' processes and tools used in troubleshooting networking issues, specifically

  • How they are notified or become aware of issues

  • How they decide what issues to focus on

  • Do they conduct any follow-up reviews or reporting

As well as collecting feedback on the early ideas of design.

The result of the study reveals that there are different goals and personas involved in the process, and their needs are dramatically different. These findings helped us shape the entire direction of the design.

Original Design: One Dashboard for All
Issue Dashboard v1.png
New Direction: Task-based Dashboards
IMG_1646.HEIC

During the study, we learned that participants will benefit from the different components in different scenarios, but not all of them at one time:

  • Issue trends could be useful for review or monitoring, but not day-to-day troubleshooting.

  • Network operators want to see separated P1 (Priority One) issues in the timeline.

  • Network operators focus on the issue list and need shorter duration of the time window.

  • Managers may need to see a historical view and analysis for team performance evaluation and network optimization.

 

 

An Operational Dashboard

An Analytical Dashboard

   4.2 Issue Details

CONSOLIDATE THE INPUT

My team initiated the issue details 2.0 design, as we received more and more feedback from internal stakeholders and customer demo. It's easy to lose track of all the feedback if we don't have a central place to consolidate them. My teammate and I came up with a way to track the comments on the Smartsheet and later group them into different themes. This laid the foundation of the page redesign.

workshop.png
Issue experience.png
1.x feedback.png

Feedback summary:

  • Need a better way to group the info for users to consume and correlate.

  • Need to have a clearer information hierarchy and enable users to get to the details easily

  • Need to avoid repeating information

  • Data visualization enhancements

  • Data readability due to contrast and size.

 

 

BREAKDOWN THE COMPLEX

In order to come up a better information hierarchy and grouping of the information, we again looked at the specific part of the user journey - "how users troubleshoot one issue" and summarized a logical path that represents users' mental model. From there, we came up with the needed IA as well as functionalities for issue details redesign.

Issue Details Flow.png

ITERATE THE DESIGN

In this phase, we examined various layouts and validate with users through RITE testing. Our goal is easy and intuitive navigation, and balance between elegancy v.s. complexity.

Old Issue Details.png
Issue Detail_Iteration.png
Issue details iter3.png
  • Consolidate issue details into 4 different stages in a form of storytelling: Problem Details, Impact, Root Cause Analysis, Suggested Actions.

  • A dedicated summary pane on top, disclose details progressively below.

  • Show problem detail charts by default.

  • Easy access to different sections at any time.

 

 

GENERALIZE THE DESIGN

One of the key goals for issue details redesign is to come up with a consistent and scalable framework that can work for 80+ issue types in Assurance. We experimented with the framework using 4~5 different issue types and came up with design variations to accommodate different types of content, varying from simple issues to AI issues using MRE (Machine Reasoning Engie).

Once we have the design solutions, it's also important to communicate the idea to the entire team especially the dev team, to make sure the design can be executed properly in an organized way. I created detailed specs to establish the bridge. In the end, the dev team was able to develop a similar modulized structure and coding framework that can be easily plugin for any issue type.

All%20the%20issue%20details_edited.jpg

Develop a common framework

Issue Detail Example: AI -Driven Issue
Issue Detail Example: AI -Driven Issue
Issue Detail Example: Single Client Issue
Issue Detail Example: AI-Driven Issue with MRE

5. Summary

MAKE SURE WE DON'T GET LOST​​

It can be overwhelming when working on a project that involves a large number of features, technologies, pages, and teams,  just like playing a puzzle game. As a designer, I am always trying to picture the big vision among these pieces and connect dots together for the team. Developing and maintaining a Service Blueprint helps me visualize the big picture while have to constantly dive into nitty-gritty details, and makes me practice product design thinking beyond UI level.

DARE TO CHALLENGE

It's easier to listen and comply with what the Product Manager tells you in a field that requires strong technical knowledge and background. Although we tried to take courses to learn network technologies, we are no way comparable to our PM, Eng, and customers - network engineers in the professional domain. However, this doesn't mean we can't question the request, be creative, and come up with our own ideas. And in these scenarios, the user research plays an important role in terms of validating hypotheses and discovering opportunities.

BUILD EMPATHY

Unlike many consumer products, our users are network engineers dealing with network problems every day, which means it's not possible to mimic their entire thought process for troubleshooting complex issues, and we won't be able to do the dogfooding. So it's very important to listen to their voice, learn the mental model, logics, and build empathy with them, in order to design a tool that's usable and intuitive. I found fulfilling whenever I heard "this can save us lots of work" or "this will make my life easier".