Year
2024
My Role
UI/UX 設計師
Responsibility
後台 UI 設計 / 線上表單 UX + UI
專案背景
從紙本到數位
欣南天然氣的業務涵蓋裝表、拆表、定期管線檢查及現場服務作業，過去依賴紙本流程管理，案件狀態難以追蹤，師傅的現場單據也容易遺失。本專案的目標是設計一套案件管理後台，並將師傅與用戶的紙本單據轉為線上表單。
系統組成
後台 + 表單，服務不同使用者
後台管理系統（內部員工）
統一管理三條業務線的案件，從收件、審核、派單到結案，全程在同一個介面操作。
線上表單（師傅與用戶）
師傅到現場掃 QR Code 後填寫工作報告；用戶透過線上申請表提交掛拆表申請。
三條業務線
系統需要同時管理三條觸發方式和執行流程都不同的業務線。
掛 / 折表
用戶申請裝設或拆除瓦斯計量表。申請從線上表單送入，員工審核、MIS 建檔、開單後，交師傅執行現場作業。
服務作業單 & 供氣前檢查
由掛拆表開單後進入，後台員工審核並派單後，師傅帶後台列印出的 QR Code 到用戶家掃碼填表。
定期檢查表
公司主動排程，批次派師傅定期檢查管線。師傅掃碼填表，完成後兩階段審核結案。
依案件階段顯示對應操作
三條業務線各有 10～11 個案件階段
每個階段下的可操作項目完全不同，部分操作一旦執行就無法回溯。系統只顯示當前階段允許的操作，最重要的下一步用特別色標示，次要操作收進下拉選單。不可逆操作加二次確認視窗，文案明確說明後果。
篩選介面
整合進 Filter Button，層級清楚
將類別、狀態、申請類型、期間四個篩選維度整合進右側 Filter Panel，收起時不佔版面，展開後以垂直 select 呈現。選了類別，狀態選項會自動更新成該類別對應的狀態。
線上表單設計
將紙本表格轉為手機版互動表單
表面上是格式轉換，實際上需要處理紙本上不存在的互動問題。