富蘭克林母子基金數位化平台設計

專案概述

將複雜的母子基金管理從臨櫃作業轉為線上自助服務

負責富蘭克林母子基金數位化平台的完整 UI/UX 設計，將複雜的金融交易流程轉化為直觀的線上體驗。母子基金是一種投資工具，讓投資人以母基金作為資金池，定期轉入子基金進行投資。原本所有操作都需臨櫃辦理，缺乏數位化管理工具。

將完整的契約生命週期數位化 - 申購、變更、終止全程線上化
提供直觀的資產管理介面 - 統一契約總覽，整合資產分布和績效分析
建立透明的交易追蹤機制 - 包含在途交易和歷史紀錄完整串接

我的角色與責任

Product Designer

負責整體 UI/UX 設計，包含資訊架構、介面設計和交互流程規劃

專案週期

2022年 - 三年長期專案，50+ 頁面設計

專案成果與價值

已完成：富蘭克林首個完整母子基金數位平台
已實現：100% 線上化作業，無需臨櫃辦理
已建立：三步驟申購流程，支援新申購和既有庫存轉入
已建立：可擴展的原子組件設計系統

原有問題與設計解決方案

原有問題	設計解決方案
契約申購需臨櫃辦理，流程冗長	設計三步驟線上申購流程，支援新申購和既有庫存轉入
多筆契約資訊分散，難以掌握總體投資狀況	建立統一的契約總覽介面，整合資產分布和績效分析
契約變更需要紙本作業，無法即時調整投資策略	提供線上契約變更功能，支援即時調整和終止操作
交易狀態不透明，投資人缺乏掌控感	建立完整的交易追蹤機制，包含在途交易和歷史紀錄

原有問題

契約申購需臨櫃辦理，流程冗長

設計解決方案

設計三步驟線上申購流程，支援新申購和既有庫存轉入

原有問題

多筆契約資訊分散，難以掌握總體投資狀況

設計解決方案

建立統一的契約總覽介面，整合資產分布和績效分析

原有問題

契約變更需要紙本作業，無法即時調整投資策略

設計解決方案

提供線上契約變更功能，支援即時調整和終止操作

原有問題

交易狀態不透明，投資人缺乏掌控感

設計解決方案

建立完整的交易追蹤機制，包含在途交易和歷史紀錄

關鍵設計挑戰

挑戰 1：複雜金融邏輯的簡化呈現

母子基金涉及多層次資料結構：母基金、多檔子基金、不同幣別、在途交易等，如何讓一般投資人輕鬆理解？

解決方案：

採用卡片式模組化設計，將相關資訊分組
提供「含在途/不含在途」切換，讓用戶選擇適合的檢視方式
用視覺標籤快速識別契約狀態（正常/處理中/終止）

挑戰 2：多步驟申購流程的引導設計

契約申購涉及母基金選擇、最多 3 檔子基金設定、智能加碼配置等複雜設定。

解決方案：

設計三步驟引導流程，每步專注單一任務
提供即時驗證和錯誤提示
確認頁面完整展示所有設定，變更項目紅色標示

核心功能設計

母子契約總覽

投資總市值、資產分布圓餅圖、幣別明細
支援列表/卡片兩種檢視，快速掌握契約狀態

契約申購流程

三步驟引導，化繁為簡
母基金約定、子基金設定、確認送出
智能基金篩選、即時金額驗證、累加級距檢核
智能加碼功能（標準型/加強型/積極型）
完整資訊確認，變更項目視覺標示
整合法規同意事項，密碼驗證確保安全

契約查詢與變更

多維度篩選排序，支援關鍵字搜尋
一般變更 vs 終止契約兩種模式
變更欄位紅色標示，提供變更前後對比

交易管理系統

委託查詢、在途交易、歷史紀錄完整串接
即時顯示進行中交易，提供預估金額
完整交易歷史，多維度查詢

設計成果展示

三步驟申購流程設計

將複雜的母子基金申購流程簡化為直觀的三步驟引導

母基金設定

用戶選擇母基金來源（新申購或既有庫存轉入）、投資區域和金額設定

子基金設定

選擇子基金並設定轉申購日期，提供直觀的日曆選擇器

確認契約資訊

完整顯示母基金和子基金設定，確保用戶充分了解契約內容

申購完成

清楚的成功狀態回饋，包含委託查詢和繼續申購的後續動作

契約總覽介面

統一的資產管理介面，支援桌機和手機版響應式設計

桌機版

完整顯示投資總市值、資產分布圓餅圖和契約列表，支援列表/卡片切換

手機版

響應式設計優化，保持功能完整性

管理功能介面

完整的契約與交易管理，包含契約查詢變更、在途交易和歷史紀錄

契約查詢與變更

提供完整的契約管理功能，支援多維度篩選搜尋，讓投資人輕鬆管理所有基金契約

