UX Case Study  ·  Fintech  ·  2023 – 2024 UX 案例  ·  金融科技  ·  2023 – 2024

TikTok
PayLater

End-to-end UX design for TikTok's Buy Now Pay Later product in Indonesia — credit application, account management, and repayment — from first sketch to launch.

TikTok 印尼先买后付产品的全链路 UX 设计,覆盖授信、账户管理与还款流程,从零到上线独立完成。

Role
角色
Sole UX Designer
独立 UX 设计师
Market
市场
Indonesia
Platform
平台
TikTok Shop
Launch
上线
July 2024
Scroll to explore向下滚动
Overview
项目概览

BNPL for social commerce, in one of SE Asia's fastest-growing markets

社交电商里的先买后付,印尼这个东南亚最大市场

TikTok entered Indonesia's consumer finance market through a strategic partnership with GoTo / Tokopedia, embedding GoPay Later into TikTok Shop to form ShopTokopedia.

TikTok 通过与 GoTo / Tokopedia 的战略合作进入印尼消费金融市场,将 GoPay Later 嵌入 TikTok Shop,形成 ShopTokopedia。

Partnership structure: TikTok does not hold a financial services license in Indonesia. GoPay Later (GoTo Financial) provides the BNPL infrastructure and OJK regulatory compliance, while I owned the complete user experience layer within TikTok Shop.

合作结构:TikTok 在印尼不直接持有金融牌照。GoPay Later(GoTo Financial)提供 BNPL 基础设施和 OJK 监管合规,我负责 TikTok Shop 内的完整用户体验层。

As the sole UX designer, I designed every user-facing interaction from scratch. Our user research team conducted on-site interviews in Indonesia — I collaborated closely with them remotely, synthesizing findings into design decisions in real time.

作为唯一一名 UX 设计师,我从零开始设计了所有面向用户的交互。用研同事前往印尼进行实地访谈,我在线上密切配合,实时将调研发现转化为设计决策。

3

Core flows designed

核心流程

Credit application, account & billing, repayment — all from zero.

授信申请、账户账单、还款,全部从零设计。

5+

Competitors analyzed

竞品分析

Shopee, Grab, Lazada, GoPay Later, Akulaku, Moca Moca — in depth.

Shopee、Grab、Lazada、GoPay Later、Akulaku、Moca Moca 深度拆解。

6

UX risks surfaced

体验风险识别

Proactively identified pre-launch, with owners and mitigation plans.

上线前主动识别,每条风险均有负责人和后续计划。

Research
研究阶段

On-the-ground research in Indonesia

深入印尼的实地调研

Our user research team conducted on-site interviews in Indonesia — I collaborated closely with them remotely, synthesizing findings into design decisions in real time.

用研同事前往印尼进行实地访谈,我在线上密切配合,实时将调研发现转化为设计决策。

Competitive Landscape

竞品全景

I mapped 6 BNPL products across two axes — e-commerce native vs. third-party lender, and account-level vs. bill-level repayment — then walked through each credit application flow end-to-end to audit field count, KYC method, and drop-off risk.

我系统梳理了 6 款 BNPL 产品,从两个维度建立坐标系:电商自营 vs. 第三方品牌、账户维度还款 vs. 账单维度还款。随后逐一走查每款产品的授信申请全流程,重点审计字段数量、KYC 方式与流失风险节点。

Shopee PayLater E-comm native
Credit application 授信申请 Repayment 还款

Step labels hide actual field count — users don't see the full form length upfront. Shortest perceived application in the set.

步骤标签遮蔽了真实字段数,用户感知表单最短,同类中开通意愿最高。

GoPay Later Standalone fintech
Credit application 授信申请 Account mgmt 账户管理 Repayment 还款

Most comprehensive KYC — NIK, selfie, income, employment. PIN set at onboarding and rarely used again; forgetting rate is a known support issue.

KYC 最完整:NIK、自拍、收入来源、工作信息。开通时设 PIN 此后极少使用,遗忘率高是已知客诉。

Lazada PayLater E-comm native
Credit application 授信申请 Repayment 还款

Checkout-embedded entry minimises context switching. KYC delegated to Kredivo with a mid-flow app handoff — a potential drop-off point.

从结账页直接进入,减少上下文切换。KYC 委托 Kredivo,需跳转第三方 app,存在流失节点。

GrabPayLater Super-app
Credit application 授信申请

Reuses existing Grab KYC — existing users skip re-verification entirely. Lowest friction in the set, but locked inside Grab's ecosystem.

复用 Grab 已有 KYC,老用户免重新验证,摩擦最低。但强依赖 Grab 生态,迁移性差。

Akulaku Standalone BNPL
Credit application (full) 授信申请(全流程)

Most aggressive data collection: blood type, employment history, number of children. The canonical example of how form friction kills conversion.

字段最多:血型、工作经历、子女数量。是「表单摩擦杀死转化率」的典型反面教材,用研中被用户主动提及为放弃原因。

Moca Moca PH market ref
Credit application 授信申请

