LINE Bank Thailand
LINE BK (LINE Bank) is Thailand's first social banking platform, seamlessly connecting the LINE Messenger app with Kasikorn Bank, one of the country's leading financial banks. In 2022, we launched a QR payment feature leveraging social banking to meet Thailand's growing QR payment market, increasing monthly transaction volume by 134%.
My role
Product Designer
What I did
Market research
Wireframe, User flow
UX specification
Data analysis
Platform
CWA (Web app)
Timeline
May 2022 - Nov 2022
Team
1 Product Manager
1 Product Designer
1 Graphic Designer
5 Engineers
1. QR payment market is growing rapidly
In 2021, Thailand's QR transaction volume grew by 144%, with approximately 4 million merchants using standard QR codes. The market size could be even larger, considering non-business merchants.
2. High demand from merchants
With over 85% of Thailand's population using LINE, its popularity naturally drove strong demand for QR payments among merchants. These payments are especially favored by small businesses due to their low setup costs.
Problem statement
As a latecomer to QR payments, LINE Bank faced the challenge of differentiating itself in a competitive landscape.
Consumer
With COVID-19 raising concerns about physical transactions, demand for contactless options is rising. Now, 82% of Thais are considering QR payments.
Merchant
Merchants struggle to access financial services due to high terminal costs and connection issues. QR payments are a good solution because they don't need payment terminals.
The essential features for implementing Thai QR Payment are as follows:
QR Scanner
Scan a personal or merchant QR code to make a payment.
My QR
Generate your own QR code through LINE BK to request money from others.
There were 3 main challenges we encountered.
1. Defining unique selling point
As a latecomer to QR payments, LINE Bank needed to offer a distinctive payment experience to set itself apart from other providers.
2. Adding new QR entry points
Considering the business importance of QR payments, new QR payment entry points were needed on the main page.
3. Seamless feature integration
Since there are different types of QR code payment methods, we had to implement dictinct checkout flows based on each methods.
Challenge #1
Competitor QR screens: Basic and unengaging
Major Thai bank QR payment screens are simple, featuring just a logo on a solid-colored background, making them bland and lacking user engagement.
Thai users' love for illustrations
With 2.8 million LINE character debit cards issued in two years, we've seen Thai users' strong preference for cute illustrations. We aimed to bring this same charm to our QR payment experience.
Given that many social media services use customizable backgrounds for sharing QR codes, we believed this approach would feel natural for users.
Design question
Since LINE Bank is a digital banking service leveraging LINE Messenger, how might we integrate the interactive and fun aspects of social media?
The Bank of Thailand (BOT) and payment service providers set the QR code standard shown below. This standard had to be strictly followed, which meant there were limits on how the design could be customized.
To address these constraints, I proposed adding playful illustrations outside the QR code.
I wanted to help users focus on the main actions of Save and Share in My QR, while making the Background Change feature easy to use.
Highlight the background option for differentiation
Initially, I designed a wireframe that highlighted the background option to differentiate it from other services and ensure that users could easily recognize and access the feature.
Simplifying the background option for better focus on the main features
Feedback suggested that constantly highlighting the background option was distracting, as wouldn't change it every time they used My QR. I replaced it with an icon to help users focus on My QR's main features, Save and Share.
We provided various background illustrations, allowing users to naturally promote LINE Bank by sharing their personalized QR codes with others.
To make it easy for users to change the background, we included a background icon while highlighting the key features of QR code payments.
Challenge #2
Problem
1. The text menus on the main card had low usability.
Other than the Transfer button, the other menus are rarely used.
Menu usage: Transfer(58%), Cardless Withdrawal(6%), Debit Card(2%)
2. There were redundant entry points for the Debit Card.
It's better to remove the Debit Card menu from the main account area and keep only the Debit Card banner.
Given the business importance of QR payments, we decided to replace the Debit Card menu with QR features, while improving menu visibility.
We chose Option B to boost QR payment engagement, despite the higher effort required. However, it still lacks convenient access to both My QR and QR Scanner in one place, which remains an issue to solve.
✔ Requires less design and development effort.
✔ Supports both QR Scanner and My QR feature.
⚠️ Low visibility for QR Scanner next to the hamburger menu.
✔ Changed menus to button format and placed the QR Scanner next to the Transfer menu to improve visibility.
⚠️ Cannot display both QR Scanner and My QR on the main card.
I found that user needs vary depending on the account balance. If the account has no balance, users focus on adding funds.
Based on this insight, I decided to display either My QR or QR Scanner depending on the account balance.
If the account has no balance, the My QR and Add Money buttons appear, allowing the user to request funds or add money.
Once users deposit money into the account, options to transfer funds - such as Withdrawal, QR scan, and Transfer - become available.
1. If the balance is zero, only options to add funds are displayed
We highlighted these options with an eye-catching animation effect.
2. If there is a balance, options to send money are shown
Challenge #3
Dynamic QR code
A dynamic QR code is generated for each transaction and includes specific bank details. This QR code allows users to enter the desired amount.
Static QR code
A static QR code is set with a fixed amount and does not change. Merchants often display these for customers to scan and make payments.
After scanning the QR code, we identify if it’s dynamic or static and guide users to the corresponding transfer flow.
1. Dynamic QR code: Directs to the Enter Amount page
For dynamic QR codes that allow users to enter their desired amount, we send them to the Enter Amount page.
2. Static QR code: Directs to the Confirm Amount page
For static QR codes that contain a fixed amount, we skip the Enter Amount page and send users directly to the Confirmation page.
The recipient information displayed at the top changes based on the tag data in the QR code:
Bank Account: Bank logo and account details
PromptPay: User icon and PromptPay ID
Merchant: Shop icon and Biller ID
