Designing a chabot for JBL

MY ROLE

UX design, visual design

CLIENT

Harman International

key contributions

Strategy, Research,
Prototyping

the team

Christoper Shinn - VP of AI
Noah Girgis - Conversational Designer
Tushar K. Patel - Conversational Designer
Yiqi Sun - User Experience Designer
Adam Anzuoni - Data Analyst
Shantanu Srivastava - AI Engineer
Sandeep Peddireddy - AI Engineer
+ many others along the way

timeline

Mar - Aug 2019

cOMPANY

NeuraFlash

Overview

The JBL Virtual Assistant went live in the summer of 2019 on jbl.com and support.jbl.com.

Check the bot

the context

JBL is known for its great audio equipment, including loudspeakers and headphones. We were requested to implement a chatbot to assist JBL customers who used to connect with its customer service via phone or email.

my role

My major responsibility was to collaborate with two conversational designers to understand user requirements, define priorities and design the chatbot's chat flows.

As the only visual designer at the team, I was also tasked with the user interface design and adapting our chatbot to align with JBL's web design and brand style.

OUTCOME

The Virtual Assistant now closes 400+ cases per day for JBL.
‍
The JBL service chatbot has a high deflection rate of up to 83% meaning only 17% of conversations are transferred to the agents.

After launch, about 62.8% of users go to the product searching flows, and the completion rate is high, up to 48.46%.

Our goal

Our goal is to build an easy-to-use chatbot that provides convenient and reliable customer service to JBL customers.

Learn about our users

Besides topics like order status and product returns, JBL customers also ask for product support and make many product inquiries every day.

Identify the use cases

To identify the user needs, I worked closely with a data analyst and we did some initial analysis of the chat logs provided by JBL which came from a mix of channels like phone, web/email, social media posts, and chat. They allowed us to find out the most popular topics people ask about.

Analysis results of over 10,000 chat logs

Data provided by Adam Anzuoni

According to the bar chart above, about 25% percent of customers ask about product-related questions. We learned that besides providing regular customer services like checking order status, which our chatbot excels at, providing the customer with product support and address their product inquiries are just as important. In this case study, I will focus on showing my design process around product-related support.

Our challenge

1. How might we provide a chat experience that offers product support?

2. How might we help JBL customers find answers for their product inquiries?

Challenge 1.

How might we provide a chat experience that can provide users product support?

Our solution

a custom in-chat search experience

JBL customers now can quickly get product support by simply sending the chatbot a product-related question.

How we get there

Looking into hundreds of chats gave us an idea of what questions people asked and what resources the bot can use to help them.

What questions do people ask?

We looked into hundreds of chats under the topic of product support, and found a lot of repetitive questions like "Is the Flip 3 waterproof?" "I can't pair flip 3 with my iPhone", or "What is the latest software version available for Clip 2". After a meeting with JBL's customer service team, we realized this important fact that although many of the answers can be found in JBL's knowledge-base on its support site, people tend to ask customer support directly.

Image shows the dropdown menu of the product support site

Navigation on Support site

Image shows the search function on JBL's support site.

Search on support site

With a better understanding of this use case, we then figured out that for both JBL and JBL’s customers, it is essential for our bot to take advantage of existing content and make the knowledge-base more accessible.

Conversational Search is a key

JBL's help center and knowledge-base have plenty of helpful articles for users to search and browse. But searching in a help center does not allow users to ask questions in a full sentence. By searching through a chatbot, users can get a precisely screened and thus more accurate answer. So the challenge now is how to make sure the answers our chatbot provides meet customer needs.

During my meeting with the conversational designers, we considered various real chat conditions and decided to use a "name" + "topic" searching approach in the bot. Taking a frequently asked question, "I can't pair Flip 3 with my iPhone." as an example, people may have different ways of saying it.

"My flip 3 doesn't work.""My speaker seems broken.""How to connect my flip 3?""My Bluetooth doesn't work.""How do I connect my speaker to a Bluetooth device?"

