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

法國零售商的 eGift App:購物車、促銷與結局頁

專案版本發布4 分鐘
eGift支付 UX行動流程狀態設計金融科技 UX

為知名法國零售商設計的 eGift App

這是為一間上過電視節目的知名法國零售商設計的 eGift App:使用者購買電子禮物卡,替自己或朋友儲值,每筆消費累積回饋金。因為產品敏感,這篇的截圖全部採用超低解析度加整張模糊,只保留區塊標題,用來呈現流程的規模與複雜度;內容細節不提供。文字聚焦在這個專案真正困難的地方。

重度模糊的五張開場畫面:滑動步驟與最後的登入註冊選擇
開場流程(刻意模糊):三步滑動說明回饋循環,結尾是登入、註冊或直接逛。

購物車、促銷碼與回饋金:真正的複雜度

看起來是「買一張卡」,實際上每一步都在分岔。金額有面額與自訂兩種;買給朋友要填收件人資料並選擇寄送方式;訪客可以逛但結帳前要過登入註冊的關卡;購物車要處理多張卡、刪改確認、捲動狀態,促銷碼套用後總價、回饋金與每張卡的分攤都要即時重算。我的做法是替購物車畫出完整狀態板:空車、多卡、捲動、輸入促銷碼、套用成功,每一格都是一個真實會發生的畫面,工程照格實作,QA 照格驗收。

重度模糊的購買流程,保留清晰標題:卡片詳情、收件人資料與訪客模式
購買流程(模糊、保留標題):卡片詳情、金額輸入、收件人資料與訪客模式關卡。
重度模糊的購物車板,保留清晰標題:Cart、Promo 等五種狀態
購物車板(模糊、保留標題):從捲動到套用促銷碼的五種狀態。
重度模糊的付款板,保留清晰標題:含促銷的購物車、付款頁、條款彈窗
付款組裝(模糊、保留標題):促銷、付款方式與付款前的條款關卡。

付款結局頁該說什麼

付款結局頁是整個 App 最常被低估的畫面。成功頁不只說成功:回饋金何時入帳、訂單細節寄到哪個信箱、禮物卡何時送達,全都在這一頁交代。失敗頁更重要:列出可能原因(卡片資料、餘額、銀行擋下)與具體下一步,附上客服管道,讓使用者失敗後知道往哪走,而不是重試到放棄。經驗總結:轉換率藏在結局頁,因為那是使用者情緒最強的時刻。

重度模糊的付款結果頁,Success 與 Failed 標題保持清晰
兩種結局:成功頁寫回饋與寄送細節,失敗頁寫原因與補救步驟。