DeFi

Web3

State Machine Visualization

July 2024

XY Finance Smart Routing跨鏈路徑可視化設計

將複雜的聚合器演算法轉化為透明的視覺路徑,消除用戶對「匯率」與「費用」的疑慮,成功支撐產品轉型。

Duration

1 month

My Role

Product(UX) Designer

Responsibility

End to end UX/UI design

Team

1 PM, 1 UI/UX

2 Frontend, 2 Backend, 1 Web3 Dev

DeFi

Web3

State Machine Visualization

July 2024

XY Finance Smart Routing跨鏈路徑可視化設計

將複雜的聚合器演算法轉化為透明的視覺路徑,消除用戶對「匯率」與「費用」的疑慮,成功支撐產品轉型。

Duration

1 month

My Role

Product(UX) Designer

Responsibility

End to end UX/UI design

Team

1 PM, 1 UI/UX

2 Frontend, 2 Backend, 1 Web3 Dev

DeFi

Web3

State Machine Visualization

July 2024

XY Finance Smart Routing跨鏈路徑可視化設計

將複雜的聚合器演算法轉化為透明的視覺路徑,消除用戶對「匯率」與「費用」的疑慮,成功支撐產品轉型。

Duration

1 month

My Role

Product(UX) Designer

Responsibility

End to end UX/UI design

Team

1 PM, 1 UI/UX

2 Frontend, 2 Backend, 1 Web3 Dev

0x2412...3791

Transfer

From

0x2412...3791

0.0

ETH

Ethereum

≈ $ 0.0

123,456.000000

MAX

To

0x2412...3791

0.0

BNB

BNB

≈ $ 0.0

123,456.000000

Exchange Rate

-

Enter Amount

Transfer

TL;DR

Challenges

公司從單一橋轉型為聚合器,需整合 9+ 種橋樑與 20+ 條鏈。舊版介面是「黑盒子」,用戶無法理解為何系統選擇特定路徑,且對多層次的收費結構(Protocol/Bridge/Affiliate Fee)缺乏信任

Solution

設計「智慧路由可視化 (Smart Routing UI)」與「費用透明拆解 (Fee Breakdown)」。將 Src Swap -> Bridge -> Dst Swap 的邏輯具象化,讓用戶一眼看懂系統如何透過「擇優機制」幫他省錢。

Impact

成功協助產品從單一橋轉型為全鏈聚合器,支援超過 20 條區塊鏈的資產互通,並透過透明的 Affiliate Fee 設計協助 BD 團隊整合了 100+ B2B 合作夥伴。

26%

increase in user satisfaction

63.3%

Feel cleaner, neat and

informative

27.3%

Like full-size images

are shown in the frame

25%

Rated status column is

handy &helpful

TL;DR

Challenges

公司從單一橋轉型為聚合器,需整合 9+ 種橋樑與 20+ 條鏈。舊版介面是「黑盒子」,用戶無法理解為何系統選擇特定路徑,且對多層次的收費結構(Protocol/Bridge/Affiliate Fee)缺乏信任

Solution

設計「智慧路由可視化 (Smart Routing UI)」與「費用透明拆解 (Fee Breakdown)」。將 Src Swap -> Bridge -> Dst Swap 的邏輯具象化,讓用戶一眼看懂系統如何透過「擇優機制」幫他省錢。

Impact

成功協助產品從單一橋轉型為全鏈聚合器,支援超過 20 條區塊鏈的資產互通,並透過透明的 Affiliate Fee 設計協助 BD 團隊整合了 100+ B2B 合作夥伴。

26%

increase in user satisfaction

63.3%

Feel cleaner, neat and

informative

27.3%

Like full-size images

are shown in the frame

25%

Rated status column is

handy &helpful

BACKGROUND

Ultimate Convenience

XY Finance 是一款專為 Web3 用戶與專案設計的跨鏈聚合器,旨在簡化多鏈資產轉換的複雜流程。該平台透過核心產品 yBridge 與 xAsset Bridge,支援超過 20 條區塊鏈,並提供比同業更快速的 1 至 2 分鐘 極速跨鏈體驗。目前該服務已獲得超過 100 個 Web3 專案信任,用戶群廣泛分布於北美、歐洲及亞太地區。

Transfer

Balance :

382,380.38238

MAX

ETH

Ethereum

≈ $ 11,790

From

10

AVAX

Avalanche

≈ $ 11,763

To (Quote)

840.703230806729000000

Recipient Address

Change Recipient

Exchange Rate

1 ETH = 84.124346 AVAX

Min. Received

831

AVAX

(1%)

Bridge Fee

-

-

Withholding Fee

4.1158

USDC

Review Route

Best Price

840.70

AVAX

Swap

ETH

for

USDC

on

Ethereum

via

1 inch

(

Curve, Balancer

)

Bridge

USDC

from

Ethereum

to

Avalanche

via

yBridge

Swap

USDC

for

AVAX

on

Avalanche

via

1 inch

(

AVALANCHE KYBERSWAP ELASTIC AA

)

#2

837.39

AVAX

Swap

ETH

for

USDT

on

Ethereum

via

Uniswap v3

