| EN

優化 Coinbase
提升使用者體驗

優化投資組合和交易介面的行動端應用程式的設計,提升資訊清晰度和易用性

當前問題

Coinbase 在加密貨幣市場中具有領先地位,但根據使用者回饋顯示行動端的交易體驗存在部分問題。使用者經常發現行動端的交易介面視覺雜亂且難以理解,讓執行交易存在磨擦,而投資組合介面資訊呈現不清,使得使用者難以快速理解總餘額、資產分配和成長趨勢。

透過使用者研究,我識別出兩個需要立即改善的功能區塊,分別為投資組合介面和交易介面:

    投資組合介面 — 數據視覺化不佳
    • 缺乏清晰的圖形表示(如圓餅圖或趨勢線)
    • 難以快速評估績效趨勢或資產分配
    • 使用者參與度低

    交易頁面 — 入口點不明確
    • 使用者經常不確定如何下單,需要經過多次嘗試才找到下單入口。
    • 使用者在解讀交易資訊時需要花較多時間。

作為設計師,我的任務是:重新設計投資組合和交易介面,創造清晰的視覺層次、直觀的使用者流程,以及更易於使用的交易體驗,同時保持 Coinbase 的專業與可信度。

投資組合頁面挑戰

投資組合介面 — 數據視覺化不佳

目前的投資組合介面層次不清,且缺乏視覺提示,讓使用者比較難快速理解資產餘額、分配狀況和資產成長趨勢等,這樣的呈現降低了使用者參與度。

交易頁面挑戰
使用者體驗挑戰

交易介面 — 入口點不明確

在交易頁面上,使用者無法快速進行下單和解讀關鍵的市場資訊,部分使用者需要經過多次的嘗試才能進行下單。

解決方案

我運用手繪的方式大致重新設計投資組合和交易介面來解決關鍵的易用性問題。解決方案專注於清晰的層次結構、更好的數據視覺化和簡化的使用者流程。

投資組合頁面:

  • 清晰的層次結構:總餘額和關鍵統計數據在視覺上優先顯示,增加資訊層次,讓使用者在獲得更多資訊的同時保持介面乾淨。
  • 數據視覺化:迷你趨勢線、圓餅圖或長條圖來顯示績效和資產分配。

交易頁面:

  • 可讀的市場數據:重新設計市場資訊,使其更清晰且易於掃描。
  • 一步下單頁面:引入直接下單頁面,讓使用者一進入交易介面後可以直接進行交易。

設計流程

01

使用者研究與分析

與 5+ 位 Coinbase 使用者進行訪談,了解使用者痛點和使用行為。

02

資訊架構

基於使用者優先級和心理模型重新構建導航和內容層次。

03

線框圖製作

創建低保真線框圖和互動原型來測試不同的方法。

04

視覺設計與測試

開發高保真設計並與目標使用者進行易用性測試。

線框圖

在定義資訊架構後,我使用手繪方式製作低保真線框圖來測試不同的佈局方法,這些線框圖幫助我驗證設計決策,並先進行初步的介面規劃。

投資組合頁面

在投資組合介面當中,我增加了資訊的階層結構, 總餘額和關鍵統計數據置於首頁以便快速獲取, 而詳細資產清單和圖表則結構化以便使用者進行比較和導航。

投資組合線框圖

交易頁面

線框圖專注於改善數據可讀性和簡化交易流程,加入直接下單的面板以簡化交易流程, 並且將重要的市場數據已區塊方式呈現,讓使用者能夠快速掃描價格變動、交易量等資訊。

交易線框圖

視覺設計和原型製作

在視覺設計以及原型製作階段,我將線框稿轉換為可互動的高保真原型,以呈現使用者如何與優化後的 Coinbase 行動端應用程式進行互動,有助於驗證介面的使用性與資訊呈現是否清晰。

在投資組合部分我增加層次結構,在保持清晰度的同時為使用者提供更豐富的資訊。而資產的分佈則通過圓餅圖進行視覺化,讓使用者能夠快速理解資產的分佈狀況, 同時加入資產成長的趨勢圖,讓使用者能夠快速理解資產的成長趨勢。

投資組合之前

為了優化交易體驗,我在交易介面中添加了直接下單功能。透過新的設計,使用者可以在查看市場數據的同時進行下單,使流程更快速且更直觀。 同時,在價格趨勢圖旁新增了可切換的深度圖,讓使用者能依需求查看市場流動性。

交易之前

在交易介面的部分,我還將市場數據以列表方式重新組織成結構化區塊,這種佈局讓使用者能夠快速掃描價格變動、交易量和其他重點市場數據。

投資組合增強之前
投資組合增強之後

成果與學習

成果

  • 提升交易體驗,減少操作摩擦並清楚呈現市場資訊。
  • Portfolio 的階層化佈局與圖表讓使用者快速掌握關鍵資訊。
  • 交易介面讓使用者可以直接下單,並同時查看深度圖,操作更順暢。

學習

  • 提升行動端應用程式設計能力,特別是在有限螢幕空間下安排資訊層次的技巧。
  • 學會在資訊豐富與清晰易讀之間取得平衡,讓使用者能快速理解重要內容。
  • 強化資訊視覺化與區塊化布局能力,使操作與理解更直覺。