Philippines reference — lighter KYC under a different regulatory environment. Used to understand SE Asia variance, not as a direct model.

菲律宾市场参照,监管不同 KYC 更轻。用于理解东南亚各市场差异,非直接参考对象。

Side-by-side competitor credit application flows
Credit application flows mapped side-by-side across all 6 products (field research)
6 款竞品授信流程逐屏拆解对比(调研原始记录)

Key Insights from User Interviews

用户访谈核心洞察

Design
设计方案

Three hard problems — and how I approached them

三个核心设计挑战

"How do you convert a high-friction financial onboarding inside an entertainment app?"
"如何在一款娱乐 App 里,完成一个高摩擦的金融开通流程?"

01 — Credit Application: taming a long flow

01 — 授信流程:驯服一个超长链路

The full credit flow requires: phone verification → ID document scan (Jumio) → facial recognition → personal info form → repayment date selection. A 7–8 step journey competing with every distraction TikTok is designed to offer.

完整授信流程涵盖:手机号验证 → 证件扫描(Jumio)→ 人脸识别 → 个人信息填写 → 还款日设置。 7-8 步的超长链路,还要跟 TikTok 平台本身所有令人分心的内容竞争用户注意力。

Decision: restructure into 3 progressive tasks, each with a completion reward.

设计决策:将流程拆成由易到难的 3 个任务,每完成一个给予用户一次激励反馈。

Credit Application — 3-Task Architecture
授信流程 — 三任务架构
1
Create account
Phone + OTP
创建账户
手机号 + OTP
2
Upload ID
Jumio scan
上传证件
Jumio 扫描
3
Additional info
Email, address
补充信息
邮箱、地址
Credit result
Approved / denied
授信结果
通过 / 拒绝
Landing page showing 3-task progress
Landing page
task progress state
Landing 页
任务进度状态
1
Create account — Phone + OTP 创建账户 — 手机号 + OTP Lowest friction · first 摩擦最低 · 先行
Task 1: phone input and OTP verification
2
Upload ID — Jumio scan 上传证件 — Jumio 扫描 SDK handoff 跳转 SDK
Task 2: Jumio identity verification
3
Additional info — Email, income, address 补充信息 — 邮箱、收入来源、地址 Triggers credit decision 触发授信决策
Task 3: additional information form

Equally critical: a breakpoint resume mechanism. Users who exit mid-flow return to exactly where they left off — the system detects their state via risk controls and drops them into the right task on the landing page (shown left).

同样关键的是断点续做机制。中途退出的用户再次进入时,系统通过风控判断其当前状态,直接将用户带回未完成的任务节点,无需重新开始(见左侧 Landing 页)。

Why progressive tasks work: Milestone framing ("complete 3 tasks") consistently outperforms indeterminate form framing. Each completion event provides a moment of positive reinforcement, reducing abandonment between steps.

为什么任务分段有效:里程碑式的框架("完成 3 个任务")在转化率上持续优于不定长的表单形式。每个任务完成都提供一次正向激励,有效降低中途放弃率。

02 — Account & Billing: six states, one homepage

02 — 账户账单:六种状态,一个首页

The account homepage is every return user's first screen. It needs to communicate the user's financial state clearly and drive the right action — across six meaningfully different situations.

账户首页是每个回访用户的第一个画面。它需要在六种截然不同的状态下,清晰传达用户当前的财务状态并引导正确的行为。

New user
新用户
No transactions yet
无消费记录
Outstanding, not overdue
有欠款未逾期
Normal repayment state
常规还款状态
Approaching due date
即将逾期
Urgency nudge needed
需要催还提示
Overdue
已逾期
High urgency — credit frozen
高紧迫 — 额度冻结
Current period repaid
本期已还
Next period loading
下期待出账
Fully repaid
全额还清
Clean state
无欠款状态
Account homepage states

Account homepage across states: new user / outstanding / approaching due date

账户首页各状态:新用户 / 有欠款未逾期 / 距还款日剩余 X 天

Bill list and statement detail

Statement list and bill detail pages

账单列表页与账单详情页

Overdue state screens

Overdue state: multi-bill view with overdue markers

已逾期状态:多账单视图,带逾期标记

03 — Repayment: channel selection informed by real data

03 — 还款体验:用真实数据指导渠道优先级

TikTok PayLater uses account-level repayment. I used internal PIPO payment performance data to rank channels by success rate — guiding users toward higher-probability payment paths.

TikTok PayLater 采用账户维度还款。我使用内部 PIPO 支付数据,按支付成功率对渠道进行排序,引导用户优先选择成功率更高的支付路径。

Bank Transfer
73.7%
success rate · 4.5M orders / 14 days
支付成功率 · 14天 450万笔
DANA
82.5%
success rate · 1.3M orders / 14 days
支付成功率 · 14天 130万笔
GoPay
67.8%
success rate · 910K orders / 14 days
支付成功率 · 14天 91万笔
OVO
82.6%
success rate · 367K orders / 14 days
支付成功率 · 14天 36.7万笔
Repayment flow

