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.
UX Design/Research Lead
2019.08 - 2020.01 First product Launch
2020.01 - 2020.12 Product Revision
#About CTBC Bank
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.
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.
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.
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”
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.
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.
1. Held several meetings with stakeholders
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.
iPhone UI Design Specs
Main Interface Design
Some of the key features
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 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.
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.
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
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