The product name is highlighted in RED

The topic is highlighted in Blue

Some emphasized the product itself, while others described what happened. In order to cover all kinds of situations, in our approach, if the bot only gets the product name from users' questions, it will reply with a follow-up question asking about the topic. Giving an example below:

"My flip 3 doesn't work."

"I understand you're asking about JBL Flip 3. What topic can I assist you with?"

And if we only know the event such as "the Bluetooth doesn't work," the bot will reply with: "I understand you're asking about Bluetooth" and further ask for the product name. If we get both keywords, the bot will directly go through the searching process and display the related help articles. By having this approach in our mind and later approved by the leadership team, the conversational designers started to design the conversation flows, and I began to craft.

Crafting is challenging

Understanding what information users care about the most helped define what to be preset inside the chat window.

What information do users care about?

Unlike many other web-based tools, a chatbot's in-chat space is very limited and relatively small.

A highlighted blue area on chatbot's chat window indicates the safe area.

Before jumping into the craft stage, I believed that it was essential to understand what information users care about and what information would be presented inside the chat window as a useful help resource. In JBL's help center, typical help articles look like the screenshots show below.

An example of text-based articles

I then analyzed these help articles in the aspect of the necessary information and information types.

Users' chat logs tell us some information types are instrumental, while some do not apply to the chatbot use case. According to the chat logs, most users knew what products and product types they are asking about, so no need to provide a tedious product description and a "view more" link. However, considering they might forget their speaker's exact name, it is still necessary to display a list of applied products' names. I also took out the rate section, since the chatbot will ask about users' experience afterward through conversations, and this way, users can stay within a smooth chat environment. Then here is a distilled and concise version of the help articles:

Start crafting

After narrowing down the information types to present in the chat window, a general picture of this in-chat help article - mini version becomes more explicit in my mind, so I started to visualize it.

Compared with the original help article, I removed some information that is not particularly important, so it now becomes a condensed version displayed on one card.

Refine the solution

Given that the card is too big, I iterated the design and decided to collapse the card and make it expandable

Even the condensed version takes up too much space

Although the card is well contained in the safe area, it takes up the overfull real estate of the chat window, which means if there are multiple help articles to be shown, users need to make some crazy scrolls to check all cards, which makes it hard for users to find the answers they want. It also takes too much time for users to pinpoint the needed article.

come up with some other options and rapidly iterated the design

A smaller card with a scroll bar

Pros:

· The height decreased 1/4
· Users can glance at it quickly and decide to read more by scrolling or not.
‍

Cos:

· When there are multiple cards, the scroll interaction can be confusing.

An expandable card √

Pros:

· The collapsed card has a perfect size
· Users can quickly glance at the title and choose to read more or not.
‍

Cos:

· It requires one more click to view the body content.
· An icon and an arrow take up a considerable part of the title space

Even though the second option requires an extra click to view the body content, considering that our goal is to help users quickly and easily pinpoint the needed article, the expandable card would be a more suitable design.

Improvements needed for edge cases

Knowing that the expandable card has some scalability problems, I started a second round iteration by embedding some guidelines to the card design.

What if the bot needs to display 10+ extremely long articles

JBL has hundreds of help-articles in its knowledgebase. The first scalability problem is that some articles only contain 2 sentences, while some are relatively long.

An example of short article

An example of long article

To prevent showing a giant card that destroys users' browsing experience in the chat window, I further set up some rules for the card design. I then took back the scroll bar design and set up the expanded card's maximum height to 340px. The reason is that to provide a smooth chat experience, and I want to make sure after subtracting the space of this expanded card, the bot still has enough in-chat space to display at least two chat bubbles or mini cards to give users chat context.

So as to prevent displaying an endless list of help articles, I also set up the rule to show up to 4 of the most relevant help articles in the chat area, and if users need to see more, we can navigate them to JBL’s support site.