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 设计,覆盖授信、账户管理与还款流程,从零到上线独立完成。
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 内的完整用户体验层。
Turn TikTok's first BNPL experience into something that feels official, trustworthy, and actually finishable inside a high-distraction commerce app.
把 TikTok 首次上线的 BNPL 体验,做成一个在高干扰电商场景里也依然可信、清晰、可完成的金融流程。
End-to-end UX across credit application, account & billing, and repayment, including first-time activation and return-user service flows.
负责授信申请、账户账单、还款三条主链路的端到端 UX,也覆盖首次开通与回访用户的服务流程。
The experience lived in TikTok Shop, but key moments depended on partner infrastructure, third-party KYC, and external payment-channel handoffs.
体验发生在 TikTok Shop 内,但关键节点必须依赖合作方基础设施、第三方 KYC,以及外部支付渠道跳转来完成。
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 设计师,我从零开始设计了所有面向用户的交互。用研同事前往印尼进行实地访谈,我在线上密切配合,实时将调研发现转化为设计决策。
Credit application, account & billing, repayment — all from zero.
授信申请、账户账单、还款,全部从零设计。
6 benchmark journeys across onboarding, KYC, and repayment patterns.
围绕开通、KYC 与还款模式,系统对比 6 个样本。
Proactively identified pre-launch, with owners and mitigation plans.
上线前主动识别,每条风险均有负责人和后续计划。
I paired Indonesia field interviews with a 6-product BNPL benchmark to pinpoint where trust forms, where compliance starts to feel heavy, and where drop-off risk rises.
我把印尼实地访谈与 6 款 BNPL 竞品走查结合起来,重点定位用户在哪些环节建立信任、在哪些环节开始感到负担,以及最容易流失的位置。
Brand familiarity reduces hesitation at entry, and the step-based packaging lets users feel progress before they see the full form burden.
品牌熟悉度能降低用户在入口处的犹豫,步骤化包装则让用户先感受到进度,再看到完整表单负担。
Users see progress before they see the full form.
用户先看到进度,再看到完整表单。
A useful reference for TikTok PayLater onboarding.
这是 TikTok PayLater 开通页的重要参考。
The KYC chain is thorough, but repayment later still depends on PIN recall. The raw notes also flagged password recovery as a later support risk.
这条 KYC 链路很完整,但后期还款依然依赖 PIN 记忆。原始备注里也特别提到,忘密与找回会成为后续风险。
Password recovery becomes a later risk.
忘密与找回会在后期变成风险。
This reinforced the need for resume-after-interruption.
这也强化了“断点继续”必须成为主流程。
Activation starts from checkout instead of a standalone credit page, so the first step feels tied to the purchase task rather than a separate financial process.
它的开通不是从独立授信页开始,而是发生在结账场景里,所以第一步更像购买任务的延续,而不是额外插入的一套金融流程。
The first step feels tied to the purchase task.
用户更容易把第一步理解为购买任务的一部分。
I treated entry design as part of onboarding design.
因此我把入口也视作开通体验的一部分。
The form asks for blood type, work history, and number of children. These fields were explicitly called out in the raw notes as information that felt excessive.
表单会收集血型、工作经历和子女数量等信息。这些字段在原始备注里被直接点名,属于让用户明显感到“收得太多”的内容。
These were explicitly called out as excessive.
这些字段在原始备注里被明确指出过重。
That set a stricter rule for TikTok PayLater fields.
这也让 TikTok PayLater 对字段取舍更严格。
OTP, card binding, PIN, and email confirmation are each manageable on their own, but together they still create a long setup chain before users see value.
OTP、绑卡、PIN 和邮箱确认单看都不算重,但叠加后仍会形成一条很长的账户准备链路,用户在看到价值前要先完成大量设置动作。
Each step is manageable, but the total setup cost is still high.
单步不重,但总准备成本依然很高。
Fragmentation helps readability, not total cost.
它改善的是可读性,不是用户总成本。
This Philippines sample was useful mainly for comparing how repayment steps were sequenced and packaged, rather than for carrying over the same brand-trust context.
这个菲律宾样本的主要价值,是用来比较还款步骤如何被排序与打包,而不是直接迁移相同的品牌信任语境。
The value here is structure, not brand carry-over.
它的价值在结构,不在品牌迁移。
I used it to compare packaging and sequence only.
因此我只拿它来比较打包方式和顺序。
"How do you convert a high-friction financial onboarding inside an entertainment app?"
"如何在一款娱乐 App 里,完成一个高摩擦的金融开通流程?"
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 个任务,每完成一个给予用户一次激励反馈。
Just as important, resume after interruption was designed as a primary path, not an edge case. Because the activation journey is long and repeatedly depends on partner capabilities, users are highly likely to pause, hand off to another system, or drop temporarily. That made the landing page responsible for more than entry navigation: it had to remember progress, identify the unfinished task, and bring users back into the flow from the exact point where they stopped (shown left).
同样关键的是,我把中断后继续完成当作主流程来设计,而不是边缘 case。 由于整条开通链路很长,而且多个关键节点都依赖合作方能力,用户很容易中途暂停、跳转到外部环节,或暂时离开。 这意味着 Landing page 不能只承担入口作用,它还必须负责“记住进度、识别未完成任务,并把用户准确带回中断位置”(见左侧 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 个任务")在转化率上持续优于不定长的表单形式。每个任务完成都提供一次正向激励,有效降低中途放弃率。
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 eight meaningfully different situations.
账户首页是每个回访用户的第一个画面。它需要在八种截然不同的状态下,清晰传达用户当前的财务状态并引导正确的行为。
It explained account status and routed users into the right bill, record, or self-service path.
它负责解释账户状态,并把用户送进正确的账单、记录或自助服务路径。
No transaction yet
无消费记录
No usage this cycle
本期未使用
Outstanding
有欠款未逾期
Approaching due date
临近还款日
Overdue
已逾期
Settled + next bill
本期已还,未来期有消费
Settled + no next bill
本期已还,未来期无消费
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 支付数据,按支付成功率对渠道进行排序,引导用户优先选择成功率更高的支付路径。
Repayment products split into bill-level and account-level models. Since TikTok PayLater is account-level repayment, I only benchmarked the same type. In this model, users need more than a successful payment moment — they need to know clearly what debt the money was applied to, whether the account balance actually changed, and whether ledger clearing is complete.
从产品能力上,可以分成账单维度还款和账户维度还款。TikTok PayLater 属于账户维度还款,所以我只参考同类型竞品。对这类产品来说,用户关心的不只是“钱付出去没有”,而是这笔钱到底还到了哪里、结清了哪部分欠款、账户状态是否真的更新,以及销账是否已经完成。
The real challenge was turning entry differences, external handoff, polling, and ledger confirmation into one trustworthy repayment journey.
真正难的不是渠道排序,而是把入口差异、外部跳转、结果轮询和销账确认,串成一条可被用户信任的还款旅程。
Because this is account-level repayment, the interface must answer one question clearly after payment: where did the money land? A payment can clear the current cycle while the account still carries other debt, so the result has to explain both this repayment and the remaining account status.
因为这是账户维度还款,支付完成后界面必须清楚回答一个问题:这笔钱到底还到哪里了。用户可能已经还清本期,但账户里仍有其他欠款,所以结果不仅要说明这次还款,也要同步说明账户剩余状态。
User opens cashier and selects the highest-success wallet.
用户拉起收银台,并选择成功率最高的钱包渠道。
Cashier confirms amount and asks for the OVO-linked phone number.
收银台确认金额,并要求输入绑定 OVO 的手机号。
TikTok guides the user out, then waits for the OVO push notification.
TikTok 给出外跳引导,并等待 OVO 推送通知到达。
User opens OVO and completes the payment inside the wallet app.
用户打开 OVO,在钱包 App 内完成确认与支付。
Back in TikTok, payment may be done while ledgering is still pending.
回到 TikTok 后,支付可能已完成,但销账仍在处理中。
Show success only after ledger clear. If it fails, explain refund and unsettled account status.
只有销账完成后才能展示成功;如果失败,则需说明退款与未结清状态。
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.
为什么风险清单重要:在快速迭代的产品环境里,评审会议往往聚焦在即将上线的功能上。主动命名上线后的潜在风险,并为每条风险附上负责人和计划,是把隐性成本转化为可执行决策的关键——这是防患于未然和事后救火的本质区别。
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 月产品上线前已离职,无法获取内部运营数据。但以下公开信号印证了产品的商业价值。
The experience I designed ultimately shipped with ShopTokopedia BNPL. Public reporting also framed the launch as part of a deeper TikTok partnership and a broader expansion of financial services on the platform. Source
我设计的这套体验最终随 ShopTokopedia BNPL 正式上线。公开报道也将这次发布放进了深化 TikTok 合作、扩展平台金融服务的整体叙事里。 相关报道
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 里。