Designing Best-in-Class Customer Support Live Chat Experiences

7 min read

“When you break it down, customers and agents both want the same thing: an exchange of information as quickly as possible.”

Ryan H.
Ryan H.
Published December 4, 2020 Updated December 21, 2020
Customer support agents fielding live chat inquiries from users

Live chat,” as Stream recently wrote, “lets participants skip formalities and get right to the point.”

In keeping with this spirit, we’ll do just that. But, first, some quick scene-setting: as a follow-up to our best practices overview for Sales & Customer Service (and what better time than now, the holiday season?) we sat down with Stream’s lead UI/UX designer, Mark Peck, to, ahem, chat about the process behind building best-in-class customer support live chat experiences, a feature that is quickly becoming a must-have for companies large and small.

From creating AI-powered bots and robust content strategies for both agents and customers (with a healthy dose of empathy for all), Mark gives us a peek into what helps separate good from great experiences and why, especially when creating design systems for users under duress, it is paramount to check egos at the door and create experiences that help people solve problems as efficiently as possible.

What’s the first thing you do when starting a design project such as this?

I want to see what's out there and spend as much time as I can researching, especially when I’m building from scratch. I have a good amount of experience designing for the customer service space, but I want to come at it with a clear vision, cognizant of my own bias. That said, because I’ve built a few before, I was able to hit the ground running versus crawling. And, in the demo environment, not everything needs to be as perfect as it would if you were building an enterprise live chat solution. Still, you want to emulate those controls and create as realistic an environment as possible.

Describe that environment.

When you break it down, customers and agents both want the same thing: an exchange of information as quickly as possible. So it helps to jumpstart that conversation, and in many cases, that means creating a bot-like experience to streamline the process before handing off the conversation to a live agent. So, for customers, you present the information very clearly — How can we help? What are you looking for?

And that’s where design and content collaborate, offering users standard options around price, orders, and more. You have to remember: customers are not here because they want to be. Yes, they may want to be there more so than they want to be on the phone, but they still have a problem or are looking for information, often rather urgently.

And from the agent’s view, they also want a streamlined experience. They need information from the user to help identify the problem to offer the solution. So it’s a similar checklist, just in a different form — they get the notification, digest the information from an AI system, and then can begin addressing the issue. And for the most part, speed wins. But what good is speed if the incoming information is wrong or incomplete? That’s why you have to build a methodical and logical process that blends efficiency and quality.

Live chat AI-powered bot helps users find information quickly

Do users want to know if what they’re interacting with is a bot?

Most people are accustomed to it and expect that at least the first few messages on a customer support platform are automated. And if it’s a lengthy back-and-forth interaction, there is no reason to pretend otherwise. Plus, users often like to deal with bots, as they know the information is coming in quickly.

That said, you want to try to emulate conversations the way people are used to having. That means including typing indicators, read receipts, and measured responses, meaning not a ton of information at once causing, say, a scroll. While people may know the system is automated, they still want to feel like they’re speaking with a person, you know? Humans like to feel that connection, even if they’re playing along to some degree. I think where that stems from is that while they know that that conversation is AI-powered, they know it was at least at one point thought through and built by other humans. That’s the comfort they’re looking for, and that’s what I design for.

How does designing for customer support systems differ from other types of messaging platforms?

For one, this isn’t a social messenger platform where you have GIFs and stickers. You can think of it as something of a brutalist design. It’s delineated information that isn’t there to entertain. In other words, it must be functional before anything else. Remember, you’re designing for a discussion with a customer who is maybe not in a great mood.

So it’s my job as a designer to represent that information, to ease that friction, and present that information in a digestible way that then helps solve the customer’s problem. And you want to give the agent the tools to do so. That means instead of GIFs and stickers, it’s allowing for document sharing and live link previews that can assist users under stress. Like so much of what we do in design, it’s about having empathy for your user. And perhaps never is it more important to tap into that side of thinking than when designing the customer support experience.

a customer service agent view for live chat support

Sounds like these designs should stick to the script, so to speak.

It is always risky, especially in this particular case, to outright change tried-and-true UI/UX patterns. Consider Jakob’s Law, which states: “users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.”

For instance, you better have an awfully good reason to position the live chat window somewhere other than the bottom right corner of the screen. I can perhaps see doing a full-screen takeover, but you want to at least begin the process the way users have come to expect seeing and interacting with it.

But that doesn’t mean we can’t improve upon the practice and create designs that help brands differentiate themselves. For example, I find it helpful to minimize the chat window and eliminate sound notifications — users, at this stage in the game, are able to find the chat on their own if provided an affordance, and they don’t want a bunch of sound notifications. At the very least, provide an easy way to mute them! Elsewhere, we can help users by providing dynamic chat capabilities such as image sharing along with safe, secure encrypted chat bots that carry sensitive information relating to credit card numbers and passwords.

How do you humanize an experience that, as you said, often assumes a “brutalist” design?

It’s in the details. For instance, my latest designs include thumbnail images of customer support agents to help show that there are indeed people on the other end of the line waiting to help. Additionally, we list wait times — “two minutes,” etc. — that give users a sense of when they can expect a response. In my experience, users would rather know how much time the chat response is going to take rather than be left in the dark, even if that wait time is substantial. That, again, helps ease the anxiety of the customer — and here, the old saying applies: not knowing is the worst part. I always strive to eliminate that type of UX.

And at the risk of contradicting myself from something I said earlier: when it is appropriate, it’s certainly fine to include emojis and friendly details that punch up the experience and make it, dare I say, fun. Now, don’t trade function or efficiency, but when possible, use humor and light-hearted interactions to help diffuse user apprehension.

Customer support live chat on mobile device featuring customer in need of assistance

These designs must not only fit various use cases, but also on many different devices and operating systems, along with varying speeds of both — seems like a lot to consider?

You said it. It’s one thing to design these screens in a vacuum and in a controlled environment, on a nice big monitor, and as if everyone is going to read every word and consider every single design decision. In practice, it’s a lot more likely users are slouched over on their phones in a crowded train with bad cell service, and they can’t remember their password or order number. Conversely, customer support agents may be working with out-of-date hardware and on decades-old operating systems in different parts of the world.

So while in theory, you want to create beautiful, awesome designs and experiences, what you need to do first is check your ego and design for your audience and give them the tools they need to succeed. After all, what’s a brand new Lamborghini good for if you don’t have the keys?

Good point. OK, last thing: what does the future of customer support chat look like?

I have no idea! [Laughs.] But here is what I know: no matter the devices, operating systems, and platforms we use, there will always exist the need to help each other find answers. As long as customers are around they will have questions, and whether it is next year or 30 years from now, the better those companies can serve their customers the healthier their business is going to be.

Maybe “chat” becomes fully automated on both sides and there are only predefined inputs. Maybe “chat” becomes real-time video connecting users and support agents on the other side of the world. Maybe AI gets so good that it knows our passwords and can verify order numbers through facial recognition. Who knows! But, again, it all ladders back to building systems with empathy and for the audience that is actually going to use the product. There are no points given for trying, either — we have to keep creating, building, developing, and we have to keep iterating as our users need us to. We’re only as good as our last customer.