Plan Card on Big Screen TV

Company: CATCHPLAY
Overview
CATHCPLAY+ 是一家致力於台灣和印尼市場的OTT平台,提供熱愛電影和戲劇的用戶一個跨裝置的影音串流體驗。用戶可以免費註冊會員觀賞影片,或成為付費會員,訂閱平台上的豐富影音內容。
Goals
透過與HBO的合作模式調整,我們正在改變商業策略。付費方式從單一的月付會員模式,擴增至共享帳號的收費方式。這項調整需要更清晰地向消費者解釋我們平台上的收費方式。
CATCHPLAY+ 方案介紹🔗

UIUX 目標

1. 增強原本方案與共享方案的對比度,方便比較更容易理解。
2. 強調共享方案的優勢,透過設計提高此方案的購買率。
3. 在設計中考慮台灣和印尼市場,以及不同的付費方式,如單片租借影片、訂閱方案(SVOD/ TVOD/ Ticket Pack),包括一般訂閱、超值訂閱、合作夥伴合購、特別活動優惠。

註解:
一般訂閱:獨立帳號訂閱觀看平台上的內容。
超值訂閱:與親友一起合購,享有更划算的價格。

關於專案

花費時間:3個月

與Co-work合作的團隊包括CEO、PM、Market Team和UX Team。
其中,PM 為Janet Lin,Design Lead 為Remi Cai,UIUX Designer 為Aika Lin。

Previous Design

舊版的方案內容使用直式排版,顯示所有可購買的方案。並且在App、Web、TV上所呈現的都一樣設計,不易於比較。

設計過程

蒐集競品,參考 Reference:
在蒐集競品時,我們仔細研究了不僅是OTT競品,還包括其他提供共享方案的平台,如:FigmaNotionUXPinMicrosolf365,以提取他們成功的元素,如價格呈現和資訊架構,以應用到我們的設計中。

提案設計:
在執行UI設計階段,將需求融入設計中,天馬行空發揮。再從中篩選出3個的設計與其他UIUX同事及PM的討論,尋求意見,再進行調整。

提案報告:
在向CEO提出設計提案時,列舉設計中的亮點,特別是那些有助於實現業務目標的設計決策。包含如何從競品中吸取靈感,以及為什麼選擇特定的設計方案。

開發文件:
確認設計方向後,將製作UI Spec並補充各種情境下的UI。在開發前期,我們與開發團隊召開會議,由PM解釋專案需求,UIUX說明UI細節和操作流程,以確保整個團隊對開發方向有一致的理解。

開發階段:
這期間緊密地與iOS、Android工程師配合,即時解決工程師提出的問題、討論雙系統的作法、如何實現設計所期望的畫面效果、互動效果。

測試和反饋:
在開發後期進行測試,以確保設計在實際應用中的表現符合預期,並根據需要進行調整和修復,確保產品的品質和穩定性。

TV設計將在 2024年2月上架至各平台(TVOS, Google TV)

關於 TV 上的設計

卡片資訊:
卡片上預設聚焦我們推薦的方案,只有在確認購買時才會顯示【確認購買】按鈕,以減少不必要的資訊並讓使用者更專注於當前卡片的資訊。

互動效果:
為了加強Focus的效果,在使用者在選取卡片後,卡片會從原本的尺寸放大,按鈕也會出現,進而達到彈出的效果。

部分顯示T&C:
可見單片租借影片的資訊,讓使用者知道可以繼續往下操作。T&C只顯示部分資訊:其他內容則保存在詳細頁面,使使用者知道此區塊可點擊。在TV上的點擊範圍更加明顯。

T&C 頁面設計:
使用者從首頁T&C區塊點擊【OK】進入此頁面,以向使用者解釋購買方案後的權益。在大螢幕上閱讀方便,方案細則以列表呈現,並以Icon圖示輔助。閱讀順序由上而下,最重要優先的內容由上而下完成閱讀,更符合閱讀習慣。

挑戰與學習

大螢幕設計的差異
在設計過程中,不斷在大螢幕上進行測試,因為電視的觀看距離與電腦畫稿的距離有所差異(至少1米以上)。無法使用滑鼠進行操作,僅能仰賴遙控器。這對資訊呈現和操作行為與其他裝置產生了顯著的差異。

與工程師的協作
在開發的過程中來回與工程師溝通並解決遇到的開發問題,也在這次的合作中學習工程師的語言,如:
1. Android工程師提出沒辦法從Figma查看字重(Regular, Bold, Black)為了解決工程師的困難,了解他們平時在開發上會參考的文件,提供文字對照表作為參考依據。另外也發現,原來同樣的字重在iOS及Android顯示也會有所不同
2. 陰影設定的方式,Android系統設定陰影的方式為9 patch(4周擴散的效果)或漸層(從90度/270度深到淺)

印尼市場與台灣市場的差異
在印尼市場,由於合作夥伴及銷售方式的差異,提供的卡片內容可能達到8筆資料。此外,印尼文及英文的排版長度較中文長,需要綜合考量這些因素進行設計。

將商業觀點融入設計
透過參與CEO、Market Team、PM等團隊成員的會議,深入了解其他角色關注的核心要素,以此為基礎將商業思維無縫融入設計中。這體現在權益交代的顯示方式、資訊呈現的優先順序,以及提升購買效率的流程設計上,共同致力於公司的收益最大化。

Others Work