Double-click this headline to edit the text.
OwlPay Wallet Pro - 企業版

一款具備可擴展性與高度信任的企業級加密錢包

專為安全、高頻交易打造,設計低摩擦的操作流程、透明的資產控管,以及靈活的審批機制,確保企業用戶在大額交易時也能高效且安心地管理資產。
官方網站 ↗︎
CaseStudy_WalletProWeb_Hero

ROLE

UI/UX 設計師

TIMELINE

2023 ~ 2024/01

TEAM

前端工程師、後端工程師、品管工程師

DELIVERABLES

介面模型圖(Mockups)
互動原型(Prototypes)
易用性測試(Usability test)
高階主管簡報(Executive presentations)
設計交付(Hand-off)

Designing beyond UI – Driving process improvements across teams

在打造這個加密錢包平台的同時,我也協助優化設計、產品與工程團隊的協作流程,減少摩擦、提升交付速度:
重新設計設計審查流程
將重點從繁瑣的利害關係人對齊,轉向減少與工程師間的溝通迴圈。交付內容更加精煉,包含更清晰、開發就緒的規格說明、會前文件,以及針對工程時程設計的審查後檢查清單。
新增跨部門產品審查檢查點
  • 在開發啟動前,設計師與業務團隊會先進行產品走查,聚焦於邊界情境與異常狀態,避免等到開發後才由 QA 發現問題。
  • 在 Figma 最終交付時,同步提供產品測試說明,明確列出所有展示與審查情境(包含非理想、隱藏流程),讓工程師能完整覆蓋各種情境的實作需求。
CaseStudy_WalletProWeb_Mockup

專案背景

在處理加密資產時,一個小失誤就可能導致資金永久遺失。當資產分散在多個錢包、且多人共同管理時,「明確的權限設定」與「完善的審批流程」就變得格外重要。因此,我們設計了靈活的提領規則與額外驗證機制,協助財務團隊降低操作錯誤並維持資產掌控力。

團隊目標

  • 透過轉帳前的多重檢查,降低資金誤匯風險
  • 明確設定角色與權限,讓每一步操作都有紀錄、可追蹤
  • 讓非技術背景的團隊成員也能即時掌握交易狀態,操作更有信心
CaseStudy_WalletProWeb_BackgroundIllu

如果沒有明確的權限設定和操作紀錄,資產到底由誰管理、是否被正確使用就很難掌握。

「我有點擔心資金沒被妥善運用。」

在缺乏清楚檢查機制或即時回饋的情況下處理大額轉帳,壓力很大,也容易出錯。

「要把這麼多錢匯給上百個帳戶?我真的很怕自己哪裡會搞錯。」

如何定義使用者需求?

點擊查看完整使用者研究流程

1. User insight discovery
為了深入了解企業用戶如何管理加密資產,我訪談了以下幾位關鍵角色:
  • Finance Lead – responsible for internal fund allocation and approvals
  • US-based Finance Operator – handles daily transfers and vendor payments
  • Internal Auditor – reviews transactions and risk-control compliance
透過這些訪談,我能更全面掌握企業在加密資產管理上的實際需求與挑戰:
  • Without clear permissions and audit trails, it’s hard to know who’s handling the assets and whether they’re being used properly.
  • Handling large transfers without clear checks or real-time feedback feels stressful and error-prone.
2. Synthesize & Define
How might we 產品功能發想
3. Design principles

資訊清晰呈現
讓資產流向與操作一目了然,使用者一看就懂。

降低認知負擔
簡化操作流程,特別是在高風險任務中,減少用戶焦慮。

強化人工審核
讓審批者能輕鬆發現潛在問題,防患於未然。

靈活可擴展
採用模組化設計,方便因應業務規則變動,隨時調整。

透明建立信任
提供明確的操作回饋與完整追蹤紀錄,增強用戶信心。

主動風險預警
在用戶察覺前,主動顯示異常與風險行為,協助及早防範。

