UI/UX 設計 — 付款流程界面優化
從舊有的付款流程中，解決現有問題、發想新的流程及界面並導入初步設計系統於新的界面
01 前言
過去接觸過教育平台、旅遊平台及物聯網平台的設計，雖然都有付款相關的流程，但過去都是直接使用第三方的付費平台，也不需要考慮到物流這一面的流程，算是一個新的領域。
02 發現問題
舊版的付款流程已經使用了約 3 年的時間，期間累積了不少的使用議題，去年技術團隊正好也想開發新的程式架構。所以就藉由了這樣的機會，重新發想新的付款流程及重新定義使用行為。
舊版界面流程中的相關議題
舊版的界面及流程從上圖可以看到分別有 3 個步驟，步驟內容分別如下:
STEP 1 — 購物清單、折扣碼的輸入
STEP 2.1 — 買家身份確認 、資料填寫、物流選項
STEP 3 — 結帳金額及付款選項
STEP 1
在過去的使用經驗中，同事有提到，很多買家在看到了折扣碼的欄位時，開始分心去尋找折扣碼，在這之中可能就會掉了不少訂單。
STEP 2
這一個步驟存在很多邏輯，所以相對比較複雜。當買家進入第2步後，需要先填寫 Email 來確認是否曾經在平台上註冊過帳號。這時會有幾種情況產生：
A. 當買家為非會員時，且不同意註冊會員。繼續填寫資料並前往下一步。
B. 當買家為非會員時，且同意註冊會員，當註冊完成後，會開啟會員登入後的相關功能。
C. 當買家為會員時，導到登入頁面。
上述的幾種情況，最單純的是 A. 情況。
而 B. 和 C. 是其中最容易讓買家分心的情況，購物平台最重要的是讓買家可以在最短和最快的方式下完成訂單。但當買家被導到一個跟購物比較不相關的流程時，他們會開始分心於像是找到尋找折扣碼、忘記密碼…等。
(其中會員登入的議題，一般可以透過 SSO 登入功能解決，但不幸的是到目前為止還沒有這塊功能的開發)
STEP 3
最後一步是相對單純的步驟，選擇付款方式。
舊版的設計是讓每種不同的付款選項成為一個大按鈕，如下圖。當點擊像是信用卡或是銀行轉帳時，下方會展開相關的輸入欄位，這時在手機裝置，畫面較窄時，使用者可能比較無法直覺意會選項和下方展開內容的關聯程度。
03 研究問題及擬定設計方向
公司因為組織規模不算大，主管也很放心交給我這個任務，所以研究和發想就成了我的課題之一。
從過去經驗的體悟，其實很多問題的來源大多數會是來自於公司的業務人員，因為他們是最直接和使用者溝通的角色。其他的就是來自於數據上的分析，像是使用者通常在哪一個步驟跳出…等。
個人習慣在研究問題時，會先去把目前其他相似的產品先大略分析過一次，然後找出它們各自不同的優缺點，再從中評估哪些部份是值得參考的。這次大略研究了 Amazon、Shopify、Shopee、ASOS、Tictail、Uniqlo、H&M、 Zara、Lazada…等相關購物平台的購物體驗。
當中特別喜歡 H&M、Tictail、ASOS 這類的結帳流程，特別都為單頁面的結帳流程，避免使用者在跳頁時，流失訂單。另外因為平台的主要TA是小型的賣家使用，所以一些比較大型的購物平台的付款流程並不同樣適用在這個平台中。
從中整理出了大概的設計方向：
- 簡單明瞭的視覺。
- 避免跳頁和分心的付款流程。
- 可擴充功能的區塊式設計。
04 改版設計
有了方向就開始著手設計，而其中最重要的想法就是，想做一個可以無縫接軌的單頁式結帳流程界面。
設計版本 v1.0
在這個版本，試圖嘗試讓流程都停留在同一頁面，同時給予流程步驟的提示。這算是一個初步的設計方向，讓使用者填完資料後緊接著選擇物流方式，並在下一步切換成付款的區塊。不過因為同時間單頁資訊過於複雜，流程動線不清楚，所以嘗試再簡化界面的功能區塊。
設計版本 v2.0
經過會議討論後，在這一版本增加上了購物車區塊，方便使用者更容易隨時可以新增、減少及刪除商品的數量，避免使用者回到前一頁修改商品內容。再來最大的改變就是拿掉步驟提示，將步驟的概念轉移到流程區塊中 ，更符合單頁式的界面設計。但因為多了購物車，界面整體顯得擁擠。
設計版本 v3.1 (最終版)
調整結帳流程，去除界面上多餘的累贅，淡化背景色以讓視覺整體更加輕盈。版面上的寬度也調寬讓區塊間不會顯得過於擁擠。
當時設計 3.0 版本時，設計系統那時還沒開始規劃。所以下圖所看到的，算是導入設計系統後所調整後的 3.1 版本。
05 新版付款流程體驗
設計系統完成一個階段後，便將設計系統中的元件設計重新設計到新版付款界面中，讓頁面整體的視覺更加統一。另外就是多了許多的微互動在體驗上，主要是減少對使用者的一些流程干擾或是使用上的不便利。
進入開發之前，我們也利用Storybook來開發Prototype，讓測試者來執行測試，將一些測試者提出的議題，再做其修正。很有趣的是，測試者在測試時，大部份的議題都不是放在界面設計上而是放在界面的文字上，像是區塊的標題、按鈕的文字、說明文字…等，主要在於他們對於不確定性的文字會感到疑惑和遲疑。
其他的部份在測試上都還算順利，但還是得在正式上線後，繼續蒐集資料並繼續測試反應。
新版的結帳界面設計在規劃設計系統之前就已經設計一個段落，所以開發時間軸上有點亂，因此專案只用了一半的設計系統架構在其中。而這樣的整合經驗，也更了解如何去修正設計系統的元件和開發方式。
UI/UX Demo
01 Email 帳號確認
當使用者輸入完 Email 後，確認是否已註册過帳號。如果 Emai l已註冊過會員，則打開密碼輸入欄位，也可跳過繼續以訪客身份繼續。以不跳頁的方式執行登入功能，減少干擾使用者的使用行為。
舊版則是將使用者導到登入頁，下階段希望能導入 SSO 登入功能。
02 國家/地區選單
當國家地區條列過多時，可透過直接搜尋找到該國家。
舊版的作法是一樣的，但舊版的元件視覺較不統一，所以新版導入設計系統元件來解決視覺不統一性的問題。
03 付款選單
選擇不同的付款方式時展開其相關資訊與內容，新版解決了舊版較不直覺的界面設計和使用行為，會議上有討論到之後希望有機會導入像是Apple pay或是 Google Pay 的付款選項，讓付款流程再更順暢。
舊版的設計是用獨立方型大按鈕，當點擊到該選項按鈕時，下方出現該付款資訊和內容，參考(圖1)。
04 簡化會員註冊
當使用者點擊同意成為會員時，展開密碼欄位，付款與會員註冊同時完成。
舊版的作法是一樣的，主要在於優化視覺體驗的統一性。
05 會員資料列表功能
當使用者登入後，可選擇已填寫的資料列表，並且可以編輯或新增。新版主要簡化資料列表的呈現視覺，並讓使用者可以直接修改資料。
舊版的作法是一樣的，但內容呈現上較繁雜，也無法編輯資料。
06 折扣碼功能
將折扣碼放置在購物車下方，當點擊後才出現欄位輸入框，因為使用者很容易為了尋找折扣碼而分心於結帳，所以將其改為較不明顯的設計。
舊版的折扣碼是放置於第一步驟，所以導致於使用者會停留在這個階段很久而分心。
06 結語
這個專案從設計到開發，大約歷時了 1 年半的時間，主要是因為技術團隊之前忙於其他專案的開發。雖然設計稿很早就完成了，但當要正式開發時，已經過了 6–8 個月的時間，之間又經歷設計系統的開發和整合上的修正，總算要在今天要更新上線了。
整合設計系統的過程，對設計來說比較沒什麼問題，但在技術層面上，還是花了不少時間和技術團隊溝通如何有效導入設計系統。雖然基於開發時間的錯亂，導致於只用了一半的設計系統架構，但這也算是一個開端。未來解決一些整合上的問題，應該在下一個新專案就會再順暢很多。
在設計的時候因為對於結帳流程較不熟悉，所以花了蠻多時間在研究各大平台的結帳功能。而中間也有人提出一步一步結帳流程而非單頁式的結帳流程，所以也讓大家測試了單頁式結帳的體驗，慢慢從中說服了一些不同的意見。
新版的界面推出後，肯定會繼續收到不同的議題。當然就是繼續蒐集問題和解決問題。另外有些功能在未來也想繼續整合進來，像是 SSO Login 和Apple/Google Pay…等更便利的功能。
其他二三事
因為上一篇關於設計系統的文章因為對於公司還在開發中的階段，有些客戶從文章得知，以為有新界面，所以跑去問了同事何時上線，為了避免造成公司同事的困擾，所以先行下架了，但未來時機成熟會再重新上架~所以這篇我就不明說自已服務的公司單位了 XD
如果對設計系統有興趣或是正在開發設計的設計師或工程師，歡迎加入社團一起研究討論交流~目前正在開發新的設計系統，然後未來會開源讓每個人都可以一起學習、研究和使用。
