以儀表板讓客戶看見產品創造的價值|Turing Certs
Turing Certs 的發證機構後台原本只能看到零散數據,難以判斷發證成效 我重新設計首頁資訊架構,將後台升級為以 KPI 為核心的監控儀表板,讓設計決策回應客戶真正關心的營運問題,增加產品價值
Impact
- 以客戶訪談與問卷結果定義儀表板數據優先度
- 把觀測和管理任務,拆成更清楚的儀表板層級
- 用趨勢與數據幫 B 端客戶看懂發證成效
背景

Turing Certs 是一個基於區塊鏈技術的數位憑證平台,連結發證方(企業/學校/機構)與收證方(個人用戶)
發證方透過平台發行防偽、可驗證的數位憑證給他們的用戶
但原有的後台儀表板只提供少數基礎資料(發證總量與一份明細列表),導致發證機構:
- 無法全面了解發證與領證的狀況與趨勢
- 難以評估發證成效
- 無法進一步利用數據做決策
從商業角度,這也是一個留存問題:一個看不出價值的後台,對於客戶續約無法提升誘因
因此這次改版的目標就是:透過有價值的數據洞見,提升儀表板的停留時間與產品黏性
挑戰

舊版首頁最大的問題,是它把兩種不同的使用者任務混在同一頁、數據對客戶是無價值資訊:
- 數據監控與列表管理混在同一頁
- 對發證機構來說,首頁的發證總數量與一長串發證明細,既不知道用途何在、呈現也不直觀
所以真正的挑戰有兩層:
- 該放什麼? 發證機構實際上在意哪些數據?哪些能幫他們評估成效、做決策?
- 怎麼放? 如何把數據組織成一眼就看懂,讓客戶從被動轉為主動洞察,而不是被一堆數字淹沒
設計策略與關鍵決策
設計前:用研究定義「該放什麼指標」



在動 UI 之前,我和 PM 一起規劃了調查,以確認儀表板放的是客戶真正關心的數據:
- 訪談重點客戶:以 2024 發證量前段、總發證量前段、加上 BD 推薦的客戶為對象(用贈送額度作為參與誘因),了解客戶的發證情境、在意的數字,以及證書發出後通常會關注什麼
- 問卷:回收約 24 家機構填答,直接問他們「最想在後台看到哪些證書數據」與「最想要什麼新功能」
研究結果得出:
多數客戶認為目前的儀表板數據沒有價值、也不會去看
最多人想看的數據是證書查看次數、領取率、收證者輪廓、減碳當量、社群分享數
這份研究讓我們的決策有依據可循,而不是憑直覺猜
A. 重新定義頁面層級,並讓角色分流

我的第一步,重新定義頁面的資訊層級
舊版把「數據」與「管理」兩種任務混在一起,有客戶提到
目前使用後台帳號分為兩個角色,上層者會關注數據、基層操作者負責管理發證的行為
因此我希望能把功能拆成兩層:
- 第一層級(首頁):定位為查看數據用的「監控儀表板」
- 第二層級(內頁):定位為操作用的「證書管理中心」(保留原本的證書群組管理表、剩餘額度,並讓發證完成後導向此頁查看發證進度)
讓首頁只負責查看狀況,內頁只負責操作,讓資訊操作分流、同時也可以讓角色分流
B. 打造以關鍵指標 KPI 為主體的儀表板首頁

我把頁面最寶貴的空間,留給用戶最關心的 發證量、證書查閱數、證書驗證數、減少碳排放量
並盡可能減少文案敘述、讓整體空間感更簡潔,只保留客戶能在 3 秒內就抓到的資訊
因為我希望用戶一進頁面就能立刻掌握最重要的營運數據,實現從被動查找到主動洞察的行為轉變
也希望更可以透過儀表板數據,讓用戶更了解產品的價值所在
C. 優化圖表與數據聯動,提升分析效率

我重新設計了圖表與數據列表的關係,把「發證量趨勢圖」與「貢獻排名列表(群組排名)」並排
用戶可以一邊看整體趨勢、一邊立刻看到各發證項目的數量貢獻,兩者互相對照,大幅提升數據的閱讀效率
設計取捨
- Stage 1 先聚焦可趨勢化的核心指標(發證量、查閱數、驗證數、碳排)
- 把研究中同樣高需求、但更偏深度分析的領取率細節、收證者輪廓、數據匯出留到 Stage 2,確保 v1 是一個完整且能盡快上線的體驗

- 配合商業模式設計
- 因應後期的 Free Plan 免費體驗版模式推出,儀表板也納入了 Basic / Premium 的分層思考,讓免費版使用者會因爲洞察數據而驅動訂閱

成效與反思

- 我們在儀表板進行 GA 埋點,事後檢測發現客戶停留於頁面的時間增長 50%
- 後期我們也進行了改版後訪談,多數客戶認為此次的改版非常有感
- 尤其「碳排放」數據更有用,可以讓他們用在 ESG 企業報告等處
![[UI/UX] 以儀表板讓客戶看見產品創造的價值|Turing Certs](/images/cc-dashboard/hero.webp)
![[UI/UX] 導入數位護照於產品|DNP 大日本印刷合作專案](/images/dnp-hotel/Cover.gif)
![[UI/UX] 用設計讓產品能自己賣|TCS 官網及儀表板設計](/images/tcs-dashboard/cover.gif)
![[Design System] SaaS 產品設計系統建置|Turing Certs](/images/design-system/cover.webp)
