
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

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 可以一起秀出來,展現這個專案之大

