產業

期貨交易App

分類

App 功能開發 / CRM 管理新增

USDT 錢包功能開發

Main Project Image
Main Project Image
Main Project Image

專案目標: 建立USDT錢包,提升用戶資金管理管道選擇

我負責從 Wireframe 到 Prototype 的完整設計流程,並涵蓋 UI 競品分析與元件系統建立。過程中,我與產品經理 (PM) 和研發團隊 (RD) 緊密協作,釐清 CRM 後台的新增項目,並透過圖像化方式促進團隊共識,有效加速開發溝通。同時,我也主導了畫面開發可行性評估,確保設計能夠高度落地實作。

問題與挑戰

因應交易平台新增「USDT錢包」功能,需設計一套清楚呈現帳戶餘額、操作入口與狀態資訊的 UI 模組,並確保與原有帳戶資訊邏輯一致。 在前期競品分析中,我發現了以下主要問題: 1. 資訊層級混淆: 現有畫面無法有效區分「帳戶餘額」、「可操作狀態」與「功能按鈕」之間的層級,導致使用者在瀏覽時容易感到困惑。 2. 錢包狀態不明: 使用者難以辨識目前是否已建立 USDT 錢包,影響首次使用體驗與後續操作判斷。 3.主視覺混淆: 畫面未能即時回饋使用者目前所處的帳戶類型,導致主視覺缺乏明確指引。

設計策略與解決方案

一、優化資訊呈現層級: 針對現有畫面無法區分層級的問題,我們重新規劃了「交易帳戶」與「USDT錢包」的視覺呈現方式。透過明確的區塊劃分,並強化帳戶餘額的視覺重要性,讓使用者一眼就能掌握核心資訊。例如,在改版後, 我們在「交易帳戶」與「USDT錢包」之間增加了明確的區隔,並將功能按鈕(入金、出金、劃轉)以更直觀的圖標形式呈現,提高辨識度。 二、清晰的錢包建立引導: 針對使用者難以辨識是否已建立USDT錢包的問題,我們設計了更明確的狀態提示。例如,在錢包尚未建立時,會有明確的文字提示「尚未建立USDT錢包功能時期」,引導使用者進行下一步操作。 三、強化視覺一致性與狀態回饋: 為了解決主視覺混淆的問題,我們利用產品主視覺的「current」狀態,確保使用者能即時了解自己當前正在查看哪種帳戶類型。這有助於建立直覺的操作心智模型。 

Large Project Gallery Image #1
Large Project Gallery Image #1
Large Project Gallery Image #1
Large Project Gallery Image #2
Large Project Gallery Image #2
Large Project Gallery Image #2
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #2
Project Gallery Image for 50% width of the screen #2
Project Gallery Image for 50% width of the screen #2


設計流程與協作

Large Project Gallery Image #3
Large Project Gallery Image #3
Large Project Gallery Image #3
Large Project Gallery Image #4
Large Project Gallery Image #4
Large Project Gallery Image #4

專案結束後的反思

在與產品經理和工程師協作的過程中,我深刻體認到高效溝通的重要性遠超設計稿的精細度。透過這個 USDT 專案,我學習到不一定需要製作極其精細的展示稿。 即便僅透過簡單的 Wireframe 或初步的 Prototype,也能非常有效地與工程師們展開開發可行性溝通。這種做法不僅顯著加速了開發流程,也讓團隊能夠及早發現並解決潛在問題,從而大幅提升了整體專案的效率和品質。 這也讓我重新意識到,設計交付物應以促進團隊協作為核心,而非單純的視覺呈現。

  • The image featured in the carousel #1
  • The image featured in the carousel #2
  • The image featured in the carousel #3
  • The image featured in the carousel #4
  • The image featured in the carousel #1
  • The image featured in the carousel #2
  • The image featured in the carousel #3
  • The image featured in the carousel #4
  • The image featured in the carousel #1
  • The image featured in the carousel #2
  • The image featured in the carousel #3
  • The image featured in the carousel #4