提醒！本專案包含商業內部資訊，僅供審閱用途。請勿外流、轉載或轉傳，違者將依法追究責任。
專案名稱
CSMS 管理平台優化
2024/04- 2024/08
負責角色
UI/UX Designer
合作對象
前端工程師*1、後端工程師*4、PM*1
負責項目
介面流程、設計系統、系統教學影片
專案目標
聚焦於產品上線前的功能完備與操作流程優化，協助團隊推進產品商品化與市場推廣準備。
任務挑戰
除了設計複雜的 IoT 功能外，本專案亦需同步建立統一的設計語言與元件規範，以支撐產品快速擴張並維持一致的使用體驗與跨團隊協作效率。
成果及影響
「建置設計系統，統一元件規範與樣式，提升工程開發效率；同時完成企業客戶簽約並製作教學影片，奠定產品銷售與導入基礎。」
產品簡介
CSMS（Charging Station Management System）是一套為電動車充電樁營運商打造的後台管理系統，協助 CPO 高效掌握站點營運、設備狀態、會員管理與收費策略。
平台支援跨站點、多設備的即時監控與營運管理，幫助管理者集中控管場域，提升整體營運效率。
在公司兩週一個 Sprint 的開發節奏下，原先缺乏清晰的設計流程。我重新制定了團隊與設計的協作機制，讓需求探索到設計交付之間有更完整的流程。
商業目標
為加速產品上市，CSMS 當前的首要目標是支援業務團隊順利展開銷售。同時，我們也著手優化設計系統，提升元件一致性、互動樣式與操作邏輯。
基於此，我聚焦目前的設計挑戰，並提出兩項主要改善方向。
開始優化 CSMS 平台吧 !
完善產品核心功能 - 充電樁設定流程
CSMS 產品最重要的目標是為了讓使用者能更加方便管理充電站點與充電樁，在站點、充電樁、會員三個主要功能中，已完成了「站點設定」與「會員管理」，而尚未規劃完善的只剩下「充電樁管理」，下列將講述優化充電樁的操作流程。
需求釐清
CSMS 的使用者主要可分為兩類角色：「平台管理員」與「電樁設備工程師」
※ 本專案聚焦於 CSMS 平台的充電樁設定流程，EVCS 平台僅作背景說明，不作深入探討。
為何要優化充電裝流程?
新的優化改動簡單來說，就是讓充電樁設定流程，由 EVCS ( 充電樁地端平台 ) 轉移到 CSMS 平台 ( 雲平台 ) 管理。
Before
EVCS 設定為主
Aftre
CSMS 設定為主
現有介面分析
地端平台 EVCS 需逐一完成充電樁設定後，資料方可同步至 CSMS，導致更新延遲並影響整體管理效率。另外也發現現有介面仍有多處 UI 可優化之處，這些問題將於新流程規劃中一併調整與改善
1
選擇槍頭 (Gun) UI 樣式要與 Filter 一致，不該用 Radio Button。
2
搜尋框與表單欄位皆無法辨識 # 代表重要的 Charger ID。
3
Onboard Status 是很重的訊息，欄位顯示無明顯差異，會讓使用者無法快速區別安裝狀態。
4
充電樁不會只有兩個槍頭(Gun)，欄位顯示方式需調整。
設計提案與構想
PM 提供了初步構想與草圖，但實際設計執行階段，我主要依據自身過往在 B2B 工具與流程設計的經驗，主動梳理整體功能架構與 UI 邏輯。過程中不僅補全了流程細節，並重新定義充電樁在各階段的狀態標示方式，讓系統在實務操作中更具辨識性與可追蹤性。
1.新增功能與欄位調整
新增「Add Charger」功能，讓 CPO 可自行設定並管理充電樁資料。
在「Add Charger」表單中加入 Charger ID 與 Server URL 欄位，方便工程師複製資料以完成 EVCS 串接設定。
調整 Data Table 欄位順序，將「充電樁狀態」等關鍵欄位優先呈現，以提升資訊辨識效率與操作優先度。
2.充電樁狀態設計
針對各種狀態設計對應的顏色區分，並依據處理優先順序進行排序。
硬體限制
由於設備回傳機制受限，無法取得具體錯誤內容，只能以通用訊息顯示 Failed 與 Reject 狀態
3.優化操作體驗
現有表單僅能點擊整列進入設定，互動不夠直覺。
為提升使用體驗，在左側新增明確操作按鈕（編輯、刪除、檢視），並納入設計標準以確保一致性與易用性。
設計產出
1.表單欄位設計
Table Form 的欄位重要程度以左至右的依序為主。
將 CRUD 的操作功能置於最左側，讓操作更直覺。
狀態變化 - 更加直觀充電樁的安裝狀態。
讓複製 ID 和 URL 直接放置於介面操作，加速安裝流程。
2.充電樁設定
因應充電樁安裝過程的實際狀態去規劃詳細設定內容，針對不同狀態賦予顏色提醒，讓 CPO 快速能掌握地端電樁註冊狀態
設計前後對比
透過資訊結構重整與視覺強化，介面在易讀性與操作效率上顯著提升。優化後的欄位排序、狀態標示與功能操作按鈕更加清晰，讓使用者能更快速掌握充電樁配置狀況、篩選資料並進行管理。此外，我也藉由此次重新設計也一併調整了 UI 樣式，像是 Sidebar、Checkbox。
設計反饋
Charger List 優化後的回饋摘要（ 共訪談 5 位內部同仁 ）
良好回饋
安裝狀態清晰：階段視覺的狀態更快速辨識設定進度。
操作更順暢：將「複製 ID／URL」置於列表首層，操作直覺便捷。
視覺一致性提升：整體畫面設計更趨一致與美觀。
發現問題
排序機制問題：新建完成的充電樁無法即時顯示於列表中，需手動篩選才能找到，降低了查找效率。
URL 按鈕重複疑慮：「複製 URL」按鈕於每筆資料中皆重複顯示，使用者建議是否能簡化為全域操作方式。
綜合回饋結果，目前最需優化的是「 列表排序 」：原先依狀態排序，雖利於辨識異常，但實際使用時，使用者更關注新建完成的設備，因此將改為 依建立時間排序，確保新設備能即時曝光。至於 URL 與 ID，雖有重複按鈕，但因操作常需搭配，且位置相鄰、使用頻率高，故暫不調整。
Step 2 重建設計系統
在我接手專案後，發現產品目前有一項大問題，UI 元件樣式不一致的情況相當嚴重。無論是字體使用、按鈕樣式、輸入框設計，甚至狀態顏色等，皆缺乏統一性與標準，甚至是在檔案管理上也相當混亂。
漸進式優化元件
要大刀闊斧進行全面調整不太可能，因為會破壞現有的產品介面，所以我採取漸進式的優化策略——在每次新功能開發時，於各個 Sprint 中適時納入 UI 元件的優化項目，漸漸的丟出優化 UI Component 的內容，讓產品逐漸一致，同時也持續完善 Design Guideline，為設計與開發團隊建立更明確的一致性與規範依據。
元件重建
Design Guideline 重新建立
除了為 Design Guideline 中的每個元件定義樣式與狀態，我也同步補充了元件的使用原則，確保設計在不同情境下的一致性。此外，我也在 Notion 上建立一套更全面的系統使用規範，包含元件適用情境與命名邏輯，讓設計團隊與開發團隊能有明確依據，共同維護產品品質與開發效率。
產品相關設計
產品教學影片
除了設計產品的介面流程外，我也製作了產品使用手冊的中英文二個版本，該教學影片除了讓客戶能快速上手以外，對於內部系統不熟悉或剛加入的員工，也可以透過該影片去更理解我們複雜的管理平台。
設計總成果
提升易用性
優化充電樁設定流程，尤其是充電樁 ID 與 URL 直覺，操作效率自然提升。
提升內部效率
導入 Design Guideline 與 優化整體 Componet，強化設計與開發之間的對齊效率。
訂單開始合作
最重要任務達成！
產品已導入客戶端場域，正式啟動商業合作流程。
加快產品上手
製製作教學影片，協助內部與客戶更快速理解操作流程。
產本專案為 2B 性質之設備操作系統，現階段主要依據實際用戶操作回饋與內部測試進行設計優化。目前已實際導入於合作客戶端，惟因涉及商業機密，相關數據恕不對外公開。
專案反思
這是我第二次接觸 IoT 相關產業。相較於過去在乙方公司較難深入了解產品實際運作，此次設計自家 CMS 產品，讓我得以更完整地理解設備背後的邏輯與技術。從充電樁與 OCPP 通訊協定的關聯，到裝置端與系統間的互動流程，這次的經驗讓我深刻體會「操作流程」與「設備邏輯」之間密不可分的關係。
在專案過程中，我也持續優化設計規範，這對我來說是一大挑戰。面對功能不斷擴充的產品，我必須在「維持一致性」與「彈性調整」間取得平衡，這不僅考驗設計能力，也考驗設計管理與協作策略。
回顧本次專案，有幾點值得改進。雖然我理解使用者研究對設計決策的重要性，但受限於緊湊的開發節奏與內部使用者難以安排訪談，實際執行使用者測試的頻率不高。雖然我訪談了幾位內部成員並取得初步回饋，但若能更早規劃研究流程與訪談安排，將能進一步強化設計決策的依據與說服力。
另一方面，我非常珍惜和資深開發團隊合作的機會。無論是軟體或硬體團隊，都給予我豐富的產品知識與實作細節，讓我快速補足電樁設備相關的技術理解。而在這次專案中，我不僅負責主要設計工作，也推動導入全新的設計協作流程，使團隊更聚焦於核心功能，進一步提升了設計與開發的整體效率。