重新設計自助加油流程
打造更直覺的操作體驗
重新設計自助加油流程
打造更直覺的操作體驗
重新設計自助加油流程
打造更直覺的操作體驗
角色
角色
產品設計
插畫設計
產品設計
插畫設計
協作對象
協作對象
產品負責人*1
產品經理*1（設備商）
軟體工程師*1（設備商）
產品負責人*1
產品經理*1（設備商）
軟體工程師*1（設備商）
專案期間
專案期間
2024/1-2024/8
2024/1-2024/8
平台
平台
自助繳費機台
自助繳費機台
Background
Background
重塑自助加油機台介面
對齊 Autopass 品牌體驗
重塑自助加油機台介面
對齊 Autopass 品牌體驗
Autopass 是提供停車場與加油站付款服務的平台。
我們與設備商合作，將付款服務導入加油站既有的自助繳費機台，並以「Autopass 自助加油機台」的名稱對加油站端做銷售。
因此除機台外觀需要加上 Autopass 的視覺識別，我們也藉此機會優化原設備商的自助加油繳費介面。
Autopass 是提供停車場與加油站付款服務的平台。
我們與設備商合作，將付款服務導入加油站既有的自助繳費機台，並以「Autopass 自助加油機台」的名稱對加油站端做銷售。
因此除機台外觀需要加上 Autopass 的視覺識別，我們也藉此機會優化原設備商的自助加油繳費介面。
Goal
Goal
讓車主在使用機台時，能感受到與 Autopass 其他產品一致的服務體驗，同時改善原介面不直覺的操作細節。
讓車主在使用機台時，能感受到與 Autopass 其他產品一致的服務體驗，同時改善原介面不直覺的操作細節。
Challenge
Challenge
盤點機台的開發與環境限制
找出能從介面解決的空間
盤點機台的開發與環境限制
找出能從介面解決的空間
1
開發時程有限
開發時程有限
因開發量能有限，需在盡量不調整既有流程架構的前提下，優化 UI 樣式與互動體驗
因開發量能有限，需在盡量不調整既有流程架構的前提下，優化 UI 樣式與互動體驗
2
機台環境條件
機台環境條件
機台常見於戶外環境，觸控反應也不如手機靈敏，強光下的辨識度、按鈕尺寸與間距，都是這次設計上需要優先考量的條件
機台常見於戶外環境，觸控反應也不如手機靈敏，強光下的辨識度、按鈕尺寸與間距，都是這次設計上需要優先考量的條件
Discover & Define
Discover & Define
盤點舊介面的操作痛點
盤點舊介面的操作痛點
從原先的自助加油繳費流程，可以歸納出畫面上的幾個大方向痛點：
從原先的自助加油繳費流程，可以歸納出畫面上的幾個大方向痛點：
缺乏統一視覺語言
缺乏統一視覺語言
顏色使用缺乏系統邏輯，同一功能可能出現不同顏色，字體與元件樣式不一致
顏色使用缺乏系統邏輯，同一功能可能出現不同顏色，字體與元件樣式不一致
易讀性問題
易讀性問題
部分文字過小，或因版面限制被壓縮變形
部分文字過小，或因版面限制被壓縮變形
文案不夠直覺
文案不夠直覺
部分操作指引仰賴使用者自行閱讀理解，例如取消交易的確認彈窗
部分操作指引仰賴使用者自行閱讀理解，例如取消交易的確認彈窗
Process
Process
這次改版以不大幅調整既有交易流程為前提，但加油站現場常有車輛排隊等待，使用者不會想長時間停留在機台前，因此任何需要停下來猜測或確認的環節，都可能增加實際的操作負擔。
因此在流程架構不變的情況下，我重新檢視每一頁的操作細節，找出能透過介面調整，讓操作更直覺、順暢的地方。
這次改版以不大幅調整既有交易流程為前提，但加油站現場常有車輛排隊等待，使用者不會想長時間停留在機台前，因此任何需要停下來猜測或確認的環節，都可能增加實際的操作負擔。
因此在流程架構不變的情況下，我重新檢視每一頁的操作細節，找出能透過介面調整，讓操作更直覺、順暢的地方。
1
重新定義付款後的畫面任務
從付款成功轉為發票選擇
重新定義付款後的畫面任務
從付款成功轉為發票選擇
成功狀態的資訊權重過高
成功狀態的資訊權重過高
原設計將主要視覺重點放在授權成功資訊，但在試用原系統測試機時，我發現無論手機掃碼或信用卡感應，付款授權完成後，付款載體本身已提供成功反饋。 因此，機台畫面更需要處理的是授權完成後的下一步選擇，而非再次強調交易已成功。
原設計將主要視覺重點放在授權成功資訊，但在試用原系統測試機時，我發現無論手機掃碼或信用卡感應，付款授權完成後，付款載體本身已提供成功反饋。 因此，機台畫面更需要處理的是授權完成後的下一步選擇，而非再次強調交易已成功。
發票選擇缺乏明確引導
發票選擇缺乏明確引導
對想開立一般紙本發票的使用者而言，介面缺乏明確指引，只能自行推測下一步。
「統編／車號／載具」等選項也擠進同一個按鈕，字級因空間不足而縮小也降低資訊的辨識度。
對想開立一般紙本發票的使用者而言，介面缺乏明確指引，只能自行推測下一步。
「統編／車號／載具」等選項也擠進同一個按鈕，字級因空間不足而縮小也降低資訊的辨識度。
因此我將此畫面重新定義為「選擇發票開立方式」，把版面的重點從授權成功反饋，改為使用者真正需要決定的任務上。
因此我將此畫面重新定義為「選擇發票開立方式」，把版面的重點從授權成功反饋，改為使用者真正需要決定的任務上。
2
探索發票資訊頁的可能
探索發票資訊頁的可能
在選擇與設定發票類型的初版設計，我原先想參考「停車繳費機台」常見的做法，將發票設定頁拆成三條路徑：一般發票、統編、載具。並讓統編與載具有各自的設定畫面，將兩種互斥的輸入情境分開處理，我認為操作上也會更直覺。
在選擇與設定發票類型的初版設計，我原先想參考「停車繳費機台」常見的做法，將發票設定頁拆成三條路徑：一般發票、統編、載具。並讓統編與載具有各自的設定畫面，將兩種互斥的輸入情境分開處理，我認為操作上也會更直覺。
然而在與設備商討論初版設計後，考量既有系統的步驟與判斷邏輯若變動會拉長開發時間，也非上線必要項目，最終共同決定維持單頁設計。
因此在定版設計，我將統編與載具歸為同一組，並透過欄位互斥（disabled 狀態）提前判斷輸入情境：輸入統一編號後，載具欄位隨即鎖定，避免使用者送出後才發現輸入衝突。
然而在與設備商討論初版設計後，考量既有系統的步驟與判斷邏輯若變動會拉長開發時間，也非上線必要項目，最終共同決定維持單頁設計。
因此在定版設計，我將統編與載具歸為同一組，並透過欄位互斥（disabled 狀態）提前判斷輸入情境：輸入統一編號後，載具欄位隨即鎖定，避免使用者送出後才發現輸入衝突。
3
建立機台專用的設計系統
建立機台專用的設計系統
除了頁面內容的調整，我也同步建立了一套設計系統，讓色彩、字型與基礎元件保持一致風格。
色彩以 Autopass 支付體系的品牌色「亮橘色」為主色，並延伸選用輔助色；介面採用深色底，是考量機台常在戶外強光下使用，能維持較穩定的辨識度。卡片、輸入框、按鈕等可點擊元件，也因應觸控機台的反應較不靈敏而加大尺寸。
除了頁面內容的調整，我也同步建立了一套設計系統，讓色彩、字型與基礎元件保持一致風格。
色彩以 Autopass 支付體系的品牌色「亮橘色」為主色，並延伸選用輔助色；介面採用深色底，是考量機台常在戶外強光下使用，能維持較穩定的辨識度。卡片、輸入框、按鈕等可點擊元件，也因應觸控機台的反應較不靈敏而加大尺寸。
因此設計過程中，我也將畫面實際列印，貼在測試機台上比對，確認按鈕與文字尺寸在真實機台上的辨識度。
因此設計過程中，我也將畫面實際列印，貼在測試機台上比對，確認按鈕與文字尺寸在真實機台上的辨識度。
Final Design
Final Design
Outcome
Outcome
完成自助加油機台介面上線
已有 8 間加油站採用
完成自助加油機台介面上線
已有 8 間加油站採用
這套設計已上線，目前已有 8 間加油站採用這套自助加油機台服務，並持續增加中。
這套設計已上線，目前已有 8 間加油站採用這套自助加油機台服務，並持續增加中。
Takeaways
Takeaways
這個專案讓我更確定，即使不能大幅調整流程，也能透過細節判斷改善操作體驗。授權成功頁的重新定義、發票欄位的互斥設計，都是在既有限制下找到合適的調整方式。
自助服務場域也有其特殊性，使用者遇到問題時不一定有人能即時協助，加油站也常有車輛排隊等待。因此在每個畫面的設計上，我更重視使用者能否快速理解資訊，並順利完成操作。
這個專案讓我更確定，即使不能大幅調整流程，也能透過細節判斷改善操作體驗。授權成功頁的重新定義、發票欄位的互斥設計，都是在既有限制下找到合適的調整方式。
自助服務場域也有其特殊性，使用者遇到問題時不一定有人能即時協助，加油站也常有車輛排隊等待。因此在每個畫面的設計上，我更重視使用者能否快速理解資訊，並順利完成操作。
Next Project
© Yuan Chiu 2024 Copyright. All Rights Reserved.