Hastings
Cisco DNAC Chatbot powered by Artificial Intelligence.
CONVERSATIONAL UI · INTERACTION DESIGN · VISUAL DESIGN
Background
Cisco DNA Center (a network management and monitoring platform) plans to offer a conversational user interface/voice assistant that will allow the customers to get information, troubleshoot, take action, and more, by just asking the CUI in plain English. The CUI is an initiative to improve user adoption, by enabling better product discovery, and allowing customers to gain more value out of our DNA platform. CUI, will also eventually allow the product to provide a cohesive user experience across different DNA center capabilities like assurance, automation, and provision. On the other hand, one of the competitors was offering this service and was being well-received by the users; we are aiming to achieve parity and eventually out-run the competition through our own CUI offering. Business value will be created by driving more customers to adopt DNA advantage and renew subscriptions in the future.
Challenge
This my first time getting chance of designing a conversational user interface. Although very interested and enthusiastic about this topic in the past, I've always been focusing more on the digital and graphic interface design. Meanwhile, most of the CUIs I've seen are used in consumer space, dealing with daily tasks, such as Google Assistant, Siri and Alexa. However, Cisco's product is going to be used by network engineers to do very technical jobs in very specific environments. A great amount of my time was spent on learning their needs of CUI and seeking an appropriate form to deliver this experience. searching for examples from the web, reading books, playing and trying voice applications, and talking to people that surrounded me to get inspiration.
The second challenge we have a very short timeframe for the Concept Commit (CC) delivery.
Industry Research
As the first part of the industry research, I wanted to understand what types of CUI exist in the industry so that I know where our product stands.
EXAMPLES

Chatbot
E-Commerce
Business
Productivity & Coaching
Alert & Notifications
Customer Service & FAQ
Games & Entertainment
Brand

Screen-based IA
Personal tasks
Expanding to enterprise
(Mostly on phone/laptop)

CUI in Network Industry
Second, learning and summarizing the Best Practice as I accessed to different apps and articles.
Third, besides knowing what are the good tips, also keep in mind what can go wrong.
- Nielsen Norman Group
Today’s chatbots guide users through simple linear flows, and our user research shows that they have a hard time whenever users deviate from such flows. Complexity is not well handled in the limited bot interface.
User Interviews
Before we start designing the screen or any conversations. We first need to understand who and what features we are designing for. A generative study was planned to collect such information. The goal of the user interview includes:
-
Identify key persona and corresponding use cases/pain points that have a need for conversational UI.
-
Understand the preferred use case/usage scenario in order so that we can create a priority list and phase out the development.
-
Understand what questions users want to ask, how users ask questions, and what kind of response they expect in the prioritized use case/usage scenario.
-
Understand any concerns or expectations of this type of voice system/conversational interface.
1.APPROACH
-
Moderated Remote Generative Study
-
60 Minute Sessions
-
4 Days of Fielding
-
15 Participants covering 4 personas

CUI Demo put together by Eng Team
2. METHODOLOGY

Participants performed the following activities:
-
Reviewed CUI demo and provided feedback on:
-
Expected functionality
-
Expected interaction
-
Ranked 8 categories for CUI priority for desktop (top 4) and mobile (top 3).
-
Spend 100 points on the 12 use cases from previously selected Top 4 categories in desktop to indicate value.
-
Indicated which use mobile use cases across Top 3 were most important (no point spending, simple selection).
Category Ranking and Use Case Bidding
3. KEY FINDINGS
Highlight and trace health issues that impact the network.”
If you can save me a few seconds, that’s what I care about.”
It would take a while to build up the trust. It’s the buddy cop movie analogy - they don't trust each other at first, but then they build trust over time.”
4. WORKFLOW SUMMARY

Design - Phase 1
Problem Statement:
Design a web-based intelligent assistant that use NLP to understand and support users to accomplish their monitoring and troubleshooting goals, and gradually expand to mobile and voice options.
-
Users liked having information-rich pages with graphs/tables (as opposed to more summarized info)
-
Users liked having the chat window isolated to the left side of the page (as opposed to interwoven throughout the page). This was due to the clarity it offered.
1. WORK PLANNING
Since this is the first time our team (including the PM and Eng team) exposed to CUI design and development work, I mapped out all the essential design work needs to be done, to help our stakeholders understand the scope and process needed, and align on the priority of my first batch of delivery. We decided to focus on navigation and develop some conversation first, and later tackle the visual and branding.
2. WIREFRAMING

3. CONVERSATION
Based on the top selected queries collected during the generative study, I worked with the stakeholders to brainstorm different kinds of conversations, including the questions, answers, and next-step suggestions. From there, we further composited the storyline of the POC (proof of concept). We want to demonstrate how smart assistant can help users fast discover and troubleshoot problems in their network.

4. A/B TESTING
Option A
-
Mobile-first
-
Interwoven chat
-
Rely on the conversation to navigate
-
Summarized info
Option B
-
Optimized for wide screen
-
Track dialog by thread
-
Allow manual navigation
-
Dense info
Analyzing Results


Design - Phase 2
Iterate based on user feedback and tweak visual details.

PROTOTYPE

Logo Exploration
In order to communicate ideas in an excited and pleasant way, I wanted to give it a brand. I explored some ideas about how Hastings could look like, and I designed the logo in my spare time. Below is one of them.
