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