在途交易管理

桌機版

即時顯示進行中的交易，包含預估淨值、單位數和預估金額

手機版

響應式設計，保持完整交易資訊顯示

歷史交易紀錄

桌機版

完整的交易歷史查詢，支援多維度篩選和交易結果狀態顯示

手機版

保留完整查詢功能，優化手機操作體驗

設計創新點

三步驟引導流程，化繁為簡
統一契約總覽，整合資產分布和績效分析
響應式設計，桌機手機完美適配
即時交易追蹤，提升用戶掌控感

用戶價值

從臨櫃作業轉為 100% 線上化
複雜金融邏輯的直觀化呈現
完整契約生命週期數位化管理
透明的交易狀態追蹤機制

易用性測試與設計優化

測試設計與執行

5 位用戶，涵蓋 7 個核心任務場景
任務導向測試，記錄完成時間、滿意度評分和行為觀察
前測 1 場 + 正式測試 2 場（2022/09/28-29）

關鍵發現與改進

實際影響	影響次數
卡片資訊混亂，分不清母基金/子基金	4次
停利方式描述不清楚	3次
「異動」按鈕位置不符預期	2次
找不到「尚未停利明細」入口	2次

問題

卡片資訊混亂，分不清母基金/子基金

影響次數

4次

實際影響

用戶誤解契約結構

解決方案

改為預設列表顯示，桌機版移除卡片模式

問題

停利方式描述不清楚

影響次數

3次

實際影響

申購流程中止

解決方案

重新撰寫文案，使用更直白的表達方式

問題

「異動」按鈕位置不符預期

影響次數

2次

實際影響

用戶在導航列反覆尋找

解決方案

強化按鈕視覺、新增導航入口

問題

找不到「尚未停利明細」入口

影響次數

2次

實際影響

查詢任務失敗

解決方案

按鈕加上「明細」文字，提升高度至 32px

以「契約申購」任務為例：

平均完成時間：3 分 55 秒
成功率：80%（4/5 位用戶順利完成）
滿意度評分：5.4/10（任務難度）→ 改進後預期提升至 7+

典型用戶行為洞察：

用戶會直覺地在導航列尋找「交易相關」功能
金融術語需要更淺顯易懂的表達方式
重要操作按鈕需要足夠的視覺權重（32px 高度為最適尺寸）

設計決策的數據支撐：

基於測試結果，我們做出以下關鍵設計調整：

介面佈局優化：桌機版改為列表預設，提升資訊識別效率
導航架構調整：將「契約變更」獨立為導航項目，符合用戶心智模型
微交互改進：hover 狀態增加「查看投資報告」提示，引導用戶探索

這次測試驗證了原子組件架構的價值：當需要調整按鈕尺寸時，一次更新就能同步所有相關頁面，大幅提升了設計迭代效率。

功能完整性

完整支援：契約生命週期（申購 → 變更 → 終止）
成功簡化：複雜投資邏輯的介面設計（母基金、子基金、智能加碼等多層次設定）
透明追蹤：在途交易、歷史紀錄、委託管理完整串接

專案反思與學習

核心學習

在博暉的第一個獨立專案

這是我加入博暉後第一個完全獨立負責的專案，從 0 到 1 建立整個產品的設計體系。母子基金是基金交易中最複雜的設定類型：一個契約涉及 1 個母基金 + 最多 3 個子基金，每個子基金都有獨立的轉申購設定、停利條件、智能加碼策略。

設計挑戰：如何將這種複雜性轉化為直觀的用戶介面，是這個專案最大的設計挑戰。

設計思考的成長

透過這個專案深度理解了：金融產品的設計不只是介面美化，而是需要深度理解業務邏輯、用戶心理、風險控制的系統性設計工程。

核心洞察：每一個看似簡單的按鈕背後，都可能涉及複雜的商業規則和法規要求。

三年專案的設計挑戰：50+ 個頁面的一致性維護

挑戰規模

專案週期：三年多
頁面數量：50+
變更頻率：每週需求更新

解決方案

採用 Atomic Design 架構
原子組件可重用設計
業務元件標準化

實際效果

一次修改全站同步
維持設計一致性
快速響應變更需求

設計能力的拓展

從這個專案開始，我具備了處理高複雜度 B2C 產品的設計能力：

將複雜的業務邏輯轉化為直觀的用戶操作流程
在有限的螢幕空間內有效組織大量資訊
透過分步驟引導和即時提示，讓不同投資經驗的用戶都能順利完成操作

專案價值與影響

這個專案不僅是介面設計，更是對金融服務數位化轉型的深度思考和實踐：

已建立：完整的金融產品設計方法論
已驗證：原子設計系統在大型專案中的價值
已累積：處理複雜 B2C 產品的設計經驗
已深化：對金融業務和用戶需求的理解