永續監控平台
Sustainable Monitoring
Platform
專案背景
該平台是鴻海集團內部推動 ESG 合規與目標達成的可視化儀表板，設計目的為協助企業高層快速掌握集團在「碳足跡管理」、「永續指標追蹤」與「法規遵循」上的實際進展。
專案問題
ESG 涉及跨地區、跨事業群、年度總覽等區塊，每個事業群底下又需要有年度碳排、能源、水資源、廢棄物等總覽，資料龐雜且來源分散。
在既有流程中，管理層需仰賴手動彙整報表，不易掌握即時數據與進度落差，因此我們的任務是建立一套集中式的 ESG 監控平台，強化數據視覺化與目標達標追蹤機制。
設計流程
Design Process
使用者研究
User Research
定義問題
Problem Definition
1. 數據分散且缺乏即時性
ESG 資料分散於各部門與事業群，需透過人工彙整彙報，延遲高層掌握進度的時效性。
2. 視覺架構缺乏一致性
現有報表與視覺化方式各部門各自為政，缺乏統一的分類邏輯與呈現規則，導致跨部門理解落差大。
3. 缺少可複用的設計資產
沒有標準化的儀表板結構與元件庫，後續新專案或不同廠區部署需要從零開始，耗時耗力。
設立目標
Design Goals
1. 集中化 ESG 指標管理
透過訪談與觀察，我們發現高層在現有流程中需要跨多部門收集報表，數據延遲且全局掌握困難，我們將集中所有事業群的年度目標與法規遵循狀態於單一平台，縮短資訊傳遞鏈路。
2.提升即時異常識別能力
針對缺乏快速風險判斷機制的痛點，新增警示色彩、圖示與數值波動提醒，讓管理層能第一時間察覺異常狀況並啟動應對。
3.優化指標切換與比較體驗
目前跨指標、跨年度的數據比較流程過於繁瑣，重新設計指標篩選與切換介面，支援多維度對照與趨勢檢視。
4. 模組化儀表板設計
使用者需要靈活的資訊呈現方式，我們決定建立可複用的圖表模組與資訊結構，方便未來快速擴充或部署至不同廠區與業務單位。
設計原則
Design Principles
一致性 Consistency
所有 ESG 指標的呈現方式、圖表樣式、標籤顏色與警示符號必須保持一致，讓使用者能快速理解資料意義並減少學習成本。
清晰可讀 Clarity
優先顯示最關鍵的年度目標、達成進度與異常狀態，並以簡潔的圖形化語言呈現，避免使用者陷入資訊雜訊。
易達成 Achievability
儀表板功能必須支援快速篩選、切換指標與跨年度比較，並提供可操作的數據下載或會議分享方式，確保設計不只是美觀，而是實際可用。
可擴展性 Scalability
採用模組化架構與元件庫設計，確保平台可快速複製到其他事業群或廠區，並能隨 ESG 準則更新輕鬆調整。
設計產出
Design Deliverables
1. 資訊層級與結構
總部頁面設計
第一版設計所有指標數據分類堆疊在同一個層級，除了下拉選單一打開長長一串，第❶個問題是中央總覽同層級的事業群頁面切換的問題，最一開始使用者反饋認知上會認為事業群在中央層級之下，需要有更明確切割。
第❷個問題則是要能在首頁一次性展示所有年度總覽，同時要能輪播展示的需求，最終選擇Accordion形式去對應符合且有設計感的要求。
第❸個問題是要解決其他頁面入口管道，還有提示使用者當前位置，使用Mega Menu 以大面積區塊同時呈現更多資訊與分類，讓使用者一眼掌握網站架構，並能快速跳轉至所需區域，有效降低尋路成本並提升導覽效率。
事業群頁面設計
在事業群流程設計上還需涉及權限不同而須減少哪些內容的界定，總權限有全覽所有事業群的功能，要再針對個別事業群可以透過中控按鈕進入，因為資訊位置排版有規範，模組化的元件也因為樣式固定，即使圖表和數據有頁面跳轉有變化，但有些使用者辨識不出差異而誤會頁面無跳轉或是沒回應，而感到不耐煩或是怒氣，為了讓使用者有意識進入另一個頁面，我藉由交互動畫的設計和替換背景來暗示使用者。
2. 視覺呈現與可讀性
這樣的改造讓使用者能在 3 秒內辨識風險與亮點，大幅降低判讀門檻，並且提升會議與決策效率。
3. 數據模組化與複用性
在過去，每個部門的數據畫面都需要重新設計，不僅耗費時間，也容易造成資訊呈現不一致，讓使用者在跨系統操作時感受到割裂。為解決這個問題，我們將常用的圖表種類進行模組化，並依據不同產品性質制定清晰的資訊佈局慣例，讓使用者在切換不同場景時維持熟悉的操作體驗，大幅降低學習成本。
在前期規劃模組化元件和佈局，不僅能快速複用於不同專案並推動，還能確保視覺與操作邏輯的統一。
4.加入AI快速生成動態設計
各事業群需要代表各事業群的動態展示，但時程緊迫。透過導入 AI 生成工具，我能快速產出多版本樣稿，讓團隊更快收斂方向，並縮短設計週期，確保在短時間內交付符合品牌科技感的成果。
設計成果
Outcome
1. 提升溝通效率
儀表板設計完成後，團隊能以高擬真畫面為共同語言進行討論，減少跨部門對 ESG 指標理解落差，加快會議與決策效率。
2. 加快設計開發流程
定義平台產品的元件庫與 UI 模板，工程思維帶進設計，讓設計跟前端對接的流程更順暢，也為後續的專案擴充與複製節省大量時間，為後續製作的環保平台減少約45%元件搭建時間。
3.強化組織對設計策略的認知
專案促進設計團隊與永續部門協作，將UX納入ESG治理流程，提升內部對「UX為集團提供大幅價值」的重視度。
這個專案雖然不像大型商業產品那樣好幾年打磨同一個產品，但我們依舊在有限的時間內面臨了不少挑戰。設計過程更著重在畫面設計表現與資訊編排的精準度，以及如何在短期內透過幾次快速迭代，把使用者體驗打磨到順暢清晰。
我們必須在極短時間內不斷嘗試不同方案、收斂風格方向，並快速與團隊討論落地可行性。這也讓我意識到即使不是長週期的產品開發，設計的價值仍然在於如何把複雜的需求轉化為直觀的解法。
過程中，我學到兩件事特別重要，第一，專注在使用者最在意的痛點上，避免過度追求完整性導致浪費時間；第二，跨部門的快速對齊能讓設計更快推進，不必陷入無止境的討論。雖然挑戰緊湊，但這樣的節奏也訓練我更敏銳地判斷設計優先級，再仍然有許多不確定性的討論中仍然可以推進進度，並在短時間內交付能帶來實際價值的成果。
☞ More Projects
HHTD24
設計系統
廢棄物管理平台
廟宇App