客製化會員卡
客製化會員卡
客製化會員卡
讓會員卡成為付款流程的自然一環，建立高頻使用習慣並提升結帳體驗
讓會員卡成為付款流程的自然一環，建立高頻使用習慣並提升結帳體驗
讓會員卡成為付款流程的自然一環，建立高頻使用習慣並提升結帳體驗
專案背景
專案背景
專案背景
過往實驗顯示，綁定會員卡的用戶在該通路消費頻次與金額更高；為補齊競品已具備的能力、降低流失風險，我們將會員卡整合進付款流程，打造高頻使用習慣並為後續合作拓展建立資料基礎。
過往實驗顯示，綁定會員卡的用戶在該通路消費頻次與金額更高；為補齊競品已具備的能力、降低流失風險，我們將會員卡整合進付款流程，打造高頻使用習慣並為後續合作拓展建立資料基礎。
定義問題
定義問題
如何在付款場景中提供「快速出示與切換會員卡條碼」的體驗，讓用戶能順暢完成付款＋累點，同時提升會員卡綁定與使用意願
如何在付款場景中提供「快速出示與切換會員卡條碼」的體驗，讓用戶能順暢完成付款＋累點，同時提升會員卡綁定與使用意願
限制＆挑戰
限制＆挑戰
付款情境出示變動高
付款情境出示變動高
會員卡在付款場景的出示順序由店家決定，需思考付款流程中如何「即時顯示＆切換」並降低誤掃風險
會員卡在付款場景的出示順序由店家決定，需思考付款流程中如何「即時顯示＆切換」並降低誤掃風險
用戶的認知落差＋多卡管理需求
用戶的認知落差＋多卡管理需求
不少用戶不知道「付款即自動累點」能力而缺乏使用動機
不少用戶不知道「付款即自動累點」能力而缺乏使用動機
多數用戶持有多張會員卡，因此需確保新增與管理流程足夠易懂且順暢
多數用戶持有多張會員卡，因此需確保新增與管理流程足夠易懂且順暢
定義設計目標
定義設計目標
用戶需求
用戶需求
How might we
How might we
讓用戶在付款當下能快速找到、出示並切換會員卡條碼，同時降低店員誤掃與操作焦慮？
讓用戶在付款當下能快速找到、出示並切換會員卡條碼，同時降低店員誤掃與操作焦慮？
商業目標
商業目標
How might we
How might we
提升會員卡綁定率與使用率，讓用戶更常在街口完成付款＋累點，進一步提高黏著與貢獻？
提升會員卡綁定率與使用率，讓用戶更常在街口完成付款＋累點，進一步提高黏著與貢獻？
設計過程
設計過程
設計過程
桌面研究
桌面研究
為確保分析結果具參考價值，我從以下兩個面向挑選競品：
為確保分析結果具參考價值，我從以下兩個面向挑選競品：
功能參考
支付場景中，出示與切換會員卡的功能情境
支付場景中，出示與切換會員卡的功能情境
會員卡管理、排序編輯、新增卡片流程
會員卡管理、排序編輯、新增卡片流程
交互細節＆體驗
了解大眾的視覺呈現和操作方式與心智模型，作為後續互動設計的依據，提升體驗直覺性與一致性
了解大眾的視覺呈現和操作方式與心智模型，作為後續互動設計的依據，提升體驗直覺性與一致性
問卷研究
問卷研究
內部數據顯示，已綁定會員卡的用戶在該通路消費頻次與金額顯著更高，同時主要競品已具備類似功能。為補齊能力、降低流失風險，我們透過問卷研究驗證「會員卡整合到付款流程」的需求強度與使用痛點，作為後續功能設計與合作策略的依據。
內部數據顯示，已綁定會員卡的用戶在該通路消費頻次與金額顯著更高，同時主要競品已具備類似功能。為補齊能力、降低流失風險，我們透過問卷研究驗證「會員卡整合到付款流程」的需求強度與使用痛點，作為後續功能設計與合作策略的依據。
研究問題：
用戶是否需要一個能在付款時「整合管理並方便出示會員卡」的體驗，並能藉此降低結帳時的操作成本？
用戶是否需要一個能在付款時「整合管理並方便出示會員卡」的體驗，並能藉此降低結帳時的操作成本？
核心假設
用戶對於將會員卡整合至付款流程具有需求，主要因為能提升結帳的便利性與效率
用戶對於將會員卡整合至付款流程具有需求，主要因為能提升結帳的便利性與效率
用戶在結帳時需要在多個 App 或實體卡之間切換會員卡，這樣的操作被視為繁瑣且耗時
用戶在結帳時需要在多個 App 或實體卡之間切換會員卡，這樣的操作被視為繁瑣且耗時
相較於技術導向的描述，直接強調結果與便利性的文案（如：付款即累點）能帶來更高的功能理解度與接受度
相較於技術導向的描述，直接強調結果與便利性的文案（如：付款即累點）能帶來更高的功能理解度與接受度
方法＆樣本
方法：
方法：
線上問卷
線上問卷
有效樣本：
有效樣本：
1,400 份
1,400 份
投放群體：
投放群體：
活躍用戶（銅牌 ～尊爵會員）＋ 流失用戶
活躍用戶（銅牌 ～尊爵會員）＋ 流失用戶
研究洞察
在支付場景的需求強：想要「更快地出示和結帳」
在支付場景的需求強：想要「更快地出示和結帳」
89.2% 對「客製化會員卡」高度有興趣
89.2% 對「客製化會員卡」高度有興趣
43.6% 表示本來就有使用會員卡需求，但現行做法需要在多個 App 間切換
43.6% 表示本來就有使用會員卡需求，但現行做法需要在多個 App 間切換
設計思考
會員卡整合應以「最少步驟」為核心價值，優先解決找卡/切換造成的時間成本
設計思考
會員卡整合應以「最少步驟」為核心價值，優先解決找卡/切換造成的時間成本
認知落差: 「不知道」已有會員卡功能
認知落差: 「不知道」已有會員卡功能
25% 完全不知道街口已支援部分通路的「付款即自動累點」
25% 完全不知道街口已支援部分通路的「付款即自動累點」
回饋中也反覆出現：「不知道可以綁會員卡」
回饋中也反覆出現：「不知道可以綁會員卡」
設計思考
除了做功能，更要設計「可被看見的回饋」來創造 Aha moment
設計思考
除了做功能，更要設計「可被看見的回饋」來創造 Aha moment
會員卡是高頻行為，但結帳流程順序不固定
會員卡是高頻行為，但結帳流程順序不固定
76.1% 幾乎每次消費都會出示會員卡
76.1% 幾乎每次消費都會出示會員卡
47.8% 表示出示順序不固定、看店家決定持卡量：1–5 張（44.8%）為最大宗
設計思考
付款場景不能假設固定流程，必須支援「順序彈性＋快速切換」，並降低誤掃風險
設計思考
付款場景不能假設固定流程，必須支援「順序彈性＋快速切換」，並降低誤掃風險
設計亮點
設計亮點
設計亮點
我主要負責的部分是付款場景的還會員卡出示和新增會員卡流程。
我主要負責的部分是付款場景的還會員卡出示和新增會員卡流程。
支援結帳順序彈性
支援結帳順序彈性
讓用戶在付款當下能「快速出示、快速切換」條碼，同時降低店員誤掃風險，並沿用既有習慣降低學習成本
讓用戶在付款當下能「快速出示、快速切換」條碼，同時降低店員誤掃風險，並沿用既有習慣降低學習成本
付款前
付款中
付款後
會員卡出示＆切換
會員卡出示＆切換
沿用既有 Panel，並加入 Tab 分頁：載具 / 會員卡 → 降低學習成本
沿用既有 Panel，並加入 Tab 分頁：載具 / 會員卡 → 降低學習成本
一次只顯示一個條碼 → 降低店員誤掃風險，也讓用戶使用起來更簡單
一次只顯示一個條碼 → 降低店員誤掃風險，也讓用戶使用起來更簡單
新增會員卡
新增會員卡
提高新增方式彈性：不論用戶走哪種新增路徑，都能在當頁切換其他新增方式
減少步驟：讓用戶能快速完成新增並立即在付款場景使用
付款累點提醒
付款累點提醒
將「可自動累點／可綁定」的價值設計進會員卡與付款流程中
將「可自動累點／可綁定」的價值設計進會員卡與付款流程中
讓使用者在完成交易的當下清楚感知系統已替他完成累點，強化對功能能力的理解與信任
讓使用者在完成交易的當下清楚感知系統已替他完成累點，強化對功能能力的理解與信任
設計交付文件
設計交付文件
設計交付文件
撰寫設計交付規範文件，完整整理元件在各種場景下的使用方式、交互邏輯與動畫細節，幫助工程理解設計意圖，減少開發落差，提升整體協作效率與產品品質。
撰寫設計交付規範文件，完整整理元件在各種場景下的使用方式、交互邏輯與動畫細節，幫助工程理解設計意圖，減少開發落差，提升整體協作效率與產品品質。
撰寫設計交付規範文件，完整整理元件在各種場景下的使用方式、交互邏輯與動畫細節，幫助工程理解設計意圖，減少開發落差，提升整體協作效率與產品品質。
學習＆反思
學習＆反思
將不可控的使用情境，設計成可預期的互動體驗
在付款情境中，使用流程往往不是由使用者主導，與其試圖「控制流程」，我選擇將這種不確定性轉化為設計的一部分，透過彈性的切換和掃描策略、明確的互動回饋，讓使用者在不同情境下仍能安心操作。
比功能缺口更致命的是認知落差
即使產品功能已經存在、流程也可完成，只要使用者沒有在關鍵時刻獲得清楚的理解或「Aha moment」，他們仍然不會真正採用這個功能。
學習＆反思
技術協作與實作落地
與工程師密切合作，共同定義 Panel 的交互邏輯與三段式狀態切換的技術可行性與平台差異性（iOS / Android）
使用者體驗引導與策略思考
部分功能無法在第一眼就被「直覺」理解，因此需設計策略性引導機制，讓使用者發現、理解功能的存在與價值。
( OTHER PROJECTS )
( OTHER PROJECTS )
LET’S
( WORK )
TOGETHER
如果你對我的作品有興趣，
歡迎隨時聯繫我！
LET’S
( WORK )
TOGETHER
如果你對我的作品有興趣，
歡迎隨時聯繫我！
( OTHER PROJECTS )
( OTHER PROJECTS )
( OTHER PROJECTS )
LET’S
( WORK )
TOGETHER
如果你對我的作品有興趣，
歡迎隨時聯繫我！