Artboard 5 copy@2x.png

Hastings

Cisco DNAC Chatbot powered by Artificial Intelligence.
CONVERSATIONAL UI  ·  INTERACTION DESIGN · VISUAL DESIGN  
PROJECT OVERVIEW

Industry Research

User Interviews

Use Case Prioritization

Wireframe

A/B Testing

Visual Design

Logo Exploration

Motion Exploration

ROLE
  • My Role: Design Lead

  • Team: Collaborated with one researcher

TIME AND TOOLS
  • Duration: 2 Months

  • Time: 2019

  • Tools: Sketch, Invision, Invision Studio, Illustrator, Keynote

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.

1.

Easy to access and activate.

4.

Tolerate typos and ambiguity.

7.

Save information from one task to the next.

2.

Clearly tell people what tasks the bot can do. Make sure don't create false expectations.

5.

Allow people to interact with the bot both through free-text input and selection of links.

8.

Program flexibility into the bot: infer context and allow people to jump forward and backward.

3.

Users are not experts. Show examples of how they can ask questions.

6.

Allow sorting and filtering to let people narrow down through results.

9.

Make it personalized.

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:

  1. Identify key persona and corresponding use cases/pain points that have a need for conversational UI.

  2. Understand the preferred use case/usage scenario in order so that we can create a priority list and phase out the development.

  3. 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.

  4. 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
KEY FINDINGS

USE CASE

Users Prioritize Monitoring & Troubleshooting the Network.

  • Most users ranked below use cases for their top 4 on the desktop platform.

    • Monitoring and troubleshooting for Wireless

    • Monitoring and troubleshooting for Wired

    • Monitoring and troubleshooting for Application & WAN

  • Users don't change their ranking that much for the mobile platform. 

KEY FINDINGS

CONVERSATION

CUI Should Enable Users To Do More With Less Digging. 

  • Many expect to ask and receive general status updates about their network as well as querying specific components. 

  • Some expect to use keywords to see possible results.

  • Many expect to ask follow up questions after the initial query.

  • Accurate responses from the CUI to build trust and credibility with users.

  • Proactive automated troubleshooting and remediation.

KEY FINDINGS

INTERACTION

CUI Interaction Needs to Always be Available.

  • Have both voice interaction and typing options. A few participants mainly want to type to it (noisy environment and complex names).

  • Most users want a CUI popup or other format from anywhere in the network management system (or from the desktop) that can be easily accessed.

  • View the chat history, with some wanting to search back through it, reuse common queries, or export history for auditing purposes.

  • View and re-use common queries

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.

 

Email: limeng233@gmail.com  |  Phone: 412-708-8247

© 2020 by Meng Li