改善 OTP 使用體驗，並應用於四個品牌
專案背景
Fun88 India 的前後端開發長期以來由外部團隊負責，但因專案執行的溝通成本很高，公司決定將前端開發轉移至內部團隊，並使用 React 框架重新編寫前端介面。藉此機會，我們重新檢視了產品中可改善的地方，列出超過 50 項改善建議，包含介面優化與邏輯調整。其中由於 OTP 涉及註冊、快速登入、忘記密碼、找回用戶名、新增加密貨幣帳戶以及提款等多個關鍵場景，且現有體驗存在會讓用戶感到困惑的問題，因此我們將改善 OTP 體驗列為必須改善的項目之一。
之後，在執行 Fun88 India OTP 體驗優化專案時，主管決定將新 OTP 模組應用至其他三個品牌。因此，我與各品牌的設計師共同檢視各個 OTP 使用場景，並進行相應的調整以確保一致性與適配性。
Fun88 India 的 OTP 問題
Fun88 India 的 OTP 設計使用直接在原頁面展開驗證流程的方式，而非進到下一頁。經詢問主管得知，過去的流程原本會進入下一頁，但考量到某些場景下，如果用戶希望更改資訊，將驗證畫面設置於同一頁，可以避免用戶對返回上一頁是否需要重新填寫資料的疑惑，因此選擇了這種設計方式。而目前的設計有以下 3 個問題：
OTP 流程可歸納為兩種
檢視了 8 個場景後，將 OTP 流程歸納為兩種：一種是在完成驗證後，流程會繼續進入新的頁面；另一種則是在驗證完成後，仍在原頁面僅更新驗證狀態的資訊。
設計方向
重新設計的 OTP 模組優化了使用流程，也調整了判斷的邏輯。
- 將原本包含在 Text OTP 裡的 WhatsApp 及 SMS 獨立出來，與 Voice 並列為三種電話驗證方式
- 以彈窗形式在原頁面完成 OTP 驗證，並調整了資訊呈現方式
- 微調部分場景在 Entry Point Page 及 Result Page 的呈現方式
8 個場景都進行了調整
應用至 Fun88
Fun88 使用直接進到下一頁進行驗證的方式。由於涵蓋中國、泰國、越南三個市場，花了較多時間確認場景。
共 11 個場景
應用至 JBO
JBO 也使用直接進到下一頁進行驗證的方式。在部分場景中，用戶也可以選擇使用 Face ID、指紋辨識或 PIN 碼其中一種作為認證方式。
共 6 個場景
應用至 Betway
Betway 使用 Overlay 的方式進到驗證頁面。手機驗證僅有單一管道，因此流程與需判斷的邏輯相對簡單。
共 11 個場景
專案過程中的收穫
由於 OTP 涉及不同品牌及多種使用場景，其中部分場景正同步進行體驗優化，因此設計師們需要更即時地更新專案資訊，不論是介面調整還是使用邏輯的修改，才能確保這份專案保持正確性與一致性。透過更頻繁地與其他品牌的設計師合作，讓我增加了對於其他品牌的了解，也讓其他品牌的設計師更加了解我所負責的品牌一些。
