01 發現問題

舊版付款流程針對第一次使用的用戶從上圖可以看到分別有 3 個步驟，步驟內容分別如下：

1. 填寫個人資料

2. 綁定信用卡

3. 掃描欲支付店家、輸入

   結帳金額、優惠券及付款選項

Step.1

產品開發一開始為了讓消費者可以在結帳現場無痛結帳以及確認寄送中獎發票的資訊，策略是在APP使用前，須先綁定信用卡與填寫個人資料，然而用戶在不確定產品的用途前須先提供過多個人資料，反而增加用戶對平台的不信任感。

＊補充：國稅局針對雲端發票規定，電商營業人銷售電子勞務，在消費者中獎時應主動寄送中獎通知至民眾，因此須留存用戶的個人資料以利發送中獎通知。

Step.2

Food Marco用戶四成用戶為青年至中年齡層（20-59以下），2022 年底 Food Marco 舉辦了線下的實體市集活動，以研究用戶現場消費行為。當時我們邀請了 12 位年齡介在 25-45 歲的素食用戶實際操作現有付款流程。從填寫資料、綁定信用卡到完成付款動作約 4.5 分鐘，體驗時間過長大大降低用戶參與綁定的意願。

Step.3

根據資策會的統計調查顯示，消費者對行動支付的使用方式已趨於趨同，一般民眾手上原本持有 5-6 種支付方式，但實際上只會使用其中的兩種左右。資策會針對疫情期間進行調查後發現，台灣目前最常使用的行動支付方式是 LINE Pay（28.1%）、街口支付（15.5%）及 PxPay（11%）。因此，如何讓使用者能夠輕鬆且無痛地使用這些第三方行動支付方式進行結帳，是 Food Marco 目前面臨的最大挑戰之一。

在過去的經驗中，業務部門同事提到，許多消費者在結帳時花太多時間、分心使用 Food Marco 的付款功能，在這之中就會選擇不拿回饋轉而去用其他付款方式。

現場性的回饋平台最重要的是讓買家可以在最短和最快的方式下完成結帳。但當消費者被導到一個跟結帳相關性低的流程時，用戶會開始分心於像是找到尋找優惠券等功能。

總結出我們的問題

1. 問題ㄧ、APP完成付款任務門檻高。

2. 問題二、信用卡綁定時間過長、現有付款方式為非通用型的第三方支付。

3. 問題四、結帳頁面資訊體驗時間過長

02 研究問題及擬定設計方向

類競品分析

在一開始挑選競品研究時，我們選擇了相似性質的針對食物與回饋平台來進行分析找出它們各自不同的優缺點，再從中評估哪些部份是值得參考的，去了解以上平台的發票寄送方式、付款結帳流程，其中包含Food Panda、Uber Eats、Pinkoi Pay，能發現當消費者在時間限制的結帳頁面清晰流暢的介面與良好的使用者經驗是關鍵，不僅影響消費者在平台的黏著度，隨者使用人數的增加，也是提升餐廳業者與回饋平台的合作意願。

大致的設計方向

1. 在註冊流程新增預設付款頁面

2. 簡化結帳頁面流程，簡潔且可擴充功能的區塊式設計

3. 避免付款過程出現跳頁或分心的流程或設計。

4. 調換填寫個人資料時機

03 改版設計

由於主要用戶多為中高年齡族群，大規模的改版對於他們而言可能會有不符合既有使用習慣而造成反彈，因此我提出了兩個設計方向。

版本A：在原始現在流程的基礎下簡化，精簡原先介面重複的資訊以及統一視覺。

版本B：我試圖讓流程都停留在同一頁面，在確定付款方式的前提下輸入餐費金額即可，重要的資訊例如：金額、優惠券跟Ｍ幣、付款方式、載具，在同個頁面可一目瞭然。將金額結算融合至付款動作的CTA，去避免以往增加用戶在確認金額頁面之間來回切換與分心的可能性。

我們邀請3位既有用戶進行易用性測試，我們最終以版本B為設計基礎去調整結帳流程，去除介面上多餘的累贅且將原有的兩頁合併為一頁、在註冊流程與付款前先了解付款的目的同時選擇，再來最大的改變就是拿掉原有的步驟提示，將步驟的概念轉移到流程區塊中 ，更符合單頁式的界面設計。

任務操作說明

版本C（版本B進化）：經過行銷部會議過後，我們在淡化背景色、統一視覺配色以讓視覺整體更加輕盈。版面上資訊重整也調寬讓區塊間不會顯得過於擁擠、所有需要的資訊可以一目瞭然。總計的視覺上更加凸顯了折扣的金額以及省下金額的加總，加強用戶對於回饋平台的認知。

04 新版付款流程體驗

設計系統完成一個階段後，便將設計系統中的元件設計重新設計到新版付款介面中，讓頁面整體的視覺更加統一。另外就是多了許多的即時性的錯誤提示互動在體驗上，主要是減少對使用者的一些流程干擾或使用上的不便利。

1.新增預設付款方式頁面

在註冊流程增加此頁加強說明使用Food Marco的目的與優勢，給予有幫助的資訊解除疑惑，同時剪少到最後餐廳現場無法使用付款的問題，使用者也可跳過繼續以訪客身份繼續；也在介面上針對已拿到推薦獎勵的用戶，顯示獎勵金額以及可立即兌現的文本策略以增加用戶的消費意願。

＊舊版本並無此引導選擇付款方式頁面。

2.預設功能與提供更多元的通用性行動支付

新版設計將用戶預選功能設計手風琴選單方式收合，排除不必要的選項和資訊，避免用戶有分心的可能性。將優惠功能設定為active狀態，提升用戶每次消費都能得到回饋的認知。新版解決了舊版較不直覺的界面設計和使用行為。舊版的元件視覺較不統一，所以新版導入設計系統元件來解決視覺不統一性的問題。

另外透過問卷調查以及會議討論，在此次的改版將新增Line Pay的付款選項，以滿足消費者不同的支付方式，讓付款流程再更順暢。

3.發票載具

在此次改版當中將所有發票資料預設為會員載具，中獎通知時機調整至確定用戶中獎後改以SMS與站內推播，通知用戶填寫發票收件地址。而新版更提升了自訂載具的層級並設定電子載具的輸入法規定，讓使用者可以直接修改資料並減少輸入失誤。

4.結帳金額再次確認

新版本在確定結帳時增加彈窗，同時顯示消費總金額與付款方式，讓用戶能夠在重要的時刻進行二次確認與提醒。

總結

這個專案從設計到開發總共花了 2 個半月的時間，整合設計系統的過程，前期花了不少時間在跟各個部門討論需求、研究並跟法務確認法規、類競品研究，例如：簽訂LinePay合約後，後端跟CMS都花了不少時間在做串接與調整，許多而中間也有團隊成員提出分步驟的結帳流程而非單頁式，從中也邀請了幾位用戶來做易用性測試，慢慢說服讓分歧的意見達到平衡。

雖然花了不少時間在做研究，但確定好規格與內容，接著進入設計以後就快了許多。Food Marco一開始的開發團隊包含UX都是在香港，由於文化差異造成現有設計不符合台灣用戶的使用習慣，也因這次的經驗體悟到了使用者研究的必要性，必須扎實的來回溝通跟確認，才能設計出滿足目標用戶心理需求的產品。