UX Case Study | Live Chat Experience

Redesigning the live chat in a African based betting company, Mercury Bet

Mercury Bet 2022

Overview

I have been working in the betting industry in the customer service department for the past 3 years. I decided to lead this project of redesigning the live chat feature to improve the customer experience when the customers are communicating with the support. With live chat, the support could turn every interaction with visitors to the app into a better experience and build stronger relationships.

Problem

The live chat was designed and released without any knowledge of design two years ago, however the customer service department noticed that the customers were not using live chat to contact the support. Most customers were choosing the contact support via e-mail or social media. However a huge benefit of live chat is that it has a higher customer satisfaction rate than traditional support systems like phone and email.

Solution

Create a new effective design for the live chat that needs to be easy to find on the app with the aim of improving the satisfaction levels among customers by making sure that their customers are getting the help that they need while online. We decided to prioritise the mobile app as our research shows us it is the most popular method for the customer to contact customer support.

My role

Solo UX Designer, User researcher

Tools

Figma and Miro

MY DESIGN PROCESS

DISCOVER

Observations

〰️

Observations 〰️

At this phase, my first step is to identify what competitors are using in their live chat with customers and understand what conventions they use and what we should follow. I also examined into existing studies and gathered data to understand how people use chat to interact with businesses and how this interaction channel could be improved.

Competitor Analysis & Field studies

What did I find?

  • The competitors use Chatbots

  • The majority of competitors located the live chat under Help or Contact Us

  • The competitors designed the layout on the screen with different colors.

  • The competitors started the chat saying: “Hello! How can I help you today?”

  • NN/Group created some guidelines based on an extensive user research on chat experiences that companies should take in consideration when exploring this feature.

  • The study says the users finds floating buttons placed in other positions than the standard one (bottom right corner of the page)

  • The study says the users ignore floating buttons in general are: (1) they are placed in another position then the standard one (bottom right corner of the page); (2) they don’t stand out enough relative to the rest of the page.

Assumptions & Insights

Users do not like to type their question multiple times

“Floating buttons for chat should be placed on the right and should contrast with the rest of the page”

A better chat starter is: “Hello! How can I help you today?

Interviews & Conversations

I interviewed stakeholders in order to get better understanding of the internal and business goals toward the project and what has already been tested.

In addition to the stakeholders’ interviews, I conducted users’ interviews and I found some interesting findings about users and pain points in the live chat available to customers

What did I find?

Stakeholders interviews

  • The company tested the Chatbot before and did not work well.

  • The users must fill the form to connect with to the system salesforce of the customer service.

  • The customer e-mail is required before the chat starts to connect on the customer service system. Using the customer e-mail the agent can easily find the case they are dealing with.

  •  The company tested that the chat starts without the transition page of the queue or wait, however, users became confused with the message “connecting" and immediately left the chat concerned that was an issue with the connection.

User interviews

  • Users like to know the estimated time it is going to take for them to receive help.

  • The users were pleased to see the message ‘Agent is typing’ during the chat.

  • Waiting always bothers the customers when they are using they're mobile phone

  • Users feel anxiety as soon as they realised something had gone wrong and think that making a complaint is a tedious process.

  • Negative outcome may make the customers less likely to bet, however positive experiences gives confidence to the customer.

  • Users expect such questions to be answered quickly, unless told by an agent to wait.

DEFINE

Priorities

〰️

Priorities 〰️

Affinity Mapping

At this defining phase, I arranged the user’s expectations and attitudes, and needs to create personas.

User Personas

I created user’s personas to help me determine how to create user flows, determine relevant features, and even create interactions. Deep understanding of a target audience is fundamental to creating great products. Personas help me find the answer to one of the most important questions in UX Design, “Who are we designing for?” By understanding the expectations, concerns and goals of target users, it’s possible to design a live chat that will satisfy users needs.

Empathy Mapping

 An empathy map was created to synthesize survey observations and reveal deeper insights into a user's needs.

Customer Journey Map

A customer journey map is a technique to understand the possible issues of the platform and identify some areas where we need to improve the design.

What could improve?

Based on the all findings shown above, I narrowed the focus into 4 areas for potential improvement of the original live chat:

  • Improve chat location on main screen

  • Improve navigation

  • Improve form more user-friendly

  • Improve UX Writing

IDEATE

Brainstorming

〰️

Brainstorming 〰️

USER FLOW

I created a user flow in order to fix the issues I have uncovered during the research and define which are highlighted in the affinity diagram and customer journey map.

PAPER SKETCH

Paper Sketching helps me to quickly visualize design ideas, drawing out brainstormed ideas or storyboard, representing the skeleton of the interface.

DESIGN

Solutions

〰️

Solutions 〰️

PROTOTYPE

After the creation of the user flow diagram and the sketches of the screens, I felt more confident to start designing a high fidelity prototype.

Proposed solutions (UX)

The chat location on main screen: Putting the chat location on the main screen helps a customer begin the process of resolver their query quicker.

Improve form more user-friendly: Simplifying the form structure to allow the user to complete online forms quickly without any confusion. Only asking exactly from the user what is required.

Improve navigation: Creating simple navigation to avoid the user getting lost amongst pages.

Improve UX Writing: Ensure that every word used is deliberate and useful. Use action words for button labels that connect clearly with the message text whenever possible, so users can understand the impact of their action.

Result

With the redesign, the live chat allows the users to give quick answers to questions about the products and solve their problems faster.

What did I learn?

Although, I have been working in this company as customer service administrador for the last 3 years. I have empathy with the customers and their behaviors and issues, it was a new challenge to solve their problems from a different perspective

Firstly, this betting company is available exclusively to countries in Africa, which it makes difficult to interview customers and conduct a usability test. I had to create a research plan: online interviews, meeting with the stakeholders and knowing which types of live chats they had already tested. For example, chatbot was my first assumption. Why not introduce the chatbot? The company tried and the response from the customers was negative. As a result I decided to keep the first point of contact in live chat with an agent, and also research the companies that use the same methods to understand the practices and conventions.

It was really satisfying to deliver the design that solved the customers problem when they are contacting the live chat and also impact their experience of using customer in a positive way.

If you have any comments I’d love to hear from you!

Thanks for reading!

〰️

Thanks for reading! 〰️

Previous
Previous

UI/UX Case Study | The Cosmic App

Next
Next

UX Case Study | Designing a start-up airline website