Repayment entry points and amount confirmation screen

还款入口与金额填写页

Payment channel selection

Payment channel selection — GoPay, DANA, OVO, Bank Transfer

支付渠道选择页 — GoPay、DANA、OVO、Bank Transfer

Repayment result screens

Repayment result screens: success and failure states

还款结果页:成功与失败两种状态

Risk Identification
体验风险识别

Surfacing problems before they become expensive

在问题变贵之前,主动把它们找出来

Beyond the flows, I maintained a live risk register — potential experience failures that wouldn't block launch but would generate friction or support volume at scale.

除了流程设计本身,我还维护了一份体验风险清单——这些问题不会阻止上线,但在规模化后会持续产生摩擦和客诉。

# Risk 风险 Module 模块 Plan 后续计划
01 Form length reduces credit application conversion 表单过长影响转化率 Credit / 授信 Negotiate minimum required fields with all stakeholders 与各方协商精简必填字段
02 PIN forgetting — infrequent use, complex recovery PIN 易遗忘,找回流程复杂 Credit / 授信 Introduce face recognition as alternative auth 引入人脸识别作为替代核身手段
03 Phone number and ID cannot be modified post-submission 手机号和证件信息提交后无法修改 Credit / 授信 Prioritize edit capability based on support volume 根据客诉量排优先级增加修改能力
04 Jumio fails on iOS 14 (≈0.3% of Indonesian market) Jumio 在 iOS 14 上无法使用(印尼市场约 0.3%) Credit / 授信 Evaluate alternative KYC vendors or in-house solution 评估其他 KYC 供应商或自研方案
05 Available credit limit not visually prominent 可用额度在视觉上不够显眼 Account / 账户 Test alternative visual hierarchies in user testing 在用户测试中验证调整后的视觉层级
06 Insufficient bank options in repayment channel list 还款渠道中银行选项不足 Repayment / 还款 Competitive audit of bank channel coverage 梳理和竞品的银行渠道覆盖对比

Why a risk register matters: In fast-moving product environments, reviews focus on what's shipping. Proactively naming post-launch risks — and attaching owners and timelines — converts invisible costs into decisions that can actually be made. It's the difference between firefighting and prevention.

为什么风险清单重要:在快速迭代的产品环境里,评审会议往往聚焦在即将上线的功能上。主动命名上线后的潜在风险,并为每条风险附上负责人和计划,是把隐性成本转化为可执行决策的关键——这是防患于未然和事后救火的本质区别。

Impact
项目结果

A product that shipped — and a partnership that scaled

产品上线,合作规模化

I left ByteDance before the July 2024 launch and no longer have access to internal metrics. Public signals confirm the commercial significance of what shipped.

我在 2024 年 7 月产品上线前已离职,无法获取内部运营数据。但以下公开信号印证了产品的商业价值。

+70%
GoTo Financial loan revenue growth, year-over-year in 2024
GoTo Financial 贷款业务收入同比增长(2024)
Source: GoTo Financial earnings · Reuters
July
2024
ShopTokopedia BNPL goes live — the experience I designed
ShopTokopedia BNPL 正式上线 — 我设计的体验
TikTok × GoTo strategic partnership

Following the launch, GoTo explicitly named TikTok Shop as a priority channel for expanding BNPL and payment services — signaling the product moved well beyond pilot status into a strategic growth line.

上线后,GoTo 明确将 TikTok Shop 列为扩展 BNPL 和支付服务的优先渠道——这意味着这款产品已经超越试点阶段,成为 GoTo 的战略增长线。

Reflection
项目反思

What I'd do differently

如果重来,我会改变什么

Push for form simplification earlier

更早推动表单精简

Excessive form fields were a known risk from week one. I should have pushed to negotiate a leaner field set much earlier — waiting for post-launch data to force the conversation is a slower and more expensive path.

表单字段过多的风险从第一周就已识别。我应该更早、更坚定地推动各方协商精简字段——等上线后用数据倒逼,是一条更慢也更昂贵的路。

Advocate for face recognition as P0

把人脸识别当成 P0 来推动

I identified the PIN forgetting risk early but treated face recognition as a future iteration. In retrospect, I'd have made it a launch requirement — the risk was too predictable to defer.

我很早就识别了 PIN 遗忘的风险,但把人脸识别当成后续迭代项处理了。回头看,我应该将其列为上线必要条件——这个风险太可预见,不值得推迟。

Biggest learning: In cross-functional environments with regulatory constraints (OJK compliance), design decisions are rarely owned by designers alone. The most impactful skill I developed here was translating UX risks into business and compliance language — giving PMs, legal, and partner institutions a reason to prioritize the right things. Design without that translation often stays on the backlog.

最大收获:在有监管约束(OJK 合规)的跨职能环境中,设计决策很少由设计师单独拍板。我在这个项目里最有价值的成长,是学会了把用户体验风险翻译成业务和合规语言——让 PM、法务和合作机构都有理由把正确的事情优先排上日程。没有这种翻译能力,设计往往只是停留在 backlog 里。