最佳化碳排管理流程:讓數據更精準、管理更輕鬆

最佳化碳排管理流程:讓數據更精準、管理更輕鬆

B2B

SaaS

永續產品

資料庫管理

負責範圍

問題定義

流程設計

介面最佳化

交付規範

PRD 實作

專案總覽

為解決現有碳排係數資料庫管理流程中的資料混亂與錯誤問題,我規劃了 PCF(Product Carbon Footprint) 係數管理資料庫的介面與資訊架構最佳化專案。

目標透過清晰的權限設計與新增佐證資料及排放係數誤差等級欄位,簡化資料填寫步驟,降低資料誤填風險,並有效提升整體數據的準確性與稽核效率。

本專案分為三個主要階段,包含問題定義、資料庫結構設計以及使用流程介面優化,全面提升使用者體驗與碳排管理效率。

專案成果與影響

本次專案已完成完整設計交付,並於團隊開發階段順利落地。目前尚在導入與內部測試期間,實際數據成效仍待觀察。

我在初期規劃階段即與 CSM 明確對齊專案目標,並以以下兩項成功指標作為核心設計準則:

  • 使用者是否能更直覺地設定與管理係數,減少反覆溝通與手動校正的情況?

  • 活動數據填寫員是否能更快速準確地找到所需係數,降低誤填與跨部門詢問成本?

為此,我最佳化了係數分類對齊邏輯、資訊命名與欄位結構與強化篩選機制,提升填寫與維護流程的清晰度與效率。

後續我也有規劃與 CSM 團隊合作進行使用回饋收集,並根據行為數據追蹤使用流程是否如預期順暢,作為未來迭代的依據。

我們如何透過權限與資訊設計的清晰化,讓資料填報過程更直覺且低風險?

我們如何透過權限與資訊設計的清晰化,讓資料填報過程更直覺且低風險?

我們如何透過權限與資訊設計的清晰化,讓資料填報過程更直覺且低風險?

專案背景

因應內部 PoC 與德國萊茵 2025 年稽核建議,我們發現現有碳排填報流程不直覺,導致使用者需反覆跨區域操作,增加資料錯誤與稽核風險。



此外,考量此產品未來也將服務外部企業用戶,因此設計時我特別著重於欄位視覺層級、操作引導與資訊結構,期望降低外部新用戶初次操作時的認知負擔,提升資料填報的準確性與體驗一致性。

問題定義

多數使用者透過 App 訂閱服務,造成公司需支付高額手續費。

既有 WebPay 流程複雜,內容資訊分散、視覺層級不清,也使轉換率偏低,核心問題在於:

問題 1

係數佐證資料與排放係數誤差等級未集中管理

問題 2

資料填寫重複、易誤填,且權限不清晰,導致管理混亂

觀察痛點

觀察痛點

觀察痛點

觀察痛點

新增/編輯係數彈窗頁面

1

欄位資訊無分層,認知成本高

所有欄位在視覺上呈現為同等重要,未根據「填寫優先順序」或「資料屬性類型」進行分組。

使用者需自行判斷哪些是關鍵輸入欄位,增加理解與填寫成本。

2

無視覺聚焦與步驟導引機制

畫面採平鋪式設計,缺乏階段感對於需要專注在特定任務的用戶來說,體驗缺乏引導。

3

顏色定義混用,易造成認知錯誤

紅色同時用於表示「錯誤提示」與「必填欄位」語意混淆,易讓使用者誤判填寫狀態。

觀察痛點

觀察痛點

數據填寫頁面

1

欄位命名模糊,影響用戶判斷與填寫準確性

例如同為「佐證資料」的欄位,實際上有區分為「係數佐證」與「運輸佐證」,但舊版皆統稱為「佐證」,缺乏語意清晰度,導致用戶難以正確理解欄位用途,進而影響資料填寫正確率與稽核效率。

2

係數選擇介面資訊混亂

缺乏清楚的欄位結構與分群方式,用戶難以判斷每筆係數的來源、適用條件與資料可信度。

3

分類操作邏輯與資料庫不一致

在填報頁面選擇係數分類的行為邏輯,與係數資料庫中設定與使用方式不同,造成使用者認知斷裂,影響操作流暢性與選擇準確度。

觀察痛點

觀察痛點

查證模式頁面

1

元件使用不一致,降低操作預期

產品中雖套用 Ant Design,但 Tabs 與其他模組使用方式不統一,造成使用者在不同模組間需重新適應操作方式,缺乏學習遷移性。

設計產出與成果

流程規劃與權限邏輯設計

區分權限角色

例如同為「佐證資料」的欄位,實際上有區分為「係數佐證」與「運輸佐證」,但舊版皆統稱為「佐證」,缺乏語意清晰度,導致用戶難以正確理解欄位用途,進而影響資料填寫正確率與稽核效率。

盤點操作入口

整合各項填寫與維護入口,避免使用者在多點之間跳轉或操作混亂。

強化任務銜接

