改善付款體驗：提升轉換率無壓力操作流程
角色與產出
負責與一位 PM 和兩位 PO 溝通，並與 Product design lead 共同討論制定出專案目標、目的定義問題並規劃 UX 與 UI 設計，從 Wireframe 到產出 High-Fi 交付給工程師完成後進行最後 UI Review。
專案挑戰
面對時程壓力與沒有多餘時間測試哪一種做法確實能明確解決目標問題，過程中不斷與 Design lead 討論再與需求端還有 PM 溝通，從團隊內部想法碰撞讓發散想法收斂取得團隊共識，執行到後期與 R&D 排除實作問題得到很多寶貴經驗。
專案成果與影響
此專案在 UI 做了與以往不同嘗試，並與團隊溝通不同版位呈現推廣資訊在 User journey 途中顯示合理性，上線兩個禮拜後再觀察其中有一處改善使 Active users 提升 2.7 倍，轉換率提升 2.2 倍，這成長對團隊之後開發其他專案時會有不一樣思維與決策。
專案背景
LINE TV 是在台灣經營線上影音串流（OTT）服務的公司
其中訂閱模式（SVOD (Subscription Video On Demand) ）佔我們主要收益很大一部份，因此公司團隊注意到用戶進行會員訂閱時使用 IAP （In-App Purchase）來付費會被第三方收取不少手續費，所以想把用戶引導至官網使用 Web 來付費減少損失，所以我們拆解 2 個階段進行最佳化。
其次 TV 用戶在公司商業面也是不容忽視一塊為了提升產品曝光度， 與其他電視品牌合作提供有限天數 VIP 服務，在引導與體驗流程規劃上簡化步驟來提高用戶使用意願。
其中訂閱模式（SVOD (Subscription Video On Demand) ）佔我們主要收益很大一部份，因此公司團隊注意到用戶進行會員訂閱時使用 IAP （In-App Purchase）來付費會被第三方收取不少手續費，所以想把用戶引導至官網使用 Web 來付費減少損失，所以我們拆解 2 個階段進行最佳化。
其次 TV 用戶在公司商業面也是不容忽視一塊為了提升產品曝光度， 與其他電視品牌合作提供有限天數 VIP 服務，在引導與體驗流程規劃上簡化步驟來提高用戶使用意願。
執行階段
階段一
簡化 User journey 提升 web 付款體驗：
使用 App 且已登入用戶透過連結開啟 In-App browser 至官網方案頁會一並帶入會員資訊，目的在於簡化流程提升使用體驗，並且針對已付費用戶再次購買優惠方案的疊加情境做簡化，並在方案頁面與付款頁面做資訊重整使視覺層級明確且清楚，提升閱讀舒適性。
階段二
新增與最佳化導方案頁入口：
在 Mobile app 與 Desktop web 做導方案頁入口最佳化調整，吸引用戶注意並強化購買入口特點，思考 User journey 路徑中給予購買後享有會員權益時機，降低用戶體驗產品時反覆看到購買彈窗厭煩感。
階段三
透過與電視機異業合作提升 TV 曝光量：
完成了方案與付款頁最佳化後，正好有與 Sony 和 Philips 商業合作。
在與 PM 溝通後我們對流程實作上有不一樣想法，為了找尋突破口與需求方討論把目的與整理各種利弊說明後，再由需求端衡量做出決定。
在與 PM 溝通後我們對流程實作上有不一樣想法，為了找尋突破口與需求方討論把目的與整理各種利弊說明後，再由需求端衡量做出決定。
設計與思考流程
1
了解專案背景與痛點並定義問題
透過 PM 與 User growth 夥伴了解專案前因，共同討論核心問題點並確立目標方向。
2
發想解決方案與定義目標
針對問題點從 User flow 著手發想提出解決方案與 Product design lead 討論，有方向後進行 Wireframe 畫面設計，並將資訊彙整成 google slide 準備 Kick-off 與專案夥伴說明進行項目。
3
解決目標問題執行設計
與專案團隊 Kick-off 後達成一致目標方向，由 RD 進行 POC 我則會把遇到問題還有結論記錄下來，之後 POC results 與開發會更加順利且清楚了解到循序漸進過程，確認後就會執行 High-fidelity 。
4
驗證與調整
最終 UI Review 與 QA 測試完成送審上線後的一個 sprint 來觀看是否達到最初定義的 Success metrics ，由 Data 分析並與專案夥伴說明。
階段一
簡化 User journey 提升 web 付款體驗
現況問題
付款頁：觀察痛點
1 訂閱付款流程
a.
App 用戶開啟 in-app browser 需要再登入帳號才能進行購買。
b.
現行訂閱機制是只要成為會員當已到到期日會自動幫用戶續訂，所以付費用戶如需加購新的優惠方案，必須先取消原方案，才能再購買其他方案。
c.
付款過程中出現龐雜資訊，容易造成閱讀資訊疲勞。
方案頁：觀察痛點
2 方案頁視覺層級
a.
需要 scroll down 才能閱讀到方案內容。
b.
方案卡內容因受畫面寬度影響關係，所以一個 Tabs 只能顯示 4 個方案卡資訊。
提出解決目標與設計挑戰
1 訂閱方案疊加付款流程
a.
從 User flow 檢視現況，簡化 VIP 用戶疊加購買方案流程。
b.
必須告知用戶仍保有舊方案權益並在畫面上顯示會處理哪些步驟，減少用戶使用上負面感受。
2 付款頁
a.
重新梳理資訊層級，提升用戶瀏覽體驗。
3 方案頁
a.
用戶只需在一個頁面無需跳轉其他頁面操作，即可完成新方案購買。
b.
移除不必要資訊，並與用戶增長部夥伴共同討論資訊內容與架構。
c.
Redesign 方案卡設計，並不需讓用戶做多餘操作即可瀏覽 3~4 個方案卡內容。
d.
考量常態與促銷方案數量可能隨著時間而有所增減，所以不要限制數量且在單一頁面滑動，不需點擊即可瀏覽完整資訊。
設計原則
一致性
基本元件遵循 design system guideline 讓各裝置平台上有一致設計語言。
便利且明確的
考量用戶可能因為操作時接觸某個契機進而想要訂閱，所以入口與付費的流程與資訊非常著重，避免因為資訊傳達不確定感或不易操作而流失用戶。
即時性回饋
為元件增加互動性，目的在於讓用戶明確知道觸擊位置易於操作性。
設計產出
提出解決目標與設計挑戰
與 PM 和 User growth 夥伴討論會議後，我以 User flow 來檢視並提出改善後的流程免去用戶額外操作，讓用戶只在方案頁就可完成促銷方案疊加購買。
當用戶購買新方案時會告知整個流程步驟，目的是讓用戶知道會做些什麼，且原本方案權益不會受損，並減少用戶擔心花費太多時間感到煩雜問題。
了解用戶需求在合適時機給予需要的資訊
在介面調整上根據客服收到使用者反饋，以及內部與 PM 和 user growth 開會討論做了部份調整。
1.
「確認付款資訊頁」部分資訊放到「付款結果頁」，降低一進頁面龐雜資訊帶來壓迫感。
2.
移除帳號綁定功能，原因有兩個
a.
不希望好不容易讓用戶進到付款頁，因為綁定流程而讓用戶在旅程中迷失方向。
b.
我們之後會讓用戶強制綁定 LINE 帳號，所以帳號綁定不需要在付款頁出現。
3.
「付款方式」移除 drop down 元件調整為 radio buttons ，原因有 2 個
a.
沒有提供更多其他付款服務。
b.
少一個步驟點擊下拉選單，提升用戶使用體驗。
.png)
考量在 Mobile web 呈現易讀與維護性，外容器延續卡片形式。
以前「付款結果頁」不會呈現任何資訊，單純提升多巴胺放置一張視覺圖來慶祝用戶完成付款流程。
但這次專案與大家討論後，保留原圖與慶祝文案，並加上付款結果資訊提升用戶安心踏實感。
但這次專案與大家討論後，保留原圖與慶祝文案，並加上付款結果資訊提升用戶安心踏實感。
重新規劃資訊架構提升瀏覽便捷性
清楚表示成為 VIP 四大亮點
思考用戶面一進到頁面，顯示資訊內容無法清楚傳達最具價值要點，分析判斷 2 個原因：
a.
背景圖示與文字資訊在這頁不具意義，還把最重要方案資訊往下推移。
b.
升級後享有權益意思表達不明確或不夠吸引人。
就上述 2 點我們做了以下 4 點調整
a.
與 User growth 夥伴討論最具產品競爭力四點價值。
b.
思考增加或減少功能時畫面排版安排。
c.
考量 Responsive web 、Maximum State 問題。
d.
移除無意義定期性更新的背景圖與調整標題文案。
乘載更多方案並突顯重點
與 Data 夥伴討論觀察到進入頁面用戶 scroll rate 很高，由此推測出最想瀏覽資訊是「價錢」與有什麼「優惠活動」，成為 VIP 的四大亮點則為輔助來說服用戶購買心裡最後的因子。
Low-Fi - 1
Low-Fi - 2
有了數據與目標和目的基礎上進行 Low-Fi 設計並產出幾個版型先與 Design lead 討論後再與 PM 還有 User growth 夥伴做最後執行方向決定。
過程方案討論
在發想過程總共設計 6 個草圖，與 Design lead 討論後選出 2 個與專案夥伴們進行討論。
ideation - 1
四大亮點規劃上想設計 sticky position 方式呈現，目的是讓方案卡在最上方位置，即使用戶 scroll 查看更多方案也不會看不到升級後享有權利。
方案卡規劃上先與 User growth 討論資訊的重要程度層級，再根據討論結果做 visual hierarchy 的排版。
方案卡規劃上先與 User growth 討論資訊的重要程度層級，再根據討論結果做 visual hierarchy 的排版。
ideation - 2
與 Design lead 討論後做了一個保守形式版面規劃，文案規劃上限制字數用簡潔句子框出四大亮點。
方案卡規劃上把價錢放置同一位置在綜觀瀏覽下容易抓到各方案價位差異，寬度也較寬能容納更多訊息內容。
方案卡規劃上把價錢放置同一位置在綜觀瀏覽下容易抓到各方案價位差異，寬度也較寬能容納更多訊息內容。
確定執行方案
跟 PM 與 user growth 說明兩種 ideation 後，最終使用 ideation -2 的四大亮點排版加上 ideation - 1 方案卡設計，原因是比起一整塊說明四大亮點，一塊一塊排列方式更能突顯重點，方案卡則是認為 ideation - 1 visual hierarchy 更清楚得到所需的資訊。
提升 Handoff 溝通效率
針對方案卡元件做語意化命名，並在旁設定好規範，這麼做不只為開發過程中更順利，也幫助後續維護更新內容部門能有個規範文件遵循。
並考量 Mobile Web 上顯示畫面較為侷限，所以 Plan information 只會秀出一個，當想要查看更多內容點擊該區塊就可以展開再次點擊即可收起。
並考量 Mobile Web 上顯示畫面較為侷限，所以 Plan information 只會秀出一個，當想要查看更多內容點擊該區塊就可以展開再次點擊即可收起。
階段二
新增與最佳化導方案頁入口
現況問題
Header：觀察痛點
1 方案頁入口不顯眼
a.
Scroll 瀏覽畫面時 Header 無法 sticky 上方，導致使用體驗不佳。
b.
方案頁入口不夠顯眼。
提出解決目標與設計挑戰
1最佳化方案入口
a.
即使瀏覽網頁內容途中，也可點擊到 Header 裡相關連結。
b.
突顯方案頁入口提升 Conversion rate。
設計產出
提高露出機會強化入口視覺
Desktop web
思考用戶面一進到頁面，顯示資訊內容無法清楚傳達最具價值要點，分析判斷 2 個原因：
1.
Header 調整成 Stick positions 讓用戶即使瀏覽到頁面最下方，也可透過點擊 Header 查看其他資訊。
2.
方案頁入口調整為 Button 樣式，並把靜態 Icon 最佳化成 Lottie 動態圖示，增強視覺感。
Mobile web
考量 Mobile web 螢幕大小閱覽體驗，Header 做了調整為隨著用戶手勢操作，往下查看內容時會隱藏往上才會顯示，導引至 App 則是要滑至最上方才會顯示。
考量 User Journey 增加導引至方案頁入口提升商業機會
目標放在為了吸引到未訂閱且已登入用戶來訂閱 VIP 會員，與需求端和 PM 考量幾種情境當用戶遇到能夠點擊按鈕，導引至方案頁來瀏覽方案內容提升訂閱機會：
免費會員導引購買入口 - VIP 集數
免費會員導引購買入口 - 1080P 畫質
觀看 3 次影片內容後顯示升級 VIP 權益彈窗
(Web) 個人資訊 Hover 視窗
(Web) 個人資訊 Hover 視窗
觀看影片時前導內容結束後與片尾時會有導引按鈕
此外上線觀察後表現不佳項目，做了調整與修正
1.
(Web) 個人資訊 Hover 視窗
2.
(App) 個人頁新增導引方案頁版位
推估原因用戶觸及到這項機率不高，並且不足以產生誘因使用戶點擊導引版位。
後續調整：移除導引方案頁版位
後續調整：移除導引方案頁版位
經歷與過程
1 前期討論
在專案執行前大家在操作體驗上就有許多共識痛點要解決，整理各方需求並結合各團隊專業很快梳理出問題點並順利討論實際作法。
2 Kick-off
因為資源與時程有限在 Kick-off 會議上，投票得知最終結果後會請大家簡略敘述是什麼原因做出最終決定，進一步判斷討論。
3 實作面
a.
規劃 Figma 上 components 並設計好 Variant 與 property 避免資料庫龐雜不易管理
b.
把舊的元件另外保存起來，新的可同步更新到未來專案。
c.
並對元件語意化降低溝通成本負擔。
4 檢查
a.
符合 WCAG 對比度規範讓文字可以清晰閱讀。
b.
利用瀏覽器「檢查元素」進行 UI Review 幫助工程師進行調整。
專案帶來了什麼成果與影響
Header 導流「方案頁」按鈕最佳化調整，從 Data 成果分析報告在調整之前
（7/11 - 7/24）進方案頁數為 1,150 人 調整後增長到 4,210 人提升 2.7 倍，轉化成 SVOD 調整前 59 人調整後增長到 189 人，提升 2.2 倍
（7/11 - 7/24）進方案頁數為 1,150 人 調整後增長到 4,210 人提升 2.7 倍，轉化成 SVOD 調整前 59 人調整後增長到 189 人，提升 2.2 倍
+2.7 倍
Active user
+2.2 倍
轉換成付費會員
「方案頁」上在調整之前（4/17-5/1）點擊率為 9.4%，轉換率為 3.0% ，調整後
（5/2-5/23）點擊率提升為 10.8% 成功轉換付費為 3.7%整體點擊率提高 1.4%，轉換率提高 0.7%
（5/2-5/23）點擊率提升為 10.8% 成功轉換付費為 3.7%整體點擊率提高 1.4%，轉換率提高 0.7%
+1.4 %
點擊率
+0.7 %
轉換率
新增需求
最佳化兌換序號流程拓展 TV 用戶
設計與思考流程
1
了解專案背景與痛點並定義問題
從專案需求了解到主要是為了「未登入用戶」來體驗產品 VIP 服務來提升 TV 用戶數量，沒有太高期待能一次轉換成付費用戶，但藉此商業合作能提升產品曝光度之後好賣廣告。
2
發想解決方案與定義目標
這專案比較著重在 User flow ，所以在做法上我用手稿快速釐清現況流程再思考從哪一段加入兌換序號與後續流程安排。
3
解決目標問題執行設計
既然目標是拓展用戶群兌換流程不要太繁瑣，所以拆成兩個部分
a.
兌換 VIP 序號體驗使用
b.
體驗到期時會跳是否升級付費會員
4
驗證與調整
由 PM 與 Data 評估後希望此專案能為 Android / Google TV 帶來月活躍量成長約 22,000 人（此專案還未上線）。
設計產出
降低兌換複雜度提升用戶使用機會
兌換序號流程
在執行中除了思考減化兌換流程且要想登入與未登入狀態並深入思考付費和未付費給予相應畫面，所以一開始會先檢查用戶持有機型是否有在活動前進行登入，還是是新買電視機用戶沒登入過 LINE TV ，關乎後面是否要有登入流程，並考量工程實作時間盡可能維持既有登入與兌換流程。
登入後確認身份會幫用戶自動帶入兌換序號碼，確認兌換即可體驗付費會員服務。
登入後確認身份會幫用戶自動帶入兌換序號碼，確認兌換即可體驗付費會員服務。
到期是否升級 VIP
當體驗完後會顯示到期提示窗，快速給予好處來增加用戶對產品信任感提升產品價值。
不同觀點討論找尋平衡點
分歧點：兌換序號要綁定付款資訊？
過程中 PM 認為讓用戶綁定付款資訊後才讓用戶體驗，原因是可以無形讓用戶轉成實際付費會員。能理解 PM 給予觀點，但當用戶踏入想使用時卻看到需要付款資訊這點對想踏入嘗試使用我們產品的人來說是一個不太友好做法，既然需求端目的是想拓展 TV 用戶數，那應該要把踏入門檻盡可能降低來拉近用戶與產品間信任感。這來回溝通上 PM 對於流程還是希望保有綁定付款資訊，於是與需求端討論分享看法還是希望著重在拓展用戶數維持目前方向進行。
過程中的反思
討論中我提出目前 TV 操作方式，與對簡化兌換流程想法是盡可能培養用戶對產品聯繫，PM 也舉出其他競品也是透過綁定付款資訊再體驗來說服，雖然我與 Design lead 看法都是商業模式不同做法也應該要做調整，但從不同思考面切入還是無法順利讓專案前進，於是第三方聲音加入真的就非常重要，在沒有多餘時間調查或研究狀態下讓多數人意見決定覺得是最有效做法。
學習進步與心得
在專案執行前多與需求端溝通了解專案前因與痛點，原因是能迅速且完整了解到需求背後原因，針對給的回饋討論給予想法方向再由 PM 同步文件記錄，來幫助夥伴減少溝通來回上負擔。
這專案跟許多不同部門合作，溝通定義問題並記錄且還要在設計稿清楚呈現出決議與實作項目，並且還要兼具其他專案 Follow up ，漸漸上手安排時程覺得是很有成就感的事，不順的時候查找 Medium 文章或尋求主管建議都讓我更了解解決問題思考步驟與邏輯，在這很幸運有一個 coach 能讓我知道產品開發正確步驟即使目前環境狀況無法達成，但能獲取學習知道正確流程怎麼走讓我在處理事情上比其他人掌握更清楚脈絡解決實際的問題。
這專案跟許多不同部門合作，溝通定義問題並記錄且還要在設計稿清楚呈現出決議與實作項目，並且還要兼具其他專案 Follow up ，漸漸上手安排時程覺得是很有成就感的事，不順的時候查找 Medium 文章或尋求主管建議都讓我更了解解決問題思考步驟與邏輯，在這很幸運有一個 coach 能讓我知道產品開發正確步驟即使目前環境狀況無法達成，但能獲取學習知道正確流程怎麼走讓我在處理事情上比其他人掌握更清楚脈絡解決實際的問題。
