Multi-CDN Dashboard
Multi-CDN Dashboard
透過漸進式的資訊分層，打造由廣至深的監控體驗
透過漸進式的資訊分層，打造由廣至深的監控體驗
執行時間
2025.09 - 2026.01
2025.09 - 2026.01
產品使用平台
Web
Web
使用工具
Figma
Figma
服務公司
Mlytics
Mlytics
專案背景
專案背景
專案背景
首頁應是使用者掌握產品效能的第一站，但現行設計未能有效傳遞核心價值。
・資訊不透明： 缺乏關鍵指標，無法滿足客戶「一眼掌握現況」的需求。
・被動服務： 客戶遇到問題無法自助排查，高度依賴維運團隊人工解答。
・專案目標： 透過數據可視化提升透明度，賦予客戶自主判斷能力。
首頁應是使用者掌握產品效能的第一站，但現行設計未能有效傳遞核心價值。
・資訊不透明： 缺乏關鍵指標，無法滿足客戶「一眼掌握現況」的需求。
・被動服務： 客戶遇到問題無法自助排查，高度依賴維運團隊人工解答。
・專案目標： 透過數據可視化提升透明度，賦予客戶自主判斷能力。
首頁應是使用者掌握產品效能的第一站，但現行設計未能有效傳遞核心價值。
・資訊不透明： 缺乏關鍵指標，無法滿足客戶「一眼掌握現況」的需求。
・被動服務： 客戶遇到問題無法自助排查，高度依賴維運團隊人工解答。
・專案目標： 透過數據可視化提升透明度，賦予客戶自主判斷能力。
專案挑戰
專案挑戰
專案挑戰
在有限資源下，平衡「數據深度」與「整合成本」，包括：
・資料標準化難題： 需串接多家 CDN 供應商，定義統一的數據規範。
・成本效益考量： 全面撈取數據成本過高，需精算傳輸與解析的成本效益。
・策略規劃： 收斂出最具價值的 MVP 數據範圍，將開發效益最大化。
在有限資源下，平衡「數據深度」與「整合成本」，包括：
・資料標準化難題： 需串接多家 CDN 供應商，定義統一的數據規範。
・成本效益考量： 全面撈取數據成本過高，需精算傳輸與解析的成本效益。
・策略規劃： 收斂出最具價值的 MVP 數據範圍，將開發效益最大化。
在有限資源下，平衡「數據深度」與「整合成本」，包括：
・資料標準化難題： 需串接多家 CDN 供應商，定義統一的數據規範。
・成本效益考量： 全面撈取數據成本過高，需精算傳輸與解析的成本效益。
・策略規劃： 收斂出最具價值的 MVP 數據範圍，將開發效益最大化。
角色產出
角色產出
角色產出
我擔任 Product manager 及 Product designer 的角色，負責從定義問題、使用者訪談、規劃專案範圍架構、時程安排、資源分配、產品設計至最終交付設計、安排部署上線，規劃、參與全部的產品開發流程，並與一位 Product Owner、兩位前、後端工程師及一位 QA 密切合作
我擔任 Product manager 及 Product designer 的角色，負責從定義問題、使用者訪談、規劃專案範圍架構、時程安排、資源分配、產品設計至最終交付設計、安排部署上線，規劃、參與全部的產品開發流程，並與一位 Product Owner、兩位前、後端工程師及一位 QA 密切合作
我擔任 Product manager 及 Product designer 的角色，負責從定義問題、使用者訪談、規劃專案範圍架構、時程安排、資源分配、產品設計至最終交付設計、安排部署上線，規劃、參與全部的產品開發流程，並與一位 Product Owner、兩位前、後端工程師及一位 QA 密切合作
從過往的使用者訪談洞察優化方向👀
從過往的使用者訪談洞察優化方向👀
從過往的使用者訪談洞察優化方向👀
使用者研究👀
使用者研究👀
使用者研究👀
透過內部維運團隊的使用者訪談了解現況
透過內部維運團隊的使用者訪談了解現況
透過內部維運團隊的使用者訪談了解現況
因為是 B2B 產品的關係，內部維運團隊為最主要的產品使用者，所以從過往多次的內容中我發現了以下問題
因為是 B2B 產品的關係，內部維運團隊為最主要的產品使用者，所以從過往多次的內容中我發現了以下問題
因為是 B2B 產品的關係，內部維運團隊為最主要的產品使用者，所以從過往多次的內容中我發現了以下問題
數據資料不齊全，需要靠其他工具輔助作業
數據資料不齊全，需要靠其他工具輔助作業
當要幫客戶處理問題時第一時間不是來到我們的產品頁面而是使用額外的數據工具看，因為在這邊找不到所需要的資訊
當要幫客戶處理問題時第一時間不是來到我們的產品頁面而是使用額外的數據工具看，因為在這邊找不到所需要的資訊
客戶無法從頁面找到可以預估已使用花費的數據
客戶無法從頁面找到可以預估已使用花費的數據
最常遇到的問題就是客戶來反應為什麼花費暴增、該如何自己計算已使用流量花費的問題，若是能提供更多資訊可以減少人工處理的負擔
最常遇到的問題就是客戶來反應為什麼花費暴增、該如何自己計算已使用流量花費的問題，若是能提供更多資訊可以減少人工處理的負擔
幾乎沒有客戶會使用產品後台，遇到問題都是直接找維運客服
幾乎沒有客戶會使用產品後台，遇到問題都是直接找維運客服
客戶沒辦法在進入後台後馬上找到所需資訊，再加上數據不充足，所以通常會直接詢問維運客服查看、排解問題
客戶沒辦法在進入後台後馬上找到所需資訊，再加上數據不充足，所以通常會直接詢問維運客服查看、排解問題
該如何在時間、人力資源有限的情況下有效的做出最大的優化🧐
該如何在時間、人力資源有限的情況下有效的做出最大的優化🧐
該如何在時間、人力資源有限的情況下有效的做出最大的優化🧐
設計策略🛠
設計策略🛠
設計策略🛠
應用原本的產品架構改變數據的粒度
應用原本的產品架構改變數據的粒度
應用原本的產品架構改變數據的粒度
針對不同利害關係人，採用「分層揭露」的設計策略，對客戶提供宏觀的健康度概覽，對維運人員提供微觀的除錯細節
針對不同利害關係人，採用「分層揭露」的設計策略，對客戶提供宏觀的健康度概覽，對維運人員提供微觀的除錯細節
針對不同利害關係人，採用「分層揭露」的設計策略，對客戶提供宏觀的健康度概覽，對維運人員提供微觀的除錯細節
對於客戶
無法快速了解網站效能狀態
針對不同角色提供由大至小的數據粒度資料
對於維運人員
無法透過自家產品進行問題排查
優化數據豐富度以利應用於維運工作
對於我們
後台使用率低，客戶仰賴維運人員協助
呈現更多客戶網站效能讓客戶看到產品價值
對於客戶
對於維運人員
對於我們
痛點
無法快速了解網站效能狀態
無法透過自家產品進行問題排查
後台使用率低，客戶仰賴維運人員協助
策略
針對不同角色提供由大至小的數據粒度資料
優化數據豐富度以利應用於維運工作
呈現更多客戶網站效能讓客戶看到產品價值
對於客戶
對於維運人員
對於我們
痛點
無法快速了解網站效能狀態
無法透過自家產品進行問題排查
後台使用率低，客戶仰賴維運人員協助
策略
針對不同角色提供由大至小的數據粒度資料
優化數據豐富度以利應用於維運工作
呈現更多客戶網站效能讓客戶看到產品價值
設計原則🛠
設計原則🛠
設計原則🛠
化繁為簡，打造直覺且高效的監控體驗
化繁為簡，打造直覺且高效的監控體驗
化繁為簡，打造直覺且高效的監控體驗
應用原有架構呈現漸進式的資訊揭露
應用原有架構呈現漸進式的資訊揭露
應用原有架構呈現漸進式的資訊揭露
面對龐雜的 CDN 節點數據，避免一次性倒給使用者。採用「由廣至深」的資訊架構，從 Account 的全域健康度層層遞進至 Domain 的技術細節，確保不同角色的使用者都能在對應層級，無痛獲取所需資訊。
面對龐雜的 CDN 節點數據，避免一次性倒給使用者。採用「由廣至深」的資訊架構，從 Account 的全域健康度層層遞進至 Domain 的技術細節，確保不同角色的使用者都能在對應層級，無痛獲取所需資訊。
面對龐雜的 CDN 節點數據，避免一次性倒給使用者。採用「由廣至深」的資訊架構，從 Account 的全域健康度層層遞進至 Domain 的技術細節，確保不同角色的使用者都能在對應層級，無痛獲取所需資訊。
決策導向的視覺呈現
決策導向的視覺呈現
決策導向的視覺呈現
儀表板的核心在於「判讀」而非單純「展示」。透過強化關鍵指標與異常狀態的視覺權重，協助使用者在 3 秒內識別潛在風險，從「被動查看」轉為「主動解決問題」。
我們的客戶原本都仰賴著 Shopify App 內的各個 App 來滿足客製化的服務需求，但每個 App 之間又或者是與 Shopify 之間其實都會有互相牽制的可能，導致客戶無法打造最佳的銷售體驗來達到最好的銷售額。
我們的客戶原本都仰賴著 Shopify App 內的各個 App 來滿足客製化的服務需求，但每個 App 之間又或者是與 Shopify 之間其實都會有互相牽制的可能，導致客戶無法打造最佳的銷售體驗來達到最好的銷售額。
設計產出📐
設計產出📐
設計產出📐
利用產品架構特性打造不同粒度的數據深度
利用產品架構特性打造不同粒度的數據深度
利用產品架構特性打造不同粒度的數據深度
以最小實作範圍為原則創造出全新數據視野
以最小實作範圍為原則創造出全新數據視野
以最小實作範圍為原則創造出全新數據視野
應用層級創造出由大至小、由廣範至細微的數據層次，讓不同的角色能夠快速查看所需內容
應用層級創造出由大至小、由廣範至細微的數據層次，讓不同的角色能夠快速查看所需內容
應用層級創造出由大至小、由廣範至細微的數據層次，讓不同的角色能夠快速查看所需內容
豐富數據內容提升產品價值能見度
豐富數據內容提升產品價值能見度
豐富數據內容提升產品價值能見度
過往的數據單一，無法讓使用者在進入產品後快速了解效能狀態
過往的數據單一，無法讓使用者在進入產品後快速了解效能狀態
過往的數據單一，無法讓使用者在進入產品後快速了解效能狀態
Before
After
應用多樣化圖表介面有效視覺化數據
應用多樣化圖表介面有效視覺化數據
應用多樣化圖表介面有效視覺化數據
賦予使用者即時判讀現況與自主排查的能力
賦予使用者即時判讀現況與自主排查的能力
01.
01.
關鍵指標視覺化
關鍵指標視覺化
將核心效能數據置頂並放大，建立「健康度儀表板」，讓用戶登入後的 3 秒內即能判斷服務是否正常運行。
我們的客戶原本都仰賴著 Shopify App 內的各個 App 來滿足客製化的服務需求，但每個 App 之間又或者是與 Shopify 之間其實都會有互相牽制的可能，導致客戶無法打造最佳的銷售體驗來達到最好的銷售額。
我們的客戶原本都仰賴著 Shopify App 內的各個 App 來滿足客製化的服務需求，但每個 App 之間又或者是與 Shopify 之間其實都會有互相牽制的可能，導致客戶無法打造最佳的銷售體驗來達到最好的銷售額。
02.
02.
趨勢與異常識別
趨勢與異常識別
不只呈現當下數值，更導入時間維度的折線圖。協助用戶識別流量波動趨勢，快速抓出異常峰值發生的時間點。
我們的客戶原本都仰賴著 Shopify App 內的各個 App 來滿足客製化的服務需求，但每個 App 之間又或者是與 Shopify 之間其實都會有互相牽制的可能，導致客戶無法打造最佳的銷售體驗來達到最好的銷售額。
我們的客戶原本都仰賴著 Shopify App 內的各個 App 來滿足客製化的服務需求，但每個 App 之間又或者是與 Shopify 之間其實都會有互相牽制的可能，導致客戶無法打造最佳的銷售體驗來達到最好的銷售額。
03.
03.
豐富數據幫助問題排查
豐富數據幫助問題排查
新增 HTTP Status Error Code 分佈圖，讓維運人員與高階用戶能直接從錯誤代碼（如 4xx, 5xx）初步診斷問題根源，減少來回溝通成本。
我們的客戶原本都仰賴著 Shopify App 內的各個 App 來滿足客製化的服務需求，但每個 App 之間又或者是與 Shopify 之間其實都會有互相牽制的可能，導致客戶無法打造最佳的銷售體驗來達到最好的銷售額。
我們的客戶原本都仰賴著 Shopify App 內的各個 App 來滿足客製化的服務需求，但每個 App 之間又或者是與 Shopify 之間其實都會有互相牽制的可能，導致客戶無法打造最佳的銷售體驗來達到最好的銷售額。
成果與下一步
成果與下一步
重塑信任與提升維運效率
重塑信任與提升維運效率
改版後的 Dashboard 成功解決了資訊不透明的痛點，為內外部帶來了實質改變。維運團隊反饋：「新的 Status Code 分佈圖大幅縮短了排查時間，現在接獲報修時能即時確認異常，無需再額外使用別的工具。」同時，清晰的數據指標也讓非技術背景的客戶能一眼掌握服務健康度，有效重建了客戶對產品的信任感，並顯著降低了被動詢問的頻率。
改版後的 Dashboard 成功解決了資訊不透明的痛點，為內外部帶來了實質改變。維運團隊反饋：「新的 Status Code 分佈圖大幅縮短了排查時間，現在接獲報修時能即時確認異常，無需再額外使用別的工具。」同時，清晰的數據指標也讓非技術背景的客戶能一眼掌握服務健康度，有效重建了客戶對產品的信任感，並顯著降低了被動詢問的頻率。
從被動查詢走向主動監控
從被動查詢走向主動監控
本次設計在「數據豐富度」與「開發成本」之間取得了最佳平衡，經驗證 MVP 架構已能精準涵蓋 80% 的常見查詢需求。展望未來，我們計劃將產品定位從「被動的數據展示」升級為「主動的風險監控」，預計引入自定義告警辨識功能，讓系統在流量異常時主動通知用戶，並利用自然語言搜尋與 AI 智慧解釋，自動摘要 Log 並判讀根因，協助解決剩餘 20% 的複雜難題進一步完善 B2B 產品的自動化體驗。
本次設計在「數據豐富度」與「開發成本」之間取得了最佳平衡，經驗證 MVP 架構已能精準涵蓋 80% 的常見查詢需求。展望未來，我們計劃將產品定位從「被動的數據展示」升級為「主動的風險監控」，預計引入自定義告警辨識功能，讓系統在流量異常時主動通知用戶，並利用自然語言搜尋與 AI 智慧解釋，自動摘要 Log 並判讀根因，協助解決剩餘 20% 的複雜難題進一步完善 B2B 產品的自動化體驗。