B2C
影音串流服務
流程最佳化
手機版網頁
合作部門
product manager/ 1位
User growth/ 2位
Data Analyst/ 1位
Developer/ 3 位
Quality Assurance/ 1位
為了降低 IAP 帶來的手續費成本，規劃設計了 LINE TV 訂閱流程優化專案，目標是將用戶有效導流至官網 WebPay，並藉由精簡付款操作流程、調整導引方式，提升整體轉換率與使用體驗。
本專案分為兩階段，針對付款頁、方案頁設計與導流入口進行全面改善。
專案成果與影響
為了提升方案頁的導流與轉換表現，最佳化了 Header 導流按鈕與頁面呈現方式，根據 Data 團隊的成效報告顯示，改版後帶來以下具體成長：
+2.7 倍
活躍用戶數
在改版前（7/11–7/24），進入方案頁的人數為 1,150；調整後提升至 4,210，成長 2.7 倍。
+2.2 倍
轉換成付費會員
SVOD 成功轉換人數由 59 人提升至 189 人，成長 2.2 倍。
成效提升
透過資訊架構重整與視覺優化，成功降低用戶流失點，提升整體點擊與轉換效能，進一步為團隊創造明確的商業價值與後續策略參考依據
+1.4 %
點擊率
調整之前（4/17-5/1）點擊率為 9.4%，調整後（5/2-5/23）點擊率提升為 10.8%
+0.7 %
轉換率
調整之前（4/17-5/1）轉換率為 3.0%，調整後（5/2-5/23）成功轉換付費為 3.7%
專案背景
LINE TV 是在台灣經營線上影音串流（OTT）服務的公司，其中訂閱模式（SVOD (Subscription Video On Demand) ）佔我們主要收益很大一部份，因此公司團隊注意到用戶進行會員訂閱時使用 IAP （In-App Purchase）來付費會被第三方收取不少手續費，所以想把用戶引導至官網使用 Web 來付費減少損失，所以我們拆解 2 個階段進行最佳化。
其次 TV 用戶在公司商業面也是不容忽視一塊為了提升產品曝光度， 與其他電視品牌合作提供有限天數 VIP 服務，在引導與體驗流程規劃上簡化步驟來提高用戶使用意願。
問題定義
多數使用者透過 App 訂閱服務，造成公司需支付高額手續費。 既有 WebPay 流程複雜，內容資訊分散、視覺層級不清，也使轉換率偏低，核心問題在於：
問題 1
使用流程複雜、登入與付款需多次跳轉
問題 2
訊息層級不明、視覺負擔高
問題 3
導購入口不明顯，導致使用者未有效導流
觀察痛點
付款頁面
1
訂閱付款流程
a.
b.
現行訂閱機制是只要成為會員當已到到期日會自動幫用戶續訂，所以付費用戶如需加購新的優惠方案，必須先取消原方案，才能再購買其他方案。
c.
付款過程中出現龐雜資訊，容易造成閱讀資訊疲勞。
觀察痛點
方案頁面
2
方案頁視覺層級
a.
需要 scroll down 才能閱讀到方案內容。
b.
方案卡內容因受畫面寬度影響關係，所以一個 Tabs 只能顯示 4 個方案卡資訊。
設計與思考流程
1
使用者調查與研究
彙整客服與內部回饋後，與 PM 討論發現使用者常卡在「方案加購流程」與「付款資訊混亂」階段，並針對這些痛點著手改善。
2
發想解決方案與定義目標
從 user flow 重新構圖，聚焦於「簡化流程、降低操作認知成本」，也針對 Web 與 TV 使用者的體驗場景進行條件判斷設計。
3
解決目標問題執行設計
設計兩種排版提案與兩種方案卡樣式，導入 Lottie 動畫與即時反饋元件，讓付款操作更即時且明確。
頁面設計依循 WCAG 對比規範，改善 mobile web 的可讀性與可操作，並與 Design Lead、PM 進行設計討論，最終採用組合形式以平衡視覺聚焦與資訊完整性。
4
驗證與調整
最終 UI Review 與 QA 測試完成送審上線後的一個 sprint 來觀看是否達到最初定義的 Success metrics ，由 Data 分析並與專案夥伴說明。
階段一
簡化 User journey 提升 web 付款體驗
提出解決目標與設計挑戰
1
訂閱方案疊加付款流程
a.
從 User flow 檢視現況，簡化 VIP 用戶疊加購買方案流程。
b.
必須告知用戶仍保有舊方案權益並在畫面上顯示會處理哪些步驟，減少用戶使用上負面感受。
2
付款頁
a.
重新梳理資訊層級，提升用戶瀏覽體驗。
3
方案頁
a.
用戶只需在一個頁面無需跳轉其他頁面操作，即可完成新方案購買。
b.
移除不必要資訊，並與用戶增長部夥伴共同討論資訊內容與架構。
c.
Redesign 方案卡設計，並不需讓用戶做多餘操作即可瀏覽 3~4 個方案卡內容。
d.
考量常態與促銷方案數量可能隨著時間而有所增減，所以不要限制數量且在單一頁面滑動，不需點擊即可瀏覽完整資訊。
策略導向的設計推進：減少操作摩擦，提升轉換效率
與 PM 和 User growth 夥伴討論會議後，我以 User flow 來檢視並提出改善後的流程免去用戶額外操作，讓用戶只在方案頁就可完成促銷方案疊加購買。
當用戶購買新方案時會告知整個流程步驟，目的是讓用戶知道會做些什麼，且原本方案權益不會受損，並減少用戶擔心花費太多時間感到煩雜問題。
了解用戶需求在合適時機給予需要的資訊
1
付款資訊調整
我們將部分原本呈現在「確認付款資訊」頁的內容，移至「付款結果頁」，以降低首次進入付款頁時的資訊密度與壓迫感，提升閱讀舒適度。
2
移除帳號綁定流程
綁定功能帶來兩項問題：
a.
對尚未綁定帳號的用戶造成流程中斷，導致跳出率上升。
b.
日後我們計畫以強制綁定 LINE 帳號的方式實施，因此不需在付款頁提前出現該功能。
3
簡化付款方式選擇操作
原本以 drop down 呈現的付款方式改為 radio buttons，一方面減少點擊步驟，一方面也符合付款場景中的直覺選擇邏輯，提升整體操作效率。
強化付款完成後的安心感與資訊完整度
過去的「付款結果頁」僅呈現一張視覺圖與祝賀文字，缺乏實際資訊說明，無法讓用戶確認方案是否正確啟用，僅傳達形式上的「完成感」。
在此次最佳化中，額外補充清楚的訂單資訊與方案細節，包含付款方式、會員帳號與訂單時間等，讓使用者在完成付款的同時，也能感受到安心與被照顧的踏實感。
重新規劃資訊架構，提升瀏覽便捷性
為了讓使用者在第一眼就掌握關鍵資訊，我針對 VIP 訂閱方案頁重新設計資訊層級與視覺焦點，聚焦於「如何有效傳達最具價值的方案亮點」。
歸納出兩個主要問題：
a.
背景圖與文字資訊在該區塊不具意義，且原本最重要的方案資訊被推移至畫面下方。
b.
升級後享有的權益未清楚呈現，導致訊息傳達力不足，難以吸引用戶深入了解或產生轉換意圖。
基於以上觀察，我與 User Growth 團隊進行討論後，採取以下 4 項最佳化策略：
a.
明確列出產品最具競爭力的四大 VIP 權益，並將其視覺化呈現。
b.
依內容重要性，重新規劃功能區塊與版面排版。
c.
針對 Responsive Web 與 Maximum State 顯示條件進行視覺調整。
e.
移除更新頻率低的背景圖，並重新撰寫標題文案以提升明確度與吸引力。
乘載更多方案並凸顯重點
根據與 Data 團隊的觀察分析，用戶在方案頁的 scroll rate 明顯偏高，代表他們進入頁面後仍需花費較多操作尋找關鍵資訊。
我們進一步推測，使用者最關注的是「價格」與「優惠活動」內容，而 VIP 的 4 大亮點則扮演了強化說服力與完成轉換的最後一個心理推力。
在明確的數據與設計目標基礎下，我產出多組 Low-Fi 介面草圖，並先與 Design Lead 討論不同排版組合的視覺層級與操作效率，再與 PM 與 User Growth 團隊進行決策會議，確認最終的執行方向。
從草圖到轉換策略：探索最合適的溝通與引導方式
在發想階段，我共產出 6 組初步草圖，並與 Design Lead 討論後挑選出 2 組進一步與 PM 與 User Growth 團隊進行方案評估與方向確認。
從位置到層級，定義何為「重要資訊該在哪」
為了提升方案轉換率，我將四個核心權益區塊設計為 sticky element，固定在畫面頂部，確保在使用者瀏覽不同方案時，最重要的升級誘因能持續被看見、進而促成轉換。
此外，根據與 User Growth 團隊的討論，我重新調整資訊階層，優先凸顯用戶關注的決策點，同時降低視覺干擾與認知負擔。
用資訊視覺層級引導選擇：兼顧比較效率與完整內容
調整資訊呈現方式，透過簡短文字清楚傳達方案權益，並統一價格資訊的位置，加速用戶比較方案的速度。此外，將卡片寬度調寬以確保資訊完整呈現，同時兼顧視覺平衡與可讀性。
方案設計雙向整合，提升購買動機
綜合兩組方向的討論與觀察，我們最終決定以「視覺引導 + 關鍵資訊固定曝光」的結合策略作為正式版本，這樣的設計兼顧資訊層級與轉換效率，不僅讓用戶更容易理解與比較，也強化了方案選擇時的決策信心。
系統化元件與交付規則：提升跨角色理解與執行效率
為確保開發順利落地並強化後續維運的延展性，我針對方案卡元件進行語意命名，並在設計階段明確標註元件邊界與使用邏輯，制定一套一致的設計規範。
這不僅協助前端準確實作，也為日後維運團隊建立可溝通與參照的標準依據。
針對 Mobile Web 空間受限的限制，設計了內容展開收合機制，每次僅顯示一組 Plan information，使用者可點擊展開更多細節維持資訊完整性，同時避免載入擁擠與認知負擔。
階段二
新增與最佳化導方案頁入口
觀察痛點
現況問題
使用者在首頁瀏覽時，常無法即時發現方案頁入口，導致導流效率低落。我們歸納出兩個主要痛點：
a.
Header 在頁面捲動時無法固定於上方，使用體驗不佳。
b.
方案頁入口視覺不明顯，缺乏足夠誘因吸引用戶點擊。
提出解決目標與設計挑戰
1
提升方案頁入口的可見性與可達性
a.
即便用戶正在瀏覽其他網頁內容，也能從 Header 快速點擊導引。
b.
強化入口視覺設計，提升使用者對方案的注意力與轉換意願。
設計產出
提高露出機會強化入口視覺
桌機網頁
Header 設計改為 sticky position，即使用戶滑動至頁面底部，仍能隨時透過 Header 點擊查看方案資訊，避免導流中斷。
方案頁入口調整為 Button 形式，並將原本的靜態 Icon 最佳化為 Lottie 動態圖示，提升視覺吸引力與互動感，進一步強化用戶點擊動機。
手機網頁
考量小螢幕操作情境，我們針對 Header 實作了「隨手勢顯示/隱藏」的互動邏輯：使用者往下滑動時 Header 自動隱藏，往上滑時才會顯示，避免佔用畫面空間。
至於導引至 App 的按鈕，則設計為滑至頁面頂端才顯示，降低操作干擾並維持使用流程的自然性。
考量 User Journey 增加導引入口，提升訂閱轉換機會
為了吸引尚未訂閱、但已登入的用戶進一步升級為 VIP 會員，我與需求端及 PM 一同評估各種使用情境，思考在何種時機點導入導引按鈕最為恰當，提升用戶點擊意願並進入方案頁瀏覽內容，進而創造更多潛在的轉換機會。
經歷與過程
前期討論
專案啟動前，我與跨部門成員針對既有操作體驗中的痛點進行共識釐清，快速整合需求並盤點問題點，為實作方向建立一致認知。
Kick-off 決策會議
由於時程與資源有限，Kick-off 當下透過團隊投票與簡要說明，快速對可能方案做出最終定案，加速進入下一階段實作。
設計實作
在 Figma 中規劃元件結構，設計 Variant 與 Property，避免資料庫混亂，提升維護性舊元件另行歸檔，方便未來重用與版本管控語意化命名元件，降低溝通成本與誤用風險。
視覺檢查與落地協作
參考 WCAG 對比度建議，確保文字與背景達到良好可讀性
搭配 UI Review「檢查完畢」標記，協助工程團隊快速確認並進行微調。
新增需求
最佳化兌換序號流程拓展 TV 用戶
設計與思考流程
1
問題定義：釐清商業目標與用戶痛點
主要目標是讓「尚未登入的新用戶」透過兌換 VIP 序號體驗產品服務，進一步提升 Android／Google TV 用戶的活躍數。 由於此為異業合作，短期不期待轉換為付費會員，重點在於提升產品曝光與品牌好感度，為後續廣告價值鋪路。
2
解法發想：針對流程建立 User Flow
重點在於兌換流程的友善與直覺，我透過快速手稿梳理目前流程斷點，釐清在哪個階段引導用戶輸入序號、並如何銜接體驗結束後的升級行為。
3
執行設計：簡化操作、降低跳出
為了降低新用戶進入門檻，我將整體流程拆成兩段設計：
a.
輸入序號即可直接體驗 VIP 功能（無需綁定付款資訊）。
b.
體驗結束後再跳出升級導引，避免一開始造成使用者壓力或流失。
4
驗證目標：預期成效與數據評估
根據 PM 與 Data 團隊的評估，此專案若成功導入，有機會為 Android／Google TV 帶來約 22,000 位月活用戶的提升。
設計產出
兌換序號流程設計
在設計兌換流程時，對「已登入」與「未登入」的不同狀態進行邏輯判斷，並優先思考如何簡化操作、降低用戶流失風險。
一開始系統會自動檢查使用者的裝置類型是否符合活動條件（例如：是否為新購買的電視機型），並判定用戶是否曾登入 LINE TV，若尚未登入則會引導完成登入後再進入兌換流程。
為確保流程順暢且不增加工程負擔，我也與開發協作，最佳化後台邏輯以維持登入狀態並自動帶入序號，使用者登入後即可直接兌換並體驗付費會員服務，無需再次輸入或跳轉。
到期升級引導設計
在體驗結束時，系統會主動顯示到期提示視窗，快速傳達升級後的使用權益。
透過即時給予清晰誘因，降低用戶流失的同時，也強化對產品的信任與價值感知，提升後續升級意願。
反思與學習
不同觀點討論中尋找平衡
討論分歧：兌換序號是否需要綁定付款資訊？
在此專案中，我們需設計一個「體驗序號兌換流程」，PM 起初建議用戶應先綁定付款資訊後才能開始使用，期望藉此無形預備轉換行為、提高日後升級為付費會員的機率。
我理解此商業考量背後的策略，但也提出另一種情境觀點：對於首次接觸我們產品的 TV 使用者而言，若一開始即要求輸入付款資訊，可能會造成信任壓力與操作門檻，反而不利於品牌好感與觸及成效。
基於此，我提出將「兌換與綁定」機制拆開的設計建議，先讓使用者無障礙進入體驗，再視後續使用意願與黏著度引導升級。這樣的設計更貼近本階段「提升體驗門檻友善度、擴大觸及率」的策略目標。
最終，我與需求方釐清主目標後，達成「先以不綁定版本作為 MVP 優先驗證」的共識，並同步設計追蹤機制，為後續版本決策提供依據。
我的反思
在與 PM、需求端及 Design Lead 反覆討論後，我提出觀點：目前 TV 使用者的操作習慣與認知成本，決定了初期體驗應儘量簡化，而非導入付款綁定。
我強調競品中雖有以綁定資訊推進轉換者，但那是建立在高度品牌熟悉度與不同商業策略下的操作，對我們而言，複製做法並不一定有效，應回到「用戶所處情境」與「商業目標」來調整設計策略。
由於當下無多餘時間進行完整使用者調查，最終由跨部門共識投票決定以不綁定版本為主先行上線。
學習與成長
這次專案不只強化了我跨部門協作與資訊整合能力，也讓我學習在時間與資源受限下如何做出策略性選擇。
從流程簡化、視覺層級調整到技術溝通，處處都需要換位思考與調整，讓我更理解 Lead Role 所需的整合視角與決斷力，我也更加認知到好的設計不只解決問題，更能搭起團隊之間的理解與信任，推動產品往更有策略的方向成長。
