UI/ UX
Uto Trade
Uto Trade 是一款美股複委托產品，重新設計台灣投資人的美股交易體驗，結合即時換匯下單與開放式市場資訊，打造從內容使用、會員經營到複委託開戶的完整產品體驗。
Context & Vision
產品背景與願景
團隊希望為台灣投資人打造美股複委託產品。不同於多數券商將交割帳戶綁定單一幣別，Uto Trade 允許投資人在下單時即時選擇並切換交割幣別，提供更高的資金使用自由度。
產品願景不只停留在交易 – 我們也希望建立一個即使沒有開戶，也值得長期使用的投資資訊平台。使用者可以先從查行情、看資訊開始，註冊會員後取得更多服務，最後自然轉化為複委託客戶。
Challenge
產品挑戰
在美股複委託情境中，使用者需要同時理解交易條件、資金狀態與交割幣別
設計的核心挑戰，是在高資訊密度下建立清楚的資訊層級，讓使用者能安心完成下單，也能快速掌握整體資產
01
下單流程
讓每一筆交易都清楚、可確認
使用者在下單時，需要同時確認買賣方向、委託類型、價格、數量、交割幣別與可用餘額。任何一項資訊不夠清楚，都可能增加操作猶豫，甚至造成錯誤交易。
設計上需要在有限的畫面中排出明確優先順序，讓使用者在操作過程中持續掌握交易內容、預估金額與資金狀態。
如何在送出委託前，清楚呈現預估金額、相關成本與交割幣別，降低交易的不確定感？
Question
02
總資產檢視
將分散的金融資訊整理成資產全貌
複委託帳戶可能同時包含不同幣別的現金、股票持倉、投資損益與交易中的資金。當資訊缺乏清楚層級時，使用者很難快速判斷整體資產、資金分布與目前真正可以使用的餘額。
設計上不只需要呈現完整資訊，也要區分總覽與細節，讓使用者能先掌握整體狀態，再依需求深入查看不同資產項目。
如何讓使用者一眼掌握資產總額、投資損益與可用資金？
Question
Research
研究
從競品與市場資料，定義 Uto Trade 的切入點
透過競品功能拆解與公開資料研究，將關鍵洞察收斂為 Uto Trade 的產品定位與資訊策略
Insight
研究洞察
綁定特定幣別背後的隱性成本困擾
公開論壇討論顯示，使用者對交割幣別的困擾不只來自匯率資訊不透明，也來自選定台幣或美元後缺乏調整彈性，資金調度的自由性變低
資料來源：Dcard、Mobile01等公開討論，蒐集期間2022–2026年；論壇樣本僅用於辨識問題訊號，不代表全體使用者
使用者優先關注個人資產
首頁應優先呈現與使用者相關的資訊，同時提供具價值的預設市場內容，保留探索投資機會的可能性
功能完整度與資訊可發現性之間存在取捨
即使平台提供完整的投資資訊，若資訊層級不清楚或入口過深，使用者仍難以快速完成判斷
Design Response
設計方案
01
雙幣下單
透過三版迭代，在資訊完整度與下單效率之間取得平衡
最終聚焦交易任務，在送出委託前清楚呈現預估金額與相關成本，並以國旗和色彩強化幣別辨識；同時將當前委託整合至下單頁，讓投資人能在同一情境中快速下單、改單與刪單。
讓雙幣下單的每個決策，都清楚可確認
將買賣方向、交割幣別、預估金額與購買力集中於同一流程，並在送出前再次確認委託內容。
02
總資產與持倉總覽
從帳戶導向的資料結構，轉向使用者理解資產的方式
原始方向⎥
後端資料以帳戶為中心，兩個幣別帳戶分別列出自己的持股，雖然直接對應系統資料結構，卻需要使用者自行跨帳戶比對與計算。
設計重構⎥
拆成三個觀看軸線
01 顯示幣別
02 持股角度
03 帳戶角度
03
建立一致且可重用的介面基礎
從 0 到 1 建立 Uto Trade Design Library，將色彩由 Raw Value、Base Token 逐步轉換成具有使用意圖的 Semantic Token。
元件優先直接使用 Semantic Token；只有在需要獨立控制的特殊情境下，才建立 Component Token，減少不必要的抽象與維護成本。
在元件層，透過 Variant、Text Property、Boolean Property 與 Instance Swap，讓同一個元件支援不同的資訊情境。
以 Stock Header 為例，只需調整 Display、股票內容與尾端操作，即可應用於基本資訊、持倉、精簡與損益等不同介面。
Project Status & Conclusion
專案狀態與總結
專案完成競品研究、IA、Hifi-Wireframe、Prototype 與 Design Library 後，因外部因素而暫停，未進入完成開發與上線階段。
因此，本案例呈現的是設計決策與可驗證方案，而非上線後的營運成果。
讓雙幣別交易資訊更容易理解與確認
Uto Trade 的核心挑戰，是整理雙帳戶、交割幣別、持倉與損益之間的資訊關係，讓使用者在下單與檢視資產時快速掌握重點。
從競品分析與 IA 規劃開始，我將產品挑戰聚焦在兩個核心問題，並透過 Wireframe 與 Prototype 的迭代提出相對應的設計方案。
01｜下單流程
針對「買了什麼、需要多少資金，以及使用哪種幣別交割？」
我將交易條件、預估金額與可用餘額集中呈現，並加入送出前的委託預覽，協助使用者再次確認交易內容。
02｜總資產檢視
針對「目前有多少資產、投資損益如何，以及還有多少資金可用？」
我以全域幣別統一雙帳戶計價，搭配持股與帳戶視角，讓使用者從總覽到明細都能維持一致的資訊脈絡。
如果專案繼續，會追蹤驗證
✦ 使用者是否能正確理解交割幣別與預估金額
✦ 是否能找到可用資金並完成下單
✦ 是否能從總覽理解跨帳戶的資產與損益
✦ 展開持股後是否能理解不同帳戶的明細