跳至主要內容
← 返回首頁作品集

旅遊 eSIM App 設計:購買、啟用、驗證

專案版本發布6 分鐘
eSIM旅遊 UX行動流程身分驗證UI Guideline

為即將登機的人設計

eSIM App 的使用者常常是在機場、在飯店大廳、在快沒有網路的地方打開它。這個情境決定了所有設計:資訊要短、步驟要少、每個代碼都要能一鍵複製、教學要有影片因為沒人想讀說明書。這篇整理我為這個旅遊 eSIM 產品做的購買、付款、啟用、身分驗證與客服流程,以及支撐整套產品的 UI Guideline。畫面為低解析度,品牌字樣已模糊。

手機上的 eSIM 商店目錄:各區域方案卡片,含數據量、效期與購買按鈕,App 標誌已模糊
購買目錄:一個方案一張卡,寫清楚數據量、效期與價格。App 字標已模糊。

購買、付款、啟用

購買目錄一個方案一張卡,數據量、效期、價格三個數字撐起決策。付款分平台處理:iOS 與 Android 各有付款方式排序,信用卡與 PayPal 兩條路徑,成功、儲值成功與失敗各有自己的結尾頁,失敗頁直接給出下一步。啟用是 eSIM 最容易卡住的一關:QR 安裝為主,手動輸入為備援,SM-DP 位址與啟用碼全部一鍵複製,每個步驟配一支短影片。

付款流程圖:iOS 與 Android 的付款方式選擇、信用卡與 PayPal 兩條路徑,以及成功、儲值成功與失敗頁
付款地圖:兩個平台的付款方式選擇、兩條付款路徑,與成功、儲值成功、失敗三種結局。
eSIM 使用教學畫面:QR 安裝、可一鍵複製的手動輸入欄位與分步驟影片指引,App 標誌已模糊
使用教學:QR 安裝、每個代碼都能一鍵複製的手動輸入,以及分步驟的影片指引。

登入、護照掃描與身分驗證

有些市場要求實名,所以註冊流程裡有一個決策點:掃描證件或手動輸入。掃描走第三方元件,掃完一定回到確認頁讓使用者檢查辨識結果;護照另有專屬流程,可以依證件類型重掃。最重要的設計原則是備援:任何掃描都能跳過改成手動輸入,驗證元件失效時,註冊不能跟著死。

登入與註冊流程圖:Scan ID 決策點分出第三方掃描與手動表單兩條路徑
登入與註冊:一個決策點決定身分資料來自證件掃描還是手動表單。
護照掃描流程:掃描、確認辨識資料、依類型重掃,以及跳過掃描改為手動輸入的備援
護照路徑:掃描、確認辨識結果、必要時重掃,永遠保留跳過掃描改手動輸入的備援。
Scan ID 流程:第三方掃描畫面、身分確認、地址步驟與手動輸入備援
Scan ID:第三方掃描、身分確認步驟、地址表單與手動輸入備援。

背後的 UI Guideline

整套產品由一份活的 UI Guideline 支撐:元件、流程、每個尺寸的狀態、切圖與行銷素材都在同一張畫布上,每格標記完成狀態。客服流程也在其中,聯絡我們支援相機與檔案附件,因為旅途中最常見的回報就是一張截圖。Guideline 的價值在跨時區協作時最明顯:工程師照著規格做,不需要等我醒來回答問題。

縮小檢視的 UI Guideline 板:元件群、流程與行銷素材同在一張畫布上
縮小看的 Guideline 板:元件、流程與行銷素材共用一張畫布,樣式不會漂移。
UI Guideline 細部註解:Tab bar、個人頁、商店與購買項目的規格、切圖與各尺寸狀態說明
Guideline 細部:每個功能的規格、狀態、切圖與尺寸註記,工程師能直接照做。
帳戶與客服流程:FAQ 詳情、可附相機或檔案附件的聯絡我們、成功狀態與個人分頁
客服流程:FAQ、可附照片的聯絡我們,以及工單送出後的確認畫面。