AI-Powered Chatbot Experience, Redesign

I spearheaded a redesign for their chatbot of a telecommunication company during their collaboration with Google, that increased their users by 200% and cut live agent interactions by 50%, slashing customer service costs.

Key Contributions

Brand Redesign, User Flows, User Experience


Team

PM, Tech lead, Developers & me (designer)

Tools

Figma, Miro, Jira




Timeline

3 Months
Sep '21 - Jan '22



Figma

Figma

Figma

Media

Media

Media

Background

Currently, the Chatbot is useless.

Telus, (named Letus in this case study) a major Canadian telecommunications company, faced a wave of customer complaints about their chatbots.

The live chat support team was also struggling, as 90% of chatbot conversations ended up being handed over to live agents. This prompted the team's mission to reduce this dependency and move towards an AI-powered chatbot with their collaboration with Google Clouds.

The chatbot team, responsible for managing chats company-wide, was short-staffed due to the departure of their sole visual designer a few months before I joined.

This is where I step in, a consultant UX Designer, stepping in to bridge the user experience gap.

Intro

Unleashing Chatbot Magic.
Crafting Enchanting User Journeys.

Letus presented me with an exciting opportunity: to enhance the user experience of their chatbot. The Chatbot team, comprising a Project Manager, a Tech Lead, and three dedicated developers who were then primarily engaged in integrating AI functionalities, entrusted me with this challenge.

Embarking on this endeavor, my objective was to craft improved user journeys for the chatbot, aiming to address a multitude of customer grievances and concerns.

GOAL

How can the chatbot effectively address
customer needs without live agents?

As stated earlier, the chatbot was connecting to the live agent 90% of the time.

This wasn’t tapping into the potential the chatbot has to solve these problems the customers were facing.

I decided to focus our efforts on improving the customer journey and finding out what problems we can automate. This would allow the company’s live agents to deal with more complicated issues and have their website engagement increased.

90%

CONNECT TO LIVE AGENT

Customers use bot to connect to the live aggent and don't see the value of the bot.

10

LIVE AGENTS

Customers don’t see the value of having their problems solved through the bot.

2

HOURS

The average wait time to get connected  with live agent is 2 hours through the bot.

KEY RESEARCH INSIGHTS

The answers are right in front us.

I turned to the live agents to get a better insight into customer’s problems and how we may be able to better the user flow to help. I also tested the company’s chatbot and found a lot of pain points for users. 

The live agents told us that majority of the problems that customers contacted them about could have been solved through the bot. The problem is, the bot had too many options and it confused the users. I noted the problems that could be solved by the bot.

TOO MANY OPTIONS

The chat bot had solutions the customers were looking for, but there were too many options to choose from and the user would skim through instead of reading all the options.

No in-chat Sign In Option

One of the main concerns I noticed was that the sign in or sign up option would be a hyperlink, which would make users lose the chat and open up a different window.

Inconsistent Design

The options listed would sometimes be in a scroll hover buttons at the bottom, there would be lists of hover buttons, or there were in a hamburger style. There was no consistency in the options.

Unclear User Flow

The user flow was all over the place, it didn’t help solve a problem and would often loop back in process. It was frustrating to navigate through.

INFORMATION ARCHITECTURE

Card Sorting

With too many choices for customers to sift through, I organized a workshop to simplify things for the teams. In my role as a consultant, I noticed a problem: the teams operated separately and hardly talked to each other. The chat team didn't collaborate with the mobility or business teams. To get a better perspective, I even invited a live agent who had insights into customer issues.

During the workshop, we all realized that many of the chat options were unnecessary. We trimmed them down to a handful that mattered most. This workshop also turned out to be a great chance for everyone from different teams to meet, talk, and share ideas for future improvements.

User Flow

After we narrowed our features list by importance and made sure it fit within our budget, I put together the current flow and finding out ways where we can place the new features. After a few iterations with the team, we came up with the version on the right.

Before

After

DESIGN

Bot Conversation Design

Existing Customer

New Customer

Connecting to Agent

Lists/Button Quick Replies Designs

The Quick Replies were narrowed down to the most commonly asked from the live agents so that the chatbot can solve the customer's questions without the need to connect to the live agent.

Error States Reimagined

This is when connection is lost and messaged failed to send, left-side is preferred but if the system can't load the entire chat, then the right screen will display.

Catalogues

Instead of listing the items in a scrollable format, we suggested the design of having the catalogues be listed in a Carousel instead. It'll be easier for the user to click next than to scroll all the way up to the chat.

Post-Bot Survey

We created a post-bot survey with star-ratings so that it would be fast and easy for users to submit and they had an option to chat more about their ratings if the ratings were 3 stars or below as shown in the right-most screen.

Final Designs

Figma Developer Hand-off

The figma we created was organized in three sections: Final Designs, Work in Progress and Archive. We also left more designs in the "Future Feature" sections to give more design ideations for chat side icon and proactive chats in minimized mode. The handoff MVP was listed from the Developer's Jira tickets and had comments for the developers to make the design hand-off smooth.

IMPACT

Final Thoughts + Next Steps

One of the reasons why this company contacted Thoughtworks was because of their partnership with Google . With aspirations to leverage Google Cloud for website enhancement, an epiphany emerged: their chatbot warranted a reinvigorated user experience.

The clients were happy with the redesign which helped them in their collaboration with Google on this to improve their chatbot.

The tangible results are vivid in the accompanying screenshot: a chatbot that evolves dynamically, culminating in a 50% reduction in costs associated with engaging live agents.

Below is Google Cloud's case study mentioning the chatbot I worked on with the company name blurred.

LETUS (NDA Protected)

Product Manager

Product Manager

The layouts were ingeniously conceived, advancing our partnership and fostering cross-team collaboration within our corporation. We are grateful for all your endeavors and eagerly anticipate our future engagements.

The layouts were ingeniously conceived, advancing our partnership and fostering cross-team collaboration within our corporation. We are grateful for all your endeavors and eagerly anticipate our future engagements.

The layouts were ingeniously conceived, advancing our partnership and fostering cross-team collaboration within our corporation. We are grateful for all your endeavors and eagerly anticipate our future engagements.