Morningstar 金融客戶 UI/UX 重建專案

專案概述

重建金融服務界面，統一設計系統

負責 Morningstar 企業元件客戶遷移專案的 UI/UX 設計工作，需要重建多套金融服務界面，服務香港主要上市銀行、指標保險集團、國際金融機構等客戶。

多套

金融服務界面

4 種

不同界面系統

統一

設計系統

我的角色

Product Designer

負責整體界面設計與團隊協作

專案時間

2024年5月開始

在緊迫期限下完成界面重建

專案背景

為什麼需要重建界面？

平台整合需求

Morningstar 需要將多個客戶的服務整合到統一平台，要求界面的一致性和標準化。

用戶體驗統一

現有的多套界面系統設計語言不一致，需要建立統一的用戶體驗標準。

設計挑戰

需要在緊迫的時間壓力下，重建多套不同的金融服務界面，並確保每個客戶的品牌識別和使用習慣在新界面中得到保留。

• 4 種不同的界面系統需要統一設計語言
• 金融功能的複雜性要求專業的 UX 設計
• 多語言界面（繁中、簡中、英文）的一致性
• 各客戶品牌客製化需求的平衡

核心設計挑戰

技術架構複雜性

4 種不同技術架構：

Type A - .NET + SQL Server（客製化解決方案）
Type B - Vue.js 元件（客戶自託管）
Type C - IWT 模組（Morningstar 託管）
Type D - Vue.js 元件（Morningstar 託管）

每種架構都有不同的安全認證機制、數據來源和託管需求，需要個別設計遷移策略。

客戶體驗一致性

零學習成本 - 用戶操作習慣不能改變
多語言支援 - 繁中/簡中/英文界面
品牌客製化 - 每家銀行都有自己的 CI/VI 需求
合規要求 - 金融業的嚴格安全標準

關鍵約束：遷移過程中不能影響任何一家銀行的日常營運，因為金融服務的中斷會直接影響客戶交易。

設計解決方案

分類遷移策略

低風險遷移 (Type A)

策略：直接移植原始碼到新平台

適用：中銀香港、南洋商業銀行等 8 家客戶

中風險重建 (Type B/C/D)

策略：重新開發，保持功能一致性

適用：工銀亞洲、星展銀行等 11 家客戶

統一設計系統

元件標準化

• 基金篩選器 (Screener)
• 排名表格 (Ranking Table)
• 比較工具 (Compare)
• X-Ray 分析

認證機制

• 無縫登入 (Seamless Login)
• Token 驗證
• 客製化管理後台

視覺一致性

• 響應式設計框架
• 多品牌客製化支援
• 多語言界面標準

執行流程

1

現況分析

盤點 19 家客戶的技術架構與功能需求

2

風險評估

依據客戶信心度排定遷移優先序

3

分階段遷移

從高信心客戶開始，逐步完成遷移

4

測試驗證

多環境測試確保功能完整性

專案成果

設計交付物

✅ 統一的金融界面視覺語言
✅ 可重用的 UI 組件庫
✅ 支援多品牌客製化的設計框架
✅ 完整的遷移技術規格文檔

專案影響

🎯 19 家金融機構順利遷移
🎯 建立 Morningstar 與 Systemweb 合作模式
🎯 降低後續維護與更新成本
🎯 提升系統穩定性與安全性

關鍵學習

這個專案讓我深度理解了大規模系統遷移的複雜性，特別是在金融業的嚴格要求下。學會如何在技術限制與用戶需求之間找到平衡點，以及如何設計向下相容的解決方案。最重要的是，體會到在B2B專案中風險管控比創新更為重要。

專案反思與學習

專案經驗與學習

大規模界面重建經驗：負責多套金融服務界面的設計工作，學習如何在大型專案中建立一致性

專業成長

金融界面設計專業：深入了解金融產品的界面需求和用戶使用情境
設計系統建立：學會建立可擴展的設計規範和組件庫
專案管理能力：在時間壓力下合理分配設計資源和工作優先級