Bridge

USDT

from

Ethereum

to

Avalanche

via

yBridge

Swap

USDT

for

AVAX

on

Avalanche

via

Avalanche

#3

835.69

AVAX

Swap

ETH

for

USDT

on

Ethereum

via

Uniswap v3

Bridge

USDT

from

Ethereum

to

Avalanche

via

yBridge

Swap

USDT

for

AVAX

on

Avalanche

via

Avalanche

#3

835.69

AVAX

Swap

ETH

for

USDT

on

Ethereum

via

Uniswap v3

Bridge

USDT

from

Ethereum

to

Avalanche

via

yBridge

Swap

USDT

for

AVAX

on

Avalanche

via

Avalanche

產品轉型:由單一跨鏈橋轉化為跨鏈聚合器

XY Finance 原本依賴自建橋 (yBridge),但為了追求更好的流動性與報價,公司策略決定轉型為 Aggregator (聚合器)。這意味著我們需要整合市場上如 Circle CCTP, Synapse, cBridge 等競爭對手的流動性,為用戶計算出「最佳匯率 (Best Rates)」。


---

XY Finance 原本是一個 Defi 跨鏈橋,協助 user 將資產從 A chain 跨練到 B chain。因產品定位改變,由單一橋改為橋的聚合氣(類似 Sky scanner 的服務)。因此介面要如何呈現出該有的資訊

在此之前,剛有了第一版的修改往新方向前進,此任 Task 則是更往 Aggregartor 邁進。如何讓產品看起來像是 Bridge Aggregator 是這次的挑戰。


剛要從 bridge 往 agg 轉型

⚠️ 1. 頁面裡好多我不熟悉的資訊,認知負擔大,無法快速找到合適的路徑

2. 我的交易不知道為什麽卡住了、沒有收到資產,我好焦慮、不知道該怎麼排解

3. 拿不到錢是 XY 出問題嗎?還是 Bridge 出問題?

Pic 一些跟 bg 有關的圖

市場上的競品圖... 等

放上原本的版本

剛往agg改的第一版

CHALLENGE

對 User 來說重要的資訊是哪些?

問題定義: 作為設計師,我面臨的挑戰是**「複雜度的爆發」**。 在 yBridge 時期,路徑只有一條。但在聚合器模式下,一筆交易可能涉及 USDT (Src) -> ETH (Swap) -> cBridge -> ETH (Dst)。用戶在送出交易前最大的痛點是:

1. 不信任: 為什麼我拿到的幣比預期少?是不是平台偷收費?

2. 不透明: 系統幫我選 cBridge 是因為比較快,還是比較便宜?

競品


User Journey

過程中有哪些地方是我們可以介入的

Entry (Quote→Choose Route)


1 選幣、先輸入金額

2 看基本報價

3篩選

4 下一步 confirmation

ACTION

Revolutionizing Banking:

Enhancing User Experience with the Dello Fintech Banking

設計策略與協作:

1. 路由邏輯可視化 (Route View Visualization):

◦ 決策: 我決定打破舊版只顯示「由 A 換成 B」的簡單介面,改為呈現**「完整的資金路徑」**。

◦ 執行: 設計了視覺化的 Route Chain。例如當用戶從 Ethereum 跨到 Avalanche 時,UI 會清楚顯示中間經過了哪些 DEX 進行 Swap,以及使用了哪一座 Bridge。這讓用戶感受到聚合器「尋找最佳路徑」的價值。

2. 建立信任的費用拆解 (Transparent Fee Structure):

◦ 溝通取捨 (Trade-offs): 聚合器涉及多層收費(Protocol Fee, Bridge Fee, 甚至還有 B2B 夥伴的 Affiliate Fee)。PM 原本擔心顯示太多費用會嚇跑用戶。

◦ 決策: 我主張**「透明建立信任」**。我設計了 Tooltip 與展開收合的 Fee Breakdown,明確列出 Bridge Fee、Protocol Fee 以及 Affiliate Fee。

◦ 結果: 這不僅減少了客訴,還讓 B2B 合作夥伴(如錢包商)能清楚看到他們的獲利來源(Affiliate Address 分潤機制),成為 BD 推廣的一大助力。

3. 擇優機制的即時反饋 (Dynamic Best Rate):

◦ 技術協作: 了解到後端 Router 有一個「60秒擇優機制」(若新舊報價時間差在 60s 內,會選最優價格)。

◦ 設計: 我在 UI 上設計了倒數計時與 Auto-refresh 機制,確保用戶按下 Swap 的當下,看到的絕對是系統算出的 Best Rate,強化「聚合器 = 最划算」的心智模型。

(此處插入 UI 圖片:展示 Fee Breakdown 的 Tooltip 細節,以及 Route Selection 的卡片設計)

-----

使用者的心理認知(第一眼就要讓人覺得是 agg 而非單一橋)

route card 資訊呈現完整度與合適位置,我們是「第三方」而非其中某一個橋

RESULT

Building Trust Through Transparency for Underserved Users

The Direct Express app design fosters user trust by providing transparent

information and accessible features.

route card漸進式揭露,僅在需要時才逐步揭示複雜性