釐清從係數維護到實際使用的流程節點,確保資料與任務的前後一致性。

識別匯入流程盲點:從權限設計到資料完整性控管

高權限控管,確保資料正確性

係數屬於關鍵碳排計算依據,為避免誤用與篡改,設計上僅限管理者層級新增與維護。

匯入操作簡化,但資料驗證難以控管

用戶可透過 Excel 一鍵匯入大量資料,雖降低了操作門檻,卻也隱含資料缺漏風險。

佐證資料常有遺漏,難以即時掌握

系統目前缺乏針對「缺少佐證」的即時標示或篩選機制,用戶無法快速確認哪些資料仍不完整。

影響下游指派與進度追蹤

當係數資料未補齊佐證時,後續在「活動填報指派」流程中無法順利完成填寫,造成流程中斷或延誤。

補強資料追蹤效率

為協助使用者快速掌握哪些係數資料尚未補齊佐證,我設計了「佐證上傳狀態」的篩選功能,提供以下 2 種篩選條件:

  1. 僅顯示未上傳佐證資料:
    用於快速盤點缺漏項目,方便用戶補件與追蹤進度。

  1. 僅顯示已上傳佐證資料:
    用於管理者稽核、確認資料是否齊備或進行交付。

表單結構優化:降低欄位填寫認知負擔

為避免使用者在面對大量欄位時產生橫向掃視與操作困難,我將「建立新係數」表單依照資料性質進行欄位分組,並採用單欄直式排列,讓使用者視線能自然地由上而下流動,減少左右尋找欄位的視覺負擔與填寫遺漏風險。

此設計提升了資料填寫的清晰度與流程節奏感,特別有助於首次使用者在不熟悉內容邏輯下也能快速理解並正確完成輸入。

欄位清整與填寫體驗最佳化

在數據填寫頁面中,我重新盤點所有欄位,釐清哪些屬於使用者需主動填寫、哪些可由系統自動帶出並呈現,以此規劃合理的欄位排列順序與顯示邏輯。

同時,為避免 placeholder 文案重複或模糊不清,我根據欄位類型重新設計指引語句,幫助使用者更明確理解每個欄位的目的與輸入期待,進一步降低填寫錯誤與認知成本。

重設係數選取邏輯,提升判讀效率

為解決使用者在選取係數時資訊混亂、類別判斷不一致的問題,我重新設計了係數選取選單:

  • 操作邏輯與資料庫分類對齊:


    選取類別的邏輯與係數資料庫結構一致,減少使用者理解成本。

  • 資訊結構標題化:


    為每筆係數資料加上明確欄位標題,幫助使用者快速辨識與比較。

  • 支援查看詳細資訊:


    依實際需求,設計展開動作可查看完整係數資訊,提升操作靈活性與準確性。

強化元件一致性與資料審核體驗

Tabs 元件設計遵循 Ant Design 的層級結構原則,統一樣式與切換行為,讓使用者在瀏覽不同類型資料時能清楚了解資訊層級與內容對應邏輯。

由於此頁面主要服務第三方查證單位,讓使用者在不切換頁面的情況下即可完成數據與佐證影像比對,大幅提升審核效率與資訊判讀的清晰度。

反思與學習

不同觀點討論中尋找平衡

我深知規劃明確與共識建立對專案推進的重要性,因此在此次專案中,主動與 CSM 夥伴深入了解產品現況與使用端的執行挑戰,協助團隊在有限資源下聚焦關鍵問題,並將討論內容整理為具體可執行的 PRD 文件。

同時我也更加體會到,設計交付不只是產出介面,更是建立跨部門理解、傳遞邏輯與維持一致性的關鍵節點。

因此我持續最佳化訊息整理方式,將每次會議結論落實為清楚的文件紀錄,幫助團隊有效對齊並追溯設計脈絡,讓每項成果都有據可循。

這段經驗讓我更加成熟地思考設計在團隊中扮演的角色,也提升了我在規劃、協作與交付品質上的整體能力。

得到反饋

偉傑是一位有創造力且熱情的設計師,他時常有許多獨特觀點,同時也能兼顧設計系統與整體視覺一致性。他幫助團隊建立各種設計文件格式展現了他對於細節的重視與用心,如果你的團隊需要一位專注細節、追求完美的設計師,他是一位好的人選。

林思廷

產品總監

偉傑是一位有創造力且熱情的設計師,他時常有許多獨特觀點,同時也能兼顧設計系統與整體視覺一致性。他幫助團隊建立各種設計文件格式展現了他對於細節的重視與用心,如果你的團隊需要一位專注細節、追求完美的設計師,他是一位好的人選。

林思廷

產品總監

偉傑是一位有創造力且熱情的設計師,他時常有許多獨特觀點,同時也能兼顧設計系統與整體視覺一致性。他幫助團隊建立各種設計文件格式展現了他對於細節的重視與用心,如果你的團隊需要一位專注細節、追求完美的設計師,他是一位好的人選。

林思廷

產品總監