在博暉的第一個獨立專案：將複雜的母子基金交易流程轉化為直觀的線上體驗
將複雜的母子基金管理從臨櫃作業轉為線上自助服務，提升投資人操作效率
母子基金是一種投資工具，讓投資人以母基金作為資金池，定期轉入子基金進行投資。原本所有操作都需臨櫃辦理，缺乏數位化管理工具。
負責整體 UI/UX 設計，包含資訊架構、介面設計和交互流程規劃
完成富蘭克林首個完整母子基金數位平台，實現 100% 線上化作業
| 原有問題 | 設計解決方案 |
|---|---|
| 契約申購需臨櫃辦理，流程冗長 | 設計三步驟線上申購流程，支援新申購和既有庫存轉入 |
| 多筆契約資訊分散，難以掌握總體投資狀況 | 建立統一的契約總覽介面，整合資產分布和績效分析 |
| 契約變更需要紙本作業，無法即時調整投資策略 | 提供線上契約變更功能，支援即時調整和終止操作 |
| 交易狀態不透明，投資人缺乏掌控感 | 建立完整的交易追蹤機制，包含在途交易和歷史紀錄 |
契約申購需臨櫃辦理，流程冗長
設計三步驟線上申購流程，支援新申購和既有庫存轉入
多筆契約資訊分散，難以掌握總體投資狀況
建立統一的契約總覽介面，整合資產分布和績效分析
契約變更需要紙本作業，無法即時調整投資策略
提供線上契約變更功能，支援即時調整和終止操作
交易狀態不透明，投資人缺乏掌控感
建立完整的交易追蹤機制，包含在途交易和歷史紀錄
母子基金涉及多層次資料結構：母基金、多檔子基金、不同幣別、在途交易等，如何讓一般投資人輕鬆理解？
解決方案：
契約申購涉及母基金選擇、最多 3 檔子基金設定、智能加碼配置等複雜設定。
解決方案：
| 實際影響 | 影響次數 |
|---|---|
| 卡片資訊混亂，分不清母基金/子基金 | 4次 |
| 停利方式描述不清楚 | 3次 |
| 「異動」按鈕位置不符預期 | 2次 |
| 找不到「尚未停利明細」入口 | 2次 |
卡片資訊混亂，分不清母基金/子基金
4次
用戶誤解契約結構
改為預設列表顯示，桌機版移除卡片模式
停利方式描述不清楚
3次
申購流程中止
重新撰寫文案，使用更直白的表達方式
「異動」按鈕位置不符預期
2次
用戶在導航列反覆尋找
強化按鈕視覺、新增導航入口
找不到「尚未停利明細」入口
2次
查詢任務失敗
按鈕加上「明細」文字，提升高度至 32px
以「契約申購」任務為例：
典型用戶行為洞察：
設計決策的數據支撐：
基於測試結果，我們做出以下關鍵設計調整：
這次測試驗證了原子組件架構的價值：當需要調整按鈕尺寸時，一次更新就能同步所有相關頁面，大幅提升了設計迭代效率。
在博暉的第一個獨立專案
這是我加入博暉後第一個完全獨立負責的專案，從 0 到 1 建立整個產品的設計體系。母子基金是基金交易中最複雜的設定類型：一個契約涉及 1 個母基金 + 最多 3 個子基金，每個子基金都有獨立的轉申購設定、停利條件、智能加碼策略。相比一般單筆基金申購，需要處理的參數和邏輯複雜度呈指數級增長。如何將這種複雜性轉化為直觀的用戶介面，是這個專案最大的設計挑戰。
專案週期長達三年多，涉及 50+ 個頁面和複雜的金融業務邏輯。面對每週的需求變更和客戶反饋，傳統的頁面式設計難以維護。
原子組件架構的應用
採用 Atomic Design 重新規劃專案架構：將金融介面拆解為可復用的原子組件（按鈕、輸入框、狀態標籤），組合成業務元件（搜尋條件、交易卡片、資產總覽），最終組裝成頁面。
實際效果：當客戶要求調整所有表格的樣式時，只需要修改一個原子組件，所有相關頁面同步更新。這種架構讓我在三年的開發週期中，維持設計一致性並快速響應變更需求。
透過這個專案深度理解了：金融產品的設計不只是介面美化，而是需要深度理解業務邏輯、用戶心理、風險控制的系統性設計工程。每一個看似簡單的按鈕背後，都可能涉及複雜的商業規則和法規要求。
從這個專案開始，我具備了處理高複雜度 B2C 產品的設計能力。學會如何：
這個專案不僅是介面設計，更是對金融服務數位化轉型的深度思考和實踐。