一開始是收合的,僅顯示重要資訊

confirmation 只顯示重要資訊

watcher 專注在重要資訊

特點

Before / . After

完整交易流程

Overview:

Before / After (拉桿)

0x2412...3791

Transfer

Refuel

Transfer

From

0x2412...3791

2

ETH

Ethereum

≈ $ 1,000

123,456.000000

MAX

To

0x2412...3791

10,000

BNB

BNB

≈ $ 10,000.00

123,456.000000

Exchange Rate

1 USDC = 300 MATIC

Min. Received

1,000 MATIC

(1%)

Review Route

Sort by Return

Best Return

Get $0.32 more net value

yBridge

2

mins

< $0.01

9,999.999999

MATIC

Circle CCTP

2

mins

$0.03

9,998.999999

MATIC

Owlto

2

mins

$0.03

9,997.999999

MATIC

cBridge

2

mins

$0.03

9,996.999999

MATIC

yBridge

2

mins

$0.03

9,995.999999

MATIC

資訊層級調整

以橋為主導的卡片分類,並放大最重要的金額資訊

Best Route Label 以及省下多少時間與路徑,協助 User 快速理解

清楚條列時間與手續費等資訊

Sort by Return

Best Return

Get $0.32 more net value

yBridge

2

mins

< $0.01

9,999.999999

MATIC

Circle CCTP

2

mins

$0.03

9,998.999999

MATIC

Swap

USDC

for

ETH

on

Avalanche

via

1 inch

(

Curve, Balancer

)

Bridge

ETH

from

Avalanche

to

Polygon

via

Circle CCTP

Swap

ETH

for

MATIC

on

Polygon

via

1 inch

(

AVALANCHE KYBERSWAP ELASTIC AA

)

Owlto

2

mins

$0.03

9,997.999999

MATIC

cBridge

2

mins

$0.03

9,996.999999

MATIC

yBridge

2

mins

$0.03

9,995.999999

MATIC

Route Card 內容漸進式揭露

預設收合,僅在需要時才逐步揭示複雜性

細節資訊一樣很清楚

清楚條列時間與手續費等資訊

Sort by Return

Best Return

Get $0.32 more net value

yBridge

2

mins

< $0.01

9,999.999999

MATIC

Circle CCTP

2

mins

$0.03

9,998.999999

MATIC

Owlto

2

mins

$0.03

9,997.999999

MATIC

cBridge

2

mins

$0.03

9,996.999999

MATIC

yBridge

2

mins

$0.03

9,995.999999

MATIC

Return

Time

排序邏輯自定義

又可以設定橋

放大最重要的金額資訊

清楚條列時間與手續費等資訊

High satisfaction can hide critical usability issues.

User interviews revealing "Cash App envy" directly informed our bill pay strategy,

while quantitative data on customer service calls shaped our notification system.

Bridges

Deselect All

yBridge

Circle CCTP

cBridge

Synapse

Across

Owlto

xAsset Bridge

Deliver2: Confirmation Building Trust Through Transparency for Underserved Users

confirmation 相關內容介紹

只顯示重要資訊

Confirmation

Bridge by

yBridge

2

mins

From

USDC

Avalanche

10

≈ $ 1,273,892.0

To (Quote)

MATIC

Polygon

840.703230

≈ $ 1,153,892.0

Estimated Fee

($0.03)

0.05 AVAX

Min. Received

831 MATIC

(1%)

Sender to Recipient

0x2412...3791

to

0x2412...3791

Campaign

Blast Points Eligible

Transfer

After

Before

Confirmation

From

ETH

Ethereum

10

≈ $ 1,273,892.0

To (Quote)

AVAX

Avalanche

840.703230

≈ $ 11,763

Sender

0x7715b8a66EA23E63de01f85CB646DeA29B4b36bE

Recipient

0x7715b8a66EA23E63de01f85CB646DeA29B4b36bE

Exchange Rate

1 ETH = 84.124346 AVAX

Min. Received

831

AVAX

(1%)

Bridge Fee

3

USDC

Withholding Fee

4.1158

ETH

Transfer

第三方資訊揭露

資訊簡化、

提高易讀性

成果,這個設計帶來了什麼影響?

成果數據:

• 產品成功轉型,支援 20+ 條區塊鏈與 9+ 種跨鏈橋的聚合服務。

• 建立了一套可擴展的 Widget 設計系統,讓 100+ 合作夥伴能直接嵌入這套路由介面。


Retrospective (反思):

• 學到了什麼: 在 Fintech/Web3 產品中,**「資訊透明度」**是轉換率的關鍵。用戶不怕付費,怕的是「不知道為什麼付費」。

• 未來展望: 希望能引入「多路徑比較」功能,讓進階用戶不只接受系統推薦,還能手動選擇「最快」或「最便宜」的路徑。

route card 等各種 component 可以一起秀出來,展現這個專案之大

© 2026 Chloe Chiu. Made with Passion:)

epin97p@gmail.com

© 2026 Chloe Chiu. Made with Passion:)

epin97p@gmail.com

© 2026 Chloe Chiu. Made with Passion:)

epin97p@gmail.com