Case Study: How We Created Smart Widget For Bank Website

Business process automation (BPA) makes companies more flexible and agile. It sets the right balance between human and robotic labor, allowing each party to perform tasks they do best. BPA touches nearly every side of business activity. However, the most significant impact is observed in customer care. 

According to Gartner, 70% of human agents will work side by side with AI-powered platforms by 2022. This is not surprising. Smart technologies show good results in interacting with clients. They quickly assist in simple queries, allowing humans to focus on more creative tasks.

This post will share the results of work on creating an AI-based widget for a European bank website. It allows users to quickly learn about bank products and contact an operator if necessary.

Contents

Project Goal

How Widget Works

    User Interface

    Admin Interface

Technologies In Use

Outcome

Project Goal

The project’s goal is to automate the answers to standard questions and provide a better user experience. For this purpose, we develop a widget for a bank site that contains the most popular requests and responses to them. Except for predefined answers, the widget generates replies to non-standard questions using built-in smart technologies. Thus, users have quick access to information and can easily understand banking products. 

It is expected the solution will cover 85-90% of user queries and reduce the contact center load. Upon achieving such a result, the bank will significantly improve service quality and increase customer satisfaction. Human agents will pay more attention to non-trivial cases and resolve complex issues faster.

How Widget Works

By and large, the widget is a modern representation of the knowledge base. It is placed on the site page, so the user does not have to go elsewhere to search for the question of interest. The widget has user and admin interfaces. Let’s see how it works.

User Interface

When on the site, the user opens the widget and sees a list of popular questions. The questions list depends on the page the user is currently on. For example, the main page contains such questions as “How to replenish the card?” or “How to find out the account details?” The loans page displays the following queries: “What are the mortgage lending conditions?” or “What documents do I need for a cash loan?”

If the needed question is not on the list, the user can enter it manually. Smart algorithms will look for the matching information and generate the answer shortly.

After receiving an answer, the user can rate it. For that, they should choose a positive or negative emoji. The system collects statistics of questions’ views and ratings. The most popular ones are displayed on top.

The search history of each client is saved. So, when they open the widget the next time, they will see the previously viewed requests.

If the user does not find a suitable answer or needs a follow-up consultation, they can enter the chat with a human agent through one of the three instant messengers – Telegram, Viber, Facebook. If none of the above apps is installed on the user’s device, the messenger’s web version will open.

Admin Interface

In the admin panel, the user can create, edit, or delete categories and questions. To create a new category, the admin should specify its name and insert a link to the site’s page where it will be located. For a new question, the admin should enter the info text and mark it with one or more categories.

The admin can view the question’s statistics: the number of clicks, positive and negative reviews, the total number of ratings, etc. Based on this data, they update the posted questions to be more informative for clients.

Technologies In Use

To develop the widget, we used different technologies with a focus on speed and accuracy. The right choice of tech stack helped us achieve an excellent result: our smart widget responds correctly and quickly to customer requests and switches to live chat when necessary. Below, I list the primary technologies in use.

Backend – Go. Golang is a statically typed, compiled programming language widely used for highly loaded systems. Go has a strong concurrency thanks to goroutines. Each goroutine is very light and short, so you can run millions of them at once to keep your system working smoothly even during peak loads. Considering the widget should serve thousands of user requests daily, we opted for Go to ensure the ongoing glitchless operation.

Frontend – JS, React, Redux, SharedWorker, HTML5, CSS3, Sass. HTML, CSS, and JavaScript are a standard set of tools for creating an app frontend. The React library helps build interactive UIs nicely and easily. Redux supplies a container for JavaScript apps, which allows them to run in different environments. A SharedWorker is a special kind of worker that can be accessed from multiple browser contexts, such as multiple windows, iframes, or other workers. Finally, Sass is an advanced CSS extension for quick styling.

Smart search – Elasticsearch. Elasticsearch is an AWS product that quickly generates the right answers to user questions. When a client enters a request, Elasticsearch compares it by letter, then by word, then by a phrase in the database. After that, it issues a response that matches the user’s request. Thus, the client can quickly access information even if it is not on the predefined questions list.

Outcome

The smart widget for the banking website covers the lion’s share of the user’s requests. Its database contains a large number of frequently asked questions and detailed answers with step-by-step instructions. If the faced issue is not on the list, the user can use smart search and quickly get the necessary information. Thus, human operators get free from routine, repetitive tasks. Instead, they can carefully deal with complex problems that require research, testing, and taking non-trivial decisions.

At the moment, the widget is at the final testing stage. It will soon be released into production and deployed on the bank’s website. After that, we will start developing the mobile version and launch the same widget in the Ecobank mobile app.