4. Design rationale
在進入線框圖設計之前,我會先完整記錄設計背後的思考,包括商業目標、用戶預期成果,以及對應的設計策略。這樣做能確保後續設計方向明確,團隊在每個階段都能聚焦於用戶與業務的核心需求。
5. Structure
在完成「How Might We(HMW)」問題定義後,我們決定先從提領流程著手。目標是避免交易錯誤,並讓操作人員在轉帳時更加有信心。
Flow chart
Wireframe
6. Validation

易用性測試
為了驗證流程設計,我邀請了三位對 Web 3.0 熟悉程度不同的參與者(新手、中階、進階)進行可用性測試,每位用戶都需透過我們的介面完成一次加密貨幣轉帳任務。主要發現如下:

  • 輸入欄位的排列方式容易誤導用戶,讓他們不清楚哪些資訊是必填的。
  • 用戶對於整個轉帳流程缺乏可見性 ,不知道接下來會發生什麼步驟,因此在操作時感到不安。
6. Delivery

在完成可用性優化後,我交付了一份詳細的設計交接文件,不僅包含用戶流程與 UI 規格,還清楚記錄了各種狀態變化,以及每個互動背後的設計思考與用意。這樣的交付方式,有助於開發團隊精準理解設計細節,確保產品落地時能完整呈現預期體驗。 status variations and design intent behind every interaction.

7. Dev process optimization
為了進一步降低開發過程中的認知落差,我新增了一份「產品展示檢查清單」,在設計交付時與工程師共享。這份清單確保所有隱藏狀態、替代流程及特殊情境都能在 QA 前被完整考慮,提升產品的一致性與可靠性。

Impact

這個流程大幅提升了開發準確度,減少了反覆溝通的次數。上線後,QA 流程所需時間明顯縮短,用戶回報問題的頻率也從每週 2–3 次降到每月僅 1–2 次。
CaseStudy_WalletProWeb_Overview_Macbook

儀表板重新設計 — 提升資訊清晰度、轉換率與操作效率

CaseStudy_WalletProApp_BulletedList
精簡化註冊流程:優化新手上手體驗
目標
提升企業自助用戶的註冊轉換率
專案背景
過去大多數企業客戶都需要仰賴業務協助才能順利啟用帳號,但這對於不熟悉系統的自然訪客來說,反而增加了操作門檻與摩擦,影響了自助註冊的轉換成效。
設計策略
CaseStudy_WalletProWeb_OverviewGetStarted
我們重新設計了註冊上手流程,將簡明、具視覺化的分步啟用指引放在用戶登入後的儀表板頂部。這樣一來,首次使用的企業用戶可以輕鬆自助操作,無需人工協助也能順利完成企業方案的啟用。
CaseStudy_WalletProApp_BulletedList

全資產一覽,跨錢包與鏈統一呈現

目標

協助用戶清楚掌握當前資產分布,及時發現異常變化,並快速應對潛在風險。

專案背景

加密資產分散在不同鏈與幣別間,讓用戶難以一眼看清總資產餘額及其變化趨勢。如果缺乏即時且整合的資產視覺化,匯率波動或脫鉤等風險就容易被忽略,進而延誤重要決策時機。
設計策略

每日資產趨勢與風險提醒
以折線圖呈現每日資產餘額變化,並透過提示訊息標示異常匯率波動或穩定幣脫鉤等狀況,協助用戶即時發現潛在風險。

CaseStudy_WalletProApp_BulletedList

即時交易狀態感知:動態提醒與操作提示

目標

協助用戶即時處理待辦或異常交易,快速採取行動

專案背景

在金融儀表板中,及時顯示交易狀態更新至關重要。如果缺乏這類即時提醒,用戶可能會錯過如審批、合規提交等重要操作,導致流程延誤或產生錯誤。

設計策略

CaseStudy_WalletProWeb_OverviewDashboard
  • 我們新增了一個常駐側邊欄,重點提示用戶需處理的關鍵事項,例如:提領審批、未完成的 Travel Rule 表單,以及被標記的企業交易。
  • 同時,側邊欄會根據交易狀態(如待處理、需採取行動)即時顯示對應數量,讓用戶無需進入子頁面,也能隨時掌握重要流程進度,不會錯過任何關鍵任務。

細緻化資產存取與審批控管設計—守護企業加密資產安全

CaseStudy_WalletProApp_BulletedList
資產規則設定

目標

讓財務團隊能明確掌控資產流向,並為每筆交易指派負責人。

專案背景

加密資產一旦誤用,幾乎無法追回,因此在企業環境下,存取權限與審批流程至關重要。隨著資產類型、團隊成員及交易金額的多樣化,企業需要靈活的工具,明確設定「誰可以操作、何時可以動用、金額上限」等規則,最大程度降低操作風險。

設計策略

提領活動追蹤—為企業風控打造透明的資產流向監控體驗

CaseStudy_WalletProApp_BulletedList

協助稽核人員透過每日視覺化數據洞察,快速發現異常行為

目標

讓稽核人員能觀察數據,清楚掌握每日提領狀況,及時發現異常行為,確保資產被妥善管理。

專案背景

在高頻加密資產管理系統中,多位團隊成員分工操作、審批層級不同,異常提領模式很容易被忽略。為強化風險監控,我們整合了關鍵指標(如每日總提領金額、失敗率、待審批數量),並以折線圖、熱力圖及明細表格等方式呈現,讓稽核人員能迅速辨識異常,並及時追蹤處理。

設計策略

熱力圖如何協助發現潛在的異常活動
熱力圖會將提領行為依據時間與用戶分布進行視覺化,讓稽核人員能一眼看出異常密集的操作模式,例如:某些時段操作特別頻繁、個別日期提領量異常、或特定用戶活動集中。這種直觀呈現方式,有助於稽核快速鎖定需特別關注的熱點區域,提升審查效率。

為什麼追蹤繞過審核的交易很重要?

我們特別設計了「未經審核提領」的明細表,目的是協助稽核人員發現審批流程中的潛在漏洞。這樣一來,所有繞過審核的交易都會被清楚列出,方便追蹤是否有異常頻繁或大額的提領行為,避免這類風險被忽略。

打造可擴展且友善的加密貨幣交易流程

CaseStudy_WalletProApp_BulletedList

以高度可擴展性與彈性為核心,確保系統能無縫因應業務變動

目標

設計一套既能讓非加密貨幣用戶輕鬆上手,又能快速整合新合作夥伴與交易類型的交易體驗。

專案背景

加密產業變化速度極快,產品必須支援頻繁的合作夥伴接入與多樣化的交易模式。同時,許多用戶對加密貨幣並不熟悉,因此流程必須直覺易懂。內部設計也需配合工程團隊,達到每次整合 2–3 天內即可完成的高效交付目標。

設計策略

CaseStudy_WalletProWeb_Trade_Layout
  • 買入、賣出與轉帳等流程採用一致的版面結構,降低用戶學習成本
  • 元件層級具高度彈性,可根據需求插入不同付款方式或合規步驟
  • 工程友善的架構設計,讓新合作夥伴的整合最快可於 2–3 天內完成

易用性提升: 交易流程採用大家熟悉的電商結帳模式。所有關鍵步驟——資產選擇、表單填寫、手續費確認、最終檢查——都整合在同一頁面,讓操作更直覺,特別能減輕加密貨幣新手的焦慮與認知負擔。

設計系統

整合與一致性維護

專案本身的色彩、命名系統是與Wallet Pro App共用的,以保持產品一致性。
當遇到需要獨特元件或新增狀態時,我會擴充現有設計系統,採用可重用、可擴展的設計模式,並與開發團隊密切協作,對齊 Token 使用方式,確保視覺與功能的一致性。

元件

每個元件我都詳細記錄:

  • 主要使用情境
  • 各種變體與響應式行為
  • 所有互動狀態與邊界情境

UI kids

頁面樣板

空間系統

← Previous project
OwlPay Wallet Pro - App
Next project →
097 forum
crossmenu-circle