街口支付實習專案 — 會員卡功能改版與體驗升級
街口支付實習專案 — 會員卡功能改版與體驗升級
街口支付實習專案 — 會員卡功能改版與體驗升級
共同主導街口支付上線五年的會員卡功能改版，從前期研究到工程交付完整參與
共同主導街口支付上線五年的會員卡功能改版，從前期研究到工程交付完整參與
共同主導街口支付上線五年的會員卡功能改版，從前期研究到工程交付完整參與
Role
Role
Role
Product Designer
Product Designer
Product Designer
Timeline
Timeline
Timeline
July 2025 – Aug 2025
July 2025 – Aug 2025
July 2025 – Aug 2025
Tools
Tools
Tools
Figma, Mixpanel, SurveyCake, Slack, Jira, Confluence
Figma, Mixpanel, SurveyCake, Slack, Jira, Confluence
Figma, Mixpanel, SurveyCake, Slack, Jira, Confluence
1. Overview
1. Overview
我 2025 年暑假加入 JKOPay 街口支付產品團隊，擔任 Product Design Intern，並共同負責 會員卡功能的改版設計。此專案為實際開發中的產品功能，目前已上線第一階段。
我 2025 年暑假加入 JKOPay 街口支付產品團隊，擔任 Product Design Intern，並共同負責 會員卡功能的改版設計。此專案為實際開發中的產品功能，目前已上線第一階段。
專案從早期探索階段開始，我與 設計、PM 與工程團隊密切合作，在 法規與既有技術架構的限制下，重新設計並升級一個已運行五年的舊有系統。
專案從早期探索階段開始，我與 設計、PM 與工程團隊密切合作，在 法規與既有技術架構的限制下，重新設計並升級一個已運行五年的舊有系統。
由於專案內容仍受 NDA 限制，本頁將聚焦於我在專案中的 角色、設計流程，以及主要收穫與反思。
由於專案內容仍受 NDA 限制，本頁將聚焦於我在專案中的 角色、設計流程，以及主要收穫與反思。
1. Overview
我 2025 年暑假加入 JKOPay 街口支付產品團隊，擔任 Product Design Intern，並共同負責 會員卡功能的改版設計。此專案為實際開發中的產品功能，目前已上線第一階段。
專案從早期探索階段開始，我與 設計、PM 與工程團隊密切合作，在 法規與既有技術架構的限制下，重新設計並升級一個已運行五年的舊有系統。
由於專案內容仍受 NDA 限制，本頁將聚焦於我在專案中的 角色、設計流程，以及主要收穫與反思。
2. 公司與團隊
2. 公司與團隊
2. 公司與團隊
01 關於街口
01 關於街口
01 關於街口
街口支付（JKOPay）是台灣主要的數位支付平台之一，核心產品為 B2C 行動支付 App，目前服務超過 700 萬名使用者。
街口支付（JKOPay）是台灣主要的數位支付平台之一，核心產品為 B2C 行動支付 App，目前服務超過 700 萬名使用者。
街口支付（JKOPay）是台灣主要的數位支付平台之一，核心產品為 B2C 行動支付 App，目前服務超過 700 萬名使用者。
02 團隊組織
02 團隊組織
02 團隊組織
產品團隊由 20+ 位 Product Manager 與 4 位 Product Designer 組成。過去團隊的分工模式主要是由 PM 負責輕量的使用者研究（如 desk research、競品分析），而設計師則專注於 UI 設計與設計交付。
產品團隊由 20+ 位 Product Manager 與 4 位 Product Designer 組成。過去團隊的分工模式主要是由 PM 負責輕量的使用者研究（如 desk research、競品分析），而設計師則專注於 UI 設計與設計交付。
產品團隊由 20+ 位 Product Manager 與 4 位 Product Designer 組成。過去團隊的分工模式主要是由 PM 負責輕量的使用者研究（如 desk research、競品分析），而設計師則專注於 UI 設計與設計交付。
藉由這次實習，團隊想嘗試 將使用者研究更深入地整合進設計流程，透過實際的使用者訪談、問卷調查與可用性測試，探索 PM 與設計師如何在產品開發過程中建立更緊密的合作模式。
藉由這次實習，團隊想嘗試 將使用者研究更深入地整合進設計流程，透過實際的使用者訪談、問卷調查與可用性測試，探索 PM 與設計師如何在產品開發過程中建立更緊密的合作模式。
藉由這次實習，團隊想嘗試 將使用者研究更深入地整合進設計流程，透過實際的使用者訪談、問卷調查與可用性測試，探索 PM 與設計師如何在產品開發過程中建立更緊密的合作模式。
3. 專案細節
3. 專案細節
01 專案背景
01 專案背景
本專案聚焦於 街口支付 App 中「會員卡」功能的改版與擴展。該功能最初於五年前推出，讓使用者可以在 App 中綁定特定商家（7-11、萊爾富、全家便利商店、美廉社、環球購物中心）的會員，若在付款時使用街口，會自動帶入會員，不用再出示會員條碼。
本專案聚焦於 街口支付 App 中「會員卡」功能的改版與擴展。該功能最初於五年前推出，讓使用者可以在 App 中綁定特定商家（7-11、萊爾富、全家便利商店、美廉社、環球購物中心）的會員，若在付款時使用街口，會自動帶入會員，不用再出示會員條碼。
此次改版的目標是整合更多會員卡，以支援更多商家合作模式，並更新整體介面設計，以提供更流暢的使用體驗。
此次改版的目標是整合更多會員卡，以支援更多商家合作模式，並更新整體介面設計，以提供更流暢的使用體驗。
然而，這並不是一次單純的視覺更新。整個改版過程必須同時考量 法規限制、既有系統架構，以及複雜的功能邏輯，因此設計過程不僅是介面優化，更涉及大量的系統思考與產品策略決策。
然而，這並不是一次單純的視覺更新。整個改版過程必須同時考量 法規限制、既有系統架構，以及複雜的功能邏輯，因此設計過程不僅是介面優化，更涉及大量的系統思考與產品策略決策。
02 專案團隊與合作模式
02 專案團隊與合作模式
會員卡改版是一項 跨部門合作的專案，需要產品、設計與工程團隊密切協作。核心專案團隊從 研究到設計交付全程參與，同時也與多個合作單位協作，包括提供數據分析、行銷策略與法規審查的相關部門。
會員卡改版是一項 跨部門合作的專案，需要產品、設計與工程團隊密切協作。核心專案團隊從 研究到設計交付全程參與，同時也與多個合作單位協作，包括提供數據分析、行銷策略與法規審查的相關部門。
作為專案的共同負責人之一，我與 PM 實習生夥伴、Product Design Lead，以及 Senior PM 緊密合作，共同對齊產品與設計方向、規劃使用者研究，並在每一輪設計迭代中平衡商業目標與技術可行性。
作為專案的共同負責人之一，我與 PM 實習生夥伴、Product Design Lead，以及 Senior PM 緊密合作，共同對齊產品與設計方向、規劃使用者研究，並在每一輪設計迭代中平衡商業目標與技術可行性。
03 挑戰
03 挑戰
這次專案並不只是一次介面改版，而是在 法規合規、 技術限制、使用者體驗，三者之間取得平衡。每一個設計決策，都需要在「法規允許什麼」、「技術能做到什麼」，以及「使用者真正需要什麼」之間反覆協調。
這次專案並不只是一次介面改版，而是在 法規合規、 技術限制、使用者體驗，三者之間取得平衡。每一個設計決策，都需要在「法規允許什麼」、「技術能做到什麼」，以及「使用者真正需要什麼」之間反覆協調。
以下是專案中三個關鍵挑戰，以及我如何應對：
以下是專案中三個關鍵挑戰，以及我如何應對：
01 法規限制 vs 使用者體驗
01 法規限制 vs 使用者體驗
挑戰
挑戰
會員卡功能涉及 金融與個資保護相關法規，同時每個合作品牌也有不同的需求，例如：卡號是否可完整顯示（有些店家的會員卡號是信用卡號）、條碼格式、驗證流程。這些限制直接影響 資訊層級與互動設計。
會員卡功能涉及 金融與個資保護相關法規，同時每個合作品牌也有不同的需求，例如：卡號是否可完整顯示（有些店家的會員卡號是信用卡號）、條碼格式、驗證流程。這些限制直接影響 資訊層級與互動設計。
我如何解決
我如何解決
與 法務團隊合作，釐清哪些資訊可以顯示、哪些需要隱藏
透過 清楚的視覺標示，提示不同會員卡所需的驗證流程
當部分資訊（例如完整卡號）無法顯示時，提供 詳細說明，降低使用者困惑
與 法務團隊合作，釐清哪些資訊可以顯示、哪些需要隱藏
透過 清楚的視覺標示，提示不同會員卡所需的驗證流程
當部分資訊（例如完整卡號）無法顯示時，提供 詳細說明，降低使用者困惑
結果
結果
在確保 法規合規的前提下，設計出 清楚透明的使用者溝通方式，並建立可支援未來新合作品牌的可擴展 UI 架構。
在確保 法規合規的前提下，設計出 清楚透明的使用者溝通方式，並建立可支援未來新合作品牌的可擴展 UI 架構。
02 舊系統限制與可擴展性
02 舊系統限制與可擴展性
挑戰
挑戰
系統後端存在研究的 技術債。舊版會員卡功能與另一個產品功能 共用同一套資料庫結構，導致在短時間內無法完全拆分其邏輯，限制了新的資訊架構與流程設計。
系統後端存在研究的 技術債。舊版會員卡功能與另一個產品功能 共用同一套資料庫結構，導致在短時間內無法完全拆分其邏輯，限制了新的資訊架構與流程設計。
我如何解決
我如何解決
將改版拆解為 模組化、可逐步整合的流程設計，降低開發風險
與工程團隊合作，在 沿用舊 API 的前提下重構 UI 邏輯
提出多種 備案與迭代方案，在理想體驗與技術可行性之間取得平衡
將改版拆解為 模組化、可逐步整合的流程設計，降低開發風險
與工程團隊合作，在 沿用舊 API 的前提下重構 UI 邏輯
提出多種 備案與迭代方案，在理想體驗與技術可行性之間取得平衡
結果
結果
成功讓 產品、設計與工程團隊對齊共同目標：在考量技術限制的同時優先改善使用者體驗。新的結構也讓未來新增會員卡合作時能 以最小成本擴展。
成功讓 產品、設計與工程團隊對齊共同目標：在考量技術限制的同時優先改善使用者體驗。新的結構也讓未來新增會員卡合作時能 以最小成本擴展。
03 多樣化情境下的設計
03 多樣化情境下的設計
挑戰
挑戰
新系統需要同時支援：多語系、動態字級（Dynamic Text / Accessibility）、不同會員卡類型的流程差異。
這些條件使得 版面一致性、資訊層級與錯誤訊息設計都變得更複雜。
新系統需要同時支援：多語系、動態字級（Dynamic Text / Accessibility）、不同會員卡類型的流程差異。
這些條件使得 版面一致性、資訊層級與錯誤訊息設計都變得更複雜。
我如何解決
我如何解決
在 多語言、長文字與大字級情境下測試版面
建立可擴展的體驗架構，將所有流程整理為三個核心行為：新增 / 管理 / 使用
定義 彈性的元件規則，避免文字截斷並維持資訊層級清晰
在 多語言、長文字與大字級情境下測試版面
建立可擴展的體驗架構，將所有流程整理為三個核心行為：新增 / 管理 / 使用
定義 彈性的元件規則，避免文字截斷並維持資訊層級清晰
結果
結果
建立了一套 跨語言、跨裝置仍能保持一致性的版面系統，同時讓工程團隊能以 單一可調整的元件支援不同類型的會員卡。
建立了一套 跨語言、跨裝置仍能保持一致性的版面系統，同時讓工程團隊能以 單一可調整的元件支援不同類型的會員卡。
04 我的貢獻與時程
04 我的貢獻與時程
此時間軸呈現我在整個專案生命週期中的主要貢獻，從 前期研究與 Wireframe 設計，到 最終設計交付與設計團隊 handoff 的過程。
此時間軸呈現我在整個專案生命週期中的主要貢獻，從 前期研究與 Wireframe 設計，到 最終設計交付與設計團隊 handoff 的過程。
3. 專案細節
01 專案背景
本專案聚焦於 街口支付 App 中「會員卡」功能的改版與擴展。該功能最初於五年前推出，讓使用者可以在 App 中綁定特定商家（7-11、萊爾富、全家便利商店、美廉社、環球購物中心）的會員，若在付款時使用街口，會自動帶入會員，不用再出示會員條碼。
此次改版的目標是整合更多會員卡，以支援更多商家合作模式，並更新整體介面設計，以提供更流暢的使用體驗。
然而，這並不是一次單純的視覺更新。整個改版過程必須同時考量 法規限制、既有系統架構，以及複雜的功能邏輯，因此設計過程不僅是介面優化，更涉及大量的系統思考與產品策略決策。
02 專案團隊與合作模式
會員卡改版是一項 跨部門合作的專案，需要產品、設計與工程團隊密切協作。核心專案團隊從 研究到設計交付全程參與，同時也與多個合作單位協作，包括提供數據分析、行銷策略與法規審查的相關部門。
作為專案的共同負責人之一，我與 PM 實習生夥伴、Product Design Lead，以及 Senior PM 緊密合作，共同對齊產品與設計方向、規劃使用者研究，並在每一輪設計迭代中平衡商業目標與技術可行性。
03 挑戰
這次專案並不只是一次介面改版，而是在 法規合規、 技術限制、使用者體驗，三者之間取得平衡。每一個設計決策，都需要在「法規允許什麼」、「技術能做到什麼」，以及「使用者真正需要什麼」之間反覆協調。
以下是專案中三個關鍵挑戰，以及我如何應對：
01 法規限制 vs 使用者體驗
挑戰
會員卡功能涉及 金融與個資保護相關法規，同時每個合作品牌也有不同的需求，例如：卡號是否可完整顯示（有些店家的會員卡號是信用卡號）、條碼格式、驗證流程。這些限制直接影響 資訊層級與互動設計。
我如何解決
與 法務團隊合作，釐清哪些資訊可以顯示、哪些需要隱藏
透過 清楚的視覺標示，提示不同會員卡所需的驗證流程
當部分資訊（例如完整卡號）無法顯示時，提供 詳細說明，降低使用者困惑
結果
在確保 法規合規的前提下，設計出 清楚透明的使用者溝通方式，並建立可支援未來新合作品牌的可擴展 UI 架構。
02 舊系統限制與可擴展性
挑戰
系統後端存在研究的 技術債。舊版會員卡功能與另一個產品功能 共用同一套資料庫結構，導致在短時間內無法完全拆分其邏輯，限制了新的資訊架構與流程設計。
我如何解決
將改版拆解為 模組化、可逐步整合的流程設計，降低開發風險
與工程團隊合作，在 沿用舊 API 的前提下重構 UI 邏輯
提出多種 備案與迭代方案，在理想體驗與技術可行性之間取得平衡
結果
成功讓 產品、設計與工程團隊對齊共同目標：在考量技術限制的同時優先改善使用者體驗。新的結構也讓未來新增會員卡合作時能 以最小成本擴展。
03 多樣化情境下的設計
挑戰
新系統需要同時支援：多語系、動態字級（Dynamic Text / Accessibility）、不同會員卡類型的流程差異。
這些條件使得 版面一致性、資訊層級與錯誤訊息設計都變得更複雜。
我如何解決
在 多語言、長文字與大字級情境下測試版面
建立可擴展的體驗架構，將所有流程整理為三個核心行為：新增 / 管理 / 使用
定義 彈性的元件規則，避免文字截斷並維持資訊層級清晰
結果
建立了一套 跨語言、跨裝置仍能保持一致性的版面系統，同時讓工程團隊能以 單一可調整的元件支援不同類型的會員卡。
04 我的貢獻與時程
此時間軸呈現我在整個專案生命週期中的主要貢獻，從 前期研究與 Wireframe 設計，到 最終設計交付與設計團隊 handoff 的過程。
Pictures
4. Reflection & Learning
4. Reflection & Learning
4. Reflection & Learning
這次實習讓我第一次深入了解 大型產品團隊如何在使用者體驗、商業目標與技術限制之間取得平衡。也讓我重新思考自己作為設計師，在 協作、決策優先順序與溝通方式上的角色。
這次實習讓我第一次深入了解 大型產品團隊如何在使用者體驗、商業目標與技術限制之間取得平衡。也讓我重新思考自己作為設計師，在 協作、決策優先順序與溝通方式上的角色。
這次實習讓我第一次深入了解 大型產品團隊如何在使用者體驗、商業目標與技術限制之間取得平衡。也讓我重新思考自己作為設計師，在 協作、決策優先順序與溝通方式上的角色。
以下是這次經驗帶給我的幾個重要收穫：
以下是這次經驗帶給我的幾個重要收穫：
以下是這次經驗帶給我的幾個重要收穫：
1
1
1
設計決策需要與商業策略對齊
設計決策需要與商業策略對齊
設計決策需要與商業策略對齊
與 PM 密切合作的過程，讓我學會不只關注介面細節，而是從 產品策略與商業影響的角度思考設計。每個設計決策，都需要理解其背後的 商業目標與取捨。
與 PM 密切合作的過程，讓我學會不只關注介面細節，而是從 產品策略與商業影響的角度思考設計。每個設計決策，都需要理解其背後的 商業目標與取捨。
與 PM 密切合作的過程，讓我學會不只關注介面細節，而是從 產品策略與商業影響的角度思考設計。每個設計決策，都需要理解其背後的 商業目標與取捨。
2
2
2
尋求幫助也是一種能力
尋求幫助也是一種能力
尋求幫助也是一種能力
一開始，我嘗試獨立完成所有設計，但與 mentor 討論後，我逐漸理解 共享責任與想法能讓團隊更快推進專案，也能產出更好的結果。
一開始，我嘗試獨立完成所有設計，但與 mentor 討論後，我逐漸理解 共享責任與想法能讓團隊更快推進專案，也能產出更好的結果。
一開始，我嘗試獨立完成所有設計，但與 mentor 討論後，我逐漸理解 共享責任與想法能讓團隊更快推進專案，也能產出更好的結果。
3
3
3
在變動中快速調整方向
在變動中快速調整方向
在變動中快速調整方向
當原定的問卷調查因公司政策而延後時，我迅速調整研究策略，先透過桌面研究與實地觀察持續驗證假設，直到能正式取得使用者資料。
當原定的問卷調查因公司政策而延後時，我迅速調整研究策略，先透過桌面研究與實地觀察持續驗證假設，直到能正式取得使用者資料。
當原定的問卷調查因公司政策而延後時，我迅速調整研究策略，先透過桌面研究與實地觀察持續驗證假設，直到能正式取得使用者資料。
4
4
4
透過設計邏輯說服團隊
透過設計邏輯說服團隊
透過設計邏輯說服團隊
不同於過去多數 redesign 專案，這次需要從零開始設計新的體驗。透過提出 多個設計方案並說明各自的取捨，我逐漸建立了以設計 reasoning 影響決策的信心。
不同於過去多數 redesign 專案，這次需要從零開始設計新的體驗。透過提出 多個設計方案並說明各自的取捨，我逐漸建立了以設計 reasoning 影響決策的信心。
不同於過去多數 redesign 專案，這次需要從零開始設計新的體驗。透過提出 多個設計方案並說明各自的取捨，我逐漸建立了以設計 reasoning 影響決策的信心。
5
5
5
溝通本身也是設計的一部分
溝通本身也是設計的一部分
溝通本身也是設計的一部分
Mentor 的回饋提醒我，好奇心、結構化思考與清楚的文件紀錄和視覺設計同樣重要。這些能力能幫助團隊在不確定的情況下 建立共識並持續推進決策。
Mentor 的回饋提醒我，好奇心、結構化思考與清楚的文件紀錄和視覺設計同樣重要。這些能力能幫助團隊在不確定的情況下 建立共識並持續推進決策。
Mentor 的回饋提醒我，好奇心、結構化思考與清楚的文件紀錄和視覺設計同樣重要。這些能力能幫助團隊在不確定的情況下 建立共識並持續推進決策。
Pictures✨
Pictures✨
其他專案
其他專案
其他專案
其他專案