logo.png

Conversational Bank

An AI-powered Banking Chatbot

★ Featured as The Best Mobile Banking Application in Taiwan by The Global Economics.

★ Won the Outstanding Chatbot Customer Experience in Taiwan by The Digital Banker.

apple-app-store-travel-awards-globestamp-7.png
apple-app-store-travel-awards-globestamp-7.png
mockup-template-of-a-latin-female-holding-iphone-6-plus-a10776.png

Overview

Responsibility

I took the responsibility of designing 4 main banking services (total 13 functions) of CTBC conversational bank application include Transfer, Exchange, Credit Card, and Bank Account. All of them were successfully first launched in January 2020.

 

My work included user interview, system analysis, designing user flows, interface, experience and collaborating cross-functionally with product management, engineering, and other cross-functional teams to oversee the user experience of the product from conception until launch.

My Role

UX Design/Research Lead

Timeline

2019.08 - 2020.01  First product Launch

2020.01 - 2020.12  Product Revision

#About CTBC Bank

Project Background

CTBC Bank  is amongst the largest privately owned banks in Taiwan. It has the largest ATM network in Taiwan. With nearly 6,800 machines nationwide, it tops the list in terms of interbank withdrawal transactions, accounting for approximately 28% of market share.

3164229-PH.jpeg

The bank wanted to optimize their online and mobile banking models with customer interaction platforms by leverages AI technology into banking customer journeys to create a seamless experience.

233780-800x515r1-ideal-cell-phones-senior-citizens.jpeg

Problems
we had to face

After talking with stakeholders from CTBC bank and getting acquainted with their business and user research, we identified some problems to solve.

Frame 7.png

Keep the Human Feeling

Interpersonal relationships are one of the pillars of a banking experience. Yet the digital banking cannot be so personalized for most of users, and it lose the feeling of “Human touch”

Frame 6.png

Consider Accessibility

For those who went longer in life without the prominence of texting though, or people who have difficulty reading the mobile screen, using digital banking is not easy for them.

Frame 8.png

innovative but in line with the brand image

The conversational bank entrance would be the same as the digital banking platform. The component design needs to be innovative but consistent, and the style needs to be in line with the brand image.

Project Scope

scope.png

Research

1. Held several meetings with stakeholders 

research.png

2. Organized the content of service

After the meetings, I examined the existing related service and used a mind map to organize the content of each service which includes user actions, intents and the results.

3. Basic Structure of conversation flow

How does a conversation works?  In fact, every conversation turns out to be a multi-step process with a lot of back and forth communication. It can be simplified to the following steps,

STEP1: The user inputs by text/voice (send a request to the chatbot)
STEP2: After receiving the request, the chatbot analyzes the intent, examines the identity of the user.
STEP3: The chatbot starts the conversation and provides options/inquiries about details.
STEP4: User's response. (By interacting with the conversational interface/text/voice input)

  (STEP3 & 4 can be a lot of back and forth conversations)

STEP5: The chatbot shows the result and end the conversation.

Flowchart.jpg

StyleGuide

Typography

CTBC Bank

Microsoft JhengHei

Regular. Medium.

123456789

Arial

Regular. Medium.

Color Palette

color_palette.png

Wireframe Guideline

WF.png

iPhone UI Design Specs

iosDesign.png

#The Result

Design Outcome

Main Interface Design

Main.png

Some of the key features

shortcut.png

Customizable shortcut menu

Users can save their frequently-used requests in the shortcut menu. Each request button will be a dialogue sent to the chatbot, so when the user clicks a request button, the effect will be the same as the user typing the dialogue in the chat.

transfer.png

Transfer money with easy dialogue

With a few words, the user can complete the money transfer. For privacy and transfer safety, the chatbot provides several ways of verification in the process.

shortcut.png

Easily and quickly check the current/history exchange rate

Users can check the exchange rate with simple conversation. We also provide an interactive graph showing recent exchange rates. Users can also change the range of period to compare the exchange rate by clicking different tabs.

creditcard.png

Users can look up credit card statements not only by month but also can search by day, week, or a period less than half of a year. Moreover, they can choose to look up a specific card or total amount of all the cards.

Card view - Credit card statement 

My Takeaways

1. Understanding the limitations of a conversational interface

Chatbot is unable to handle complex processes
Conversational interface is only efficient for simple and limited queries as they can provide short answers. It is only effective when users already know what they need to ask from them and how they should ask. We can add some prompts to help users input the request that the chatbot understands. And, if users need multiple options or comparisons, then conversational interactions may suit their needs. Therefore, how to "design" the user interactions is really crucial.

Chatbot conversation is not as simple as human conversation
Even the conversations that seem the simplest are hard to emulate through a conversational UI. That’s because human communication relies on plenty of indicators to convey messages and anticipate responses, most of which we use unconsciously and, as such, are difficult to recreate. Thus, when building a conversational UI, we need to be aware that the conversation goes beyond offering a proper response (confirmation or error) — it also implies adding a human touch (a personality, a sense of intelligence). This is the focus of the training phase, which has to be as extensive as needed to ensure that human vibe.
 

2. Components should be designed carefully on conversational interfaces

In this case, because the conversational UI is built in the original mobile APP, the space is smaller than the original mobile page. That is, from the UX perspective, some components might not be suitable to be reused although it is better to be reused if it belongs to the same interaction flow from the development perspectives. What's more, the steps on the conversational interface should be designed simpler and more intuitive than mobile APP interface for the same service since users cannot only see the individual step instead of the whole picture while they operate / talk to the conversational interface. They were challenges for me to overcome and take into considerations during the design process.

See my other projects