等級權益卡片設計
等級權益卡片設計
等級權益卡片設計
升級更直覺，資訊更安心
升級更直覺，資訊更安心
升級更直覺，資訊更安心
專案背景
專案背景
專案背景
用戶訪談與內部數據觀察發現，超過 60% 的用戶從未主動查看「會員等級」資訊頁面，對街口的會員制度認知薄弱。升級轉換率提升度較為緩慢，為了強化會員制度的體驗與誘因設計，我們決定將等級權益資訊移到首頁呈現，並由我來設計關於「會員等級權益卡片」，以提升制度曝光度並激勵使用行為。
用戶訪談與內部數據觀察發現，超過 60% 的用戶從未主動查看「會員等級」資訊頁面，對街口的會員制度認知薄弱。升級轉換率提升度較為緩慢，為了強化會員制度的體驗與誘因設計，我們決定將等級權益資訊移到首頁呈現，並由我來設計關於「會員等級權益卡片」，以提升制度曝光度並激勵使用行為。
定義問題
定義問題
定義問題
會員資訊在日常操作中缺乏自然曝光與動機引導
會員資訊在日常操作中缺乏自然曝光與動機引導
使用者的主要操作流程集中在付款與轉帳，較少會主動瀏覽會員等級頁，導致會員資訊曝光率低
使用者的主要操作流程集中在付款與轉帳，較少會主動瀏覽會員等級頁，導致會員資訊曝光率低
會員升等無明顯提示，等級變動需使用者主動察覺，降低參與感與持續互動動機
會員升等無明顯提示，等級變動需使用者主動察覺，降低參與感與持續互動動機
限制＆挑戰
限制＆挑戰
限制＆挑戰
卡片為單一入口
卡片為單一入口
等級權益卡片是進入「等級權益」頁的唯一入口，需同時具備資訊傳達與操作引導
等級權益卡片是進入「等級權益」頁的唯一入口，需同時具備資訊傳達與操作引導
隱私自主性
隱私自主性
設計上需考量使用者的隱私需求，提供選擇是否揭露等級資訊給他人的交互機制，避免造成社交壓力或資訊洩露
設計上需考量使用者的隱私需求，提供選擇是否揭露等級資訊給他人的交互機制，避免造成社交壓力或資訊洩露
> 60% 用戶
從未主動查看「會員等級」資訊頁面
定義設計目標
定義設計目標
用戶需求
用戶需求
How might we
How might we
幫助用戶即時掌握會員等級與升級距離，提升參與感與成就感？
幫助用戶即時掌握會員等級與升級距離，提升參與感與成就感？
商業目標
商業目標
How might we
How might we
強化會員制度在日常流程中的曝光，以提高升級率與用戶活躍度？
強化會員制度在日常流程中的曝光，以提高升級率與用戶活躍度？
60%+ 用戶
從未主動查看「會員等級」資訊頁面
60%+ 用戶
從未主動查看「會員等級」資訊頁面
60%+ 用戶
從未主動查看「會員等級」資訊頁面
視覺探索提案
視覺探索提案
視覺探索提案
等級字樣
強化等級意識
底部文案
透過優惠資訊刺激用戶升級並點擊卡片
隱碼 / 顯碼設計
讓用戶選擇是否要揭露等級資訊
等級頭像
個人化頭像＆等級 badge 提示
等級字樣
強化等級意識
底部文案
透過優惠刺激用戶升級並點擊卡片
隱碼 / 顯碼設計
讓用戶選擇是否要揭露等級資訊
等級頭像
個人化頭像＆等級 badge 提示
等級字樣
強化等級意識
底部文案
透過優惠刺激用戶升級並點擊卡片
隱碼 / 顯碼設計
讓用戶選擇是否要揭露等級資訊
等級頭像
個人化頭像＆等級 badge 提示
設計過程
設計過程
桌面研究
桌面研究
參考國內外具會員制度的 App，，觀察以下重點：
參考國內外具會員制度的 App，，觀察以下重點：
升級進度呈現
升級進度呈現
使用進度條、動畫提示或層級引導，幫助使用者理解當前等級與目標
使用進度條、動畫提示或層級引導，幫助使用者理解當前等級與目標
隱私互動設計
隱私互動設計
包含眼睛 icon、遮蔽資訊、翻卡互動等 UI 解法，兼顧資訊保護與操作直覺性
包含眼睛 icon、遮蔽資訊、翻卡互動等 UI 解法，兼顧資訊保護與操作直覺性
設計思考
設計思考
根據競品研究，我聚焦在以下設計策略
根據競品研究，我聚焦在以下設計策略
資訊架構
資訊架構
將升級進度、優惠差異優先視覺化，降低理解門檻
將升級進度、優惠差異優先視覺化，降低理解門檻
互動設計
互動設計
如何平衡透明度與安全感
如何平衡透明度與安全感
視覺風格
視覺風格
如何提高使用者體驗與品牌感知
如何提高使用者體驗與品牌感知
測試情境
測試情境
為驗證會員等級權益卡片的資訊呈現是否符合使用者的理解與操作直覺，我設計了一系列任務導向的情境測試，觀察使用者實際操作反應與理解方式：
為驗證會員等級權益卡片的資訊呈現是否符合使用者的理解與操作直覺，我設計了一系列任務導向的情境測試，觀察使用者實際操作反應與理解方式：
1
1
資訊理解
資訊理解
請受訪者根據首頁卡片內容，說明目前的會員等級與各項數據的意義
請受訪者根據首頁卡片內容，說明目前的會員等級與各項數據的意義
2
2
隱私操作
隱私操作
請受訪者嘗試隱藏會員等級資訊 ( 2 種設計做 A/B Testing)
請受訪者嘗試隱藏會員等級資訊 ( 2 種設計做 A/B Testing)
3
3
權益探索
權益探索
請受訪者進一步查看會員等級相關的詳細權益內容
請受訪者進一步查看會員等級相關的詳細權益內容
測試方法
測試方法
測試方式
測試方式
指定任務導向的易用性測試
指定任務導向的易用性測試
測試人數
測試人數
5 位
5 位
評估項目
評估項目
任務完成率與操作時間
任務完成率與操作時間
錯誤點與操作路徑偏差
錯誤點與操作路徑偏差
使用者對資訊層級與互動邏輯的理解度
使用者對資訊層級與互動邏輯的理解度
測試洞察
測試洞察
純視覺顏色難以傳遞等級資訊，需搭配文字引導
純視覺顏色難以傳遞等級資訊，需搭配文字引導
純視覺顏色難以傳遞等級資訊，需搭配文字引導
等級字樣 的加入能強化用戶對當前等級的認知
等級字樣 的加入能強化用戶對當前等級的認知
卡片操作順暢，但仍須優化細節操作
卡片操作順暢，但仍須優化細節操作
卡片操作順暢，但仍須優化細節操作
85% 使用者能順利點擊卡片進入等級權益主頁查看資訊
85% 使用者能順利點擊卡片進入等級權益主頁查看資訊
「眼睛 Icon」 點擊範圍偏小，影響操作體驗
「眼睛 Icon」 點擊範圍偏小，影響操作體驗
使用者依賴進度條來理解等級狀態
使用者依賴進度條來理解等級狀態
使用者依賴進度條來理解等級狀態
90% 使用者能直覺理解進度條與數值的對應關係
90% 使用者能直覺理解進度條與數值的對應關係
多數人會 透過進度條來掌握升級狀況，數字僅作為輔助
多數人會 透過進度條來掌握升級狀況，數字僅作為輔助
最終設計
最終設計
最終設計
全等級會員卡
查看等級權益資訊
查看等級權益資訊
數據隱私
數據隱私
等級意識強化
等級意識強化
升級成就感
升級成就感
全等級會員卡
全等級會員卡
設計交付文件
設計交付文件
設計交付文件
撰寫設計交付規範文件，完整整理元件在各種場景下的使用方式、交互邏輯與動畫細節，幫助工程理解設計意圖，減少開發落差，提升整體協作效率與產品品質。
撰寫設計交付規範文件，完整整理元件在各種場景下的使用方式、交互邏輯與動畫細節，幫助工程理解設計意圖，減少開發落差，提升整體協作效率與產品品質。
學習＆反思
學習＆反思
學習＆反思
策略視角成長
策略視角成長
學習如何從用戶習慣、商業指標與設計可行性三者中找到平衡點
學習如何從用戶習慣、商業指標與設計可行性三者中找到平衡點
設計與隱私的取捨
設計與隱私的取捨
在資訊可見性與個資保護之間找到設計解法
在資訊可見性與個資保護之間找到設計解法
( OTHER PROJECTS )
( OTHER PROJECTS )
( OTHER PROJECTS )
LET’S
( WORK )
TOGETHER
如果你對我的作品有興趣，
歡迎隨時聯繫我！
LET’S
( WORK )
TOGETHER
如果你對我的作品有興趣，
歡迎隨時聯繫我！
LET’S
( WORK )
TOGETHER
如果你對我的作品有興趣，
歡迎隨時聯繫我！
LET’S
( WORK )
TOGETHER
如果你對我的作品有興趣，
歡迎隨時聯繫我！
LET’S
( WORK )
TOGETHER
如果你對我的作品有興趣，
歡迎隨時聯繫我！