LINE TV Homepage redesign
LINE TV Homepage redesign
My role
於首頁改版專案，需多方與內容營運、用戶增長、行銷等部門來回確認維護方式與邏輯，以設計出最適合各方合作之平台。
專案實作期間，與一名PM及至少四位工程師一起合作。
我負責競品分析、UX設計、wireframe繪製、視覺語彙統整、畫面設計、Hi-fi設計＆工程交接，產品刻畫完成最後則需ui review。
Result
專案上線後以AB testing形式追蹤用戶探索率與點擊率。
Moblie裝置中，用戶探索戲劇的觸發率超過舊有設計，由0.1％提升為0.3％，由此推斷，於手機版本用戶多習慣左右滑動行為，進而提高觸發率。（計算方式為一分鐘內，有滑動之行為，計算為一次）又Android用戶之用戶之右滑率高於iOS用戶。之於桌機版本，用戶之探索意願與舊有設計差距不大。
本次介面優化，雖然提升覺舒適度，但探索率的提升依然有限。因而推斷，最重要的誘因，依然維繫在整體平台之「戲劇內容」能否有效吸引用戶。下一步期望能透過使用者訪談實際了解用戶瀏覽狀況，以此為依據進一步優化呈現方式。
Time
2022 06 - 08
Team
Product design
PM
iOS / Android / web Front-end Team
Marketing Team
User-Growth Team
Data
Platform
Web（RWD）
Android app
iOS app
Project context
LINE TV 是台灣地區之前三大影音平台，每月平均活躍用戶達300萬人以上。
首頁在影音串流平台作用非同小可，依觀察與研究之下，我們能看見市面上競品多能同時瀏覽多部戲劇，除吸引目光、更能提供多樣選擇讓用戶能依需求找到喜歡的影劇。
然而LINE TV首頁設計中，同一主題的影劇呈現邏輯僅能呈現6部戲劇（app、web皆然）。導致用戶缺乏選擇性。而首頁共有20個主題不等，回推2022年5月數據，近50%用戶會滑到3-4個版位；近20%用戶會滑到6-7個版位，明顯遞減。
本專案針設計內容：
1. 透過設計提供用戶更多選擇，同時提高戲劇曝光度
2. 重新審視現有設計邏輯，一併條列首頁其餘痛點
Current Problems
1
使用者下滑意願不高
從過往數據發現僅有20%的使用者會在首頁瀏覽6~7排的主題推薦內容, 使得首頁內超過2/3以上的推薦內容是無人探索的。
2
主題推薦內容數量上的受限
目前App和Web上的每項主題推薦內容都以6部為限, 這讓使用者在每項主題內缺乏選擇。
3
What we found
目前App上的"新劇速報”的 [換一批片單] CTA, 每日人均點擊次數 5~6 次, 每日 CTR 約 2.4%~2.6%, 由此我們發現使用者希望能夠看到更多的主題推薦內容。
另外，不同區域之文字大小、圓角、色彩等皆無清楚規範，導致視覺混亂、品牌感薄弱。
Goal
Business goal / 增加各題推薦片單的內容
- 將不會再受到數量顯示(6部)的限制, 以提升戲劇內容觀看率。
- 提升每項主題推薦內容戲劇曝光率
User goal / 更多戲劇選擇
- 使用者將可以在每項主題推薦內容內擁有更多選擇、看見更多的內容
- 使用者將可以更快速的掌握新片上架資訊, 收藏影片, 以及延續觀看曾經觀看的內容
Project goal / 短期：提升探索率、主題曝光數 ；長期：精準的個人化推薦
短期目標
- 提升每項主題內容的探索率
- 在受限的直式畫面中, 呈現一則以上主題推薦內容
長期目標
可更深度了解使用者對於每項主題推薦內容的喜好, 提升個人化推薦邏輯精準度
Design Challenge
1 . 釐清所有設計項目之目標
扣緊主軸進行發想、同時帶入研究insight，則能更明確達成目的。
2 . 跨裝置設計
同時考量不同裝置所呈現樣態之可能性，確認平台視覺統一。
3 . 立即判斷每區屬性
目前首頁除主題行列（General row）外，包含排行榜、觀劇紀錄、即將上架...等等不同資訊，設計應能使用戶能立即判斷每區屬性。
4 . 重要資訊優先序
戲劇海報縮圖（Thumbnail）與hover卡片設計（card），皆應統整且依照使用者需求or重視程度進行排序。
Project Scope
本次專案包含多種項目，首先分析該畫面的功能與需求後，區分為三個階段，此專案分享Phase 1之流程與內容。
Phase 1優化項目包含：
1 熱播排行榜
獨特設計凸顯不同內容，同時可清楚顯示前十戲劇
3.戲劇海報縮圖
協助用戶快速掌握戲劇資訊，判讀是否觀劇
2.hover卡片設計
使用戶能短時間掃描詳細資訊，且能輕鬆完成目的
4.主題行列
同時展示多部影劇，於有限高度呈現多種主題
Design Process
本專案切分為5個phase，皆依以下流程完成設計：
1. Discover - 1 week
-
競品分析
-
了解現有問題，定義痛點
-
釐清設計挑戰
2 . Design - 1 week
-
ideation & design solution
-
wireframe & low - fidelity
-
Interaction prototype
-
Hi-fi mock up by phase
3 . Delivery - 1 week
-
透過Kick off會議，與開發人員來回確認實作可能性
4 . UI Review - 1 week
-
確認完成畫面與設計相符
-
模擬各式情境，確保流程順暢
Discover
Research & Competitive Analysis
競品研究分析：針對了解市面之影音串流平台如何呈現戲劇重要資訊，本次專案研究台灣用戶前三大影音串流平台：Netflix、Disney+、愛奇藝；透過功能交叉比對，釐清資訊層級與架構。
Netflix home page
iQIYI home page
Disney+ home page
Netflix & Disney+
於Netflix 與 Disney+ 首頁可發現戲劇縮圖皆以橫式呈現，使有限高度中能顯示更多不同主題。且顯示資訊皆相當精簡不重複，讓用戶能快速得知有用資訊。
Netflix於上方第一版位、戲劇hover時，皆以部分戲劇片段呈現。比對過去用戶訪談insight，了解到用戶會習慣觀看部分戲劇片段，來評斷是否繼續觀看。故以短影片呈現，更能幫助用戶判斷戲劇內容是否合乎喜好。
iQIYI 愛奇藝
以tag將內容戲劇分門別類，用戶可透過標籤快速篩選戲劇內容。清楚說明戲劇跟播狀態，方便追劇用戶安排看劇時間。
Feature analyzation
Card design analyzation
What we found
1. 單一主題行列皆可探索超過10部戲劇以上
2. Hover後出現更詳盡戲劇資訊能協助用戶判斷是否合乎自身喜好
3. 橫式海報能呈現更多主題行列
Ideation
針對戲劇海報縮圖（Thumbnail）、主題行列（General row）、熱播旁行榜（Ranking list）等項目，針對痛點提出相對應的Design solution。以手繪的方式快速發想，並篩選出最理想之設計。
Thumbnail
Option 1 強調獨家、tag區隔位置
Pros：快速傳達獨家戲劇，吸引用戶觀賞
Cons：資訊分區且比重相似，畫面較不平衡
Option 2 僅強調top10內容
Pros：快速接收熱播名單
Card
Option 1 強調文字資訊
Pros：資訊為主，訊息單純
Cons：捨棄戲劇畫面風險高
Option 2 展示不同形式之主視覺
Pros：海報與文字區隔清晰，便於掃描資訊
Option 3 顯示部份片段或預告
Pros：可播放部分預告，吸引用戶
Cons：後台資源需另外開發，較為耗時
Ideation in business perspective
LINE TV有一特色行銷活動為「觀劇拿LINE POINTS」，LINE POINTS於台灣幾乎皆能於商店付款，在目前台灣串流平台市場為很獨特的賣點。
而目前平台能參與此活動的入口，僅能於活動頁參加。為了讓LINE POINTS活動有更多曝光度，讓用戶能更加活躍參加，設計提出：有參與POINTS活動之戲劇，於戲劇海報上直接顯示POINTS的icon示意，讓用戶瀏覽戲劇同時，也能快速了解到哪些戲劇能累積LINE POINTS點數。
LINE POINTS示意
Design Solution
戲劇海報縮圖（Thumbnail & Card）
原設計資訊缺乏訪談基礎，資訊階層不符合用戶實際所需。本專案透過競品分析、使用者訪談，統整出資訊優先順序，並逐一安排至畫面中。首要資訊顯示於Thumbnail（縮圖）；次要項目於Hover後，以Card（卡片形式）呈現。
1
2
3
4
5
6
7
8
13
12
11
9
10
Thumbnail
1. TOP10 ：用戶對於熱門戲劇之觀看意願高，故強調前十名戲劇。
2. LINE POINTS：LINE POINTS為LINE TV平台之特點之一，於戲劇海報示意，即可直接鼓勵用戶參加活動。
3. 播放資訊：用戶可依自身觀劇習慣，選擇要看何種狀態之戲劇。
4. 戲劇分類：加速用戶判斷該戲劇是否符合自身興趣。
Card
5. 戲劇標題
6. 戲劇年份：年份可協助用戶了解戲劇背景，協助用戶判斷內容資訊。
7. 戲劇單集時間：觀劇時間為用戶關觀劇一大重要資訊，用戶會根據當下可使用時間選擇觀看戲劇。
8. 連播戲劇更新時間：對於固定時間觀看最新戲劇之用戶，可協助判斷何時返回平台歸看戲劇。
9. 播放預覽影片（同樣可點擊進入戲劇頁）：若用戶對於戲劇產生興趣，會透過觀看部分片段，以判別是否想要繼續觀看。故在卡片資訊上，直接示意預告影片內容，節省用戶判斷時間。
10. 戲劇特色標籤：協助用戶了解戲劇內容。
11. 再次強調LINE POINTS活動：可至活動頁了解活動詳情。
12. 收藏功能：用戶在瀏覽時，可直接收藏有興趣之戲劇，方便未來回頭觀看。
13. 播放功能：暗示用戶可直接點擊播放。
Old & New comparison
Old
.png)
Thumbnail
Card
New
Thumbnail
Card
Problems:
-
資訊價值低、擺放層級高，不符合用戶需求
-
功能區域零散
-
非必要之重複性資訊，如 戲劇名稱
Solution:
-
資訊分類、功能集中，讓使用更加直覺
-
資訊優先順序清楚，於Thumbnail掃描關鍵資訊、滑鼠hover後可閱讀更詳細資訊
-
Thumbnail之LINE POINTS示意，因專案排程緊湊，專案PM將其solution移至Pending項目。
主題行列（General row）
舊有設計中，於單一主題行列裡，限定「僅能顯示六部戲劇」。為了提升戲劇曝光度，透過不同Design solution提供更多戲劇選擇。以下針對不同解法提出細項說明：
1 . 呈現更多戲劇：
-
Carousel design treatment
-
More button (popup window)
2 . 同樣高度呈現更多戲劇：
-
Desktop以「橫式海報」呈現，於一定高度當中顯示更多「主題行列」，提升不同主題內容曝光度。
3 . motional design：
-
讓用戶能一眼即感受到平台上有大量戲劇，有助於提升用戶觀感印象。
戲劇主題標題
戲劇海報
1
2
戲劇主題標題
1
戲劇詳情卡片
1. 戲劇名稱
2. 年份、時間
3. 戲劇簡介
1
More button
節省畫面空間，顯示更多不同主題。點more button後展開畫面顯示該主題所有戲劇。
2
Carousel
透過按鈕與半透明戲劇海報，引導用戶可以透過Carosel瀏覽更多戲劇。
Old & New comparison
for App & Mobile web : Carousel design treatment
App / Old
Problems:
-
單一主題僅一區域能替換片單
-
相同高度露出主題少，至多兩種主題
App / New
Solution:
-
所有區域皆以Carousel形式呈現。讓用戶能在每一個有興趣的主題，快速探索該主題的內容。
過去設計只有新劇速報提供換片單之設計。
for Desktop web : Carousel design & More button
Web / Old
.png)
Problems:
-
單 一主題顯示數量受限、無法探索更多
Web / New
1
2
Solution:
-
透過兩種方式顯示更多戲劇
-
More button
-
Carousel
-
for Desktop web : 同樣高度呈現更多戲劇 & emotional design
Web / Old
Web / New
![[PC]首頁✅.png](https://static.wixstatic.com/media/2fd182_20a20537a5ba45efb8933196419c0326~mv2.png/v1/fill/w_368,h_410,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/%5BPC%5D%E9%A6%96%E9%A0%81%E2%9C%85.png)
2
theme
rows
4
theme
rows
within same hight
Problems:
-
直式海報高度較高，所需展示空間較大
-
RWD轉換較為生硬
Solution:
-
橫式海報呈現，於同一高度能顯示更多不同主題
-
新增RWD斷點，desktop、mobile邏輯，依裝置量身定做互動設計
熱播排行榜（Ranking list）
原設計戲劇海報縮圖較小、資訊不足。此次優化將海報設計為與一般戲劇海報同樣尺寸，且以大數字清楚呈現排名，增進閱讀性。
動態展開詳細資訊，且播放該戲劇之官方預告，增加資訊以協助用戶判斷是否繼續觀看。
Web /
以展開戲劇且播放預告，轉變畫面架構、同時引導用戶觀看戲劇預告。藉此吸引用戶觀劇。
App /
與Web設計齊平，同一視覺風格。可透過快速左右滑動瀏覽前十名戲劇。
排行榜標題
數字排行設計
1
排行榜標題
年份
戲劇標籤
簡介
播放
蒐藏功能
2
強調被選擇戲劇
1
強調海報與排行名次
戲劇海報放大顯示，配合明顯數值，清楚傳達資訊。
2
展開更多詳細資訊
直接播放該戲劇預告片，讓用戶能直接觀看部分內容，加速判斷是否繼續觀看該內容。
Old & New comparison
for App & Mobile web : 強調排行榜視覺
App / Old
Problems:
-
戲劇海報狹小，用戶無法藉此了解戲劇演員與風格。
-
除排名外，無其他有效資訊協助用戶了解戲劇。
App / New
Solution:
-
放大數字比例，讓用戶第一時間能直覺得知排名順序性。
-
顯示戲劇特性tag，能快速了解類別。
for Desktop web
Web / Old
Problems:
-
風格與平台規範不統一
-
無RWD設計，無顧及不同尺寸畫面
-
資訊內容與app不統一
Web / New
Solution:
-
放大戲劇海報縮圖，讓戲劇風格與演員能更清楚呈現。
-
放大數字比例，讓用戶第一時間能直覺得知排名順序性。
-
顯示戲劇特性tag，能快速了解類別。
Interaction prototype
為了讓開發團隊能更理解本次排行榜之互動效果，以Prototype呈現展開動態與hover效果等，減少言語溝通的落差，提供工作效率。
Final Design
try it ☞ linetv.com
1
一眼看出排行榜！
特意與一般主題行列設計出區隔，強調數字排名。
展開後能直接看見大範圍區塊播放部分片段與戲劇簡介，讓用戶更快了解戲劇風格。
2
瀏覽＆收藏好簡單！
「左右滑動」及查看「所有內容」，皆能解決過去展示戲劇有限之問題。
另外，不管是在hover狀態或是查看完整片單，都能夠輕鬆管理喜愛片單。
3
多元內容一把罩
就算在小裝置上，也能透過左右滑動來查看多元的主題與內容。
碰底之後，即可知道該行列已經查看完畢，可繼續探索其他主題。
Outcome
原LINETV之首頁，同一主題僅能展現六部戲劇，平台內容無法有效曝光、用戶能探索的戲劇也很少。另外，在資訊優先順序上，並未有很好的統整。本次專案梳理首頁呈現資訊與形式，分別將Thumbnail、Theme row 與 hover後出現的資訊卡，進行優化。
將本次成果歸納成三大項：
1. 一眼看出排行榜
清楚將首頁不同內容區分，用戶可快速瀏覽且找到相對應資訊
2.瀏覽＆收藏好簡單
詳細資訊卡片與排行榜中，增加預告片露出位置，提供更多戲劇資訊，方便用戶快速挑選喜愛戲劇
3.多元內容一把罩
卡將直式Thumbnail調整為橫式呈現。於同一高度畫面中，能出現更多不同主題內容
AB testing
於Theme row 設計提出「左右滑動」、「更多內容」等不同解決方案，且實作於Web與app平台。
實際上線後，以AB testing形式，追蹤雙平台上用戶探索率與點擊率。以下為數據觀察結果：
All - 兩週後數計回歸正常水平
於上線前兩週，點擊率與探索率些微下降，可得知用戶於改版之初，需一些時間調整使用習慣。約兩週後，數據顯示回歸正常水平。
APP - 探索率稍微提升
Moblie版本表顯較為亮眼，用戶探索率超過舊有設計由0.1％上升至0.3％；觀劇率則持平。故推斷，於手機版本用戶多習慣滑動行為，調整顯示方式確實能讓用戶更方便探索。又Android用戶之用戶之右滑率高於iOS用戶；且iOS下滑率高於Android。
WEB - 與原設計相比，無顯著成長
新版設計之探索率、觀看率、戲劇曝光度，數據追蹤結果出乎預料。原設計預期新版設計能提升戲劇曝光度，至少在有限的高度當中，能呈現比舊設計至少1-2個主題（6-12部戲劇）。
總結 串流平台以內容為王
Web用戶對於新版畫面使用上，雖然提供兩種不同方式顯示更多戲劇，實際數值並無明顯差異。將來可針對Web的行為進行更深入研究，嘗試更多不同解決方案。APP方面，探索意願雖提升，但實際觀看戲劇用戶並無顯著增長。
有此可知，於影音串流平台，畫面雖能協助用戶操作更加流暢，但能否吸引用戶實際觀劇，內容依然占相當重要的角色。
Next step
由於本次Phase 1之專案成效無顯著成效，手機版本之探索率表現較佳外，觀看率等並無明顯提升。
故期望能進一步探討問題點，以下為建議進行項目
1. 對App用戶進行使用者訪談
過去曾針對電視裝置使用者進行使用者訪談（可參考TV訪談專案），得到的insight相當豐富。期望有機會能訪談App用戶，實際了解LINE TV用戶之使用情境與習慣，藉此了解痛點與機會點，針對實際情況進行優化。
2.市場調查了解熱門戲劇趨勢
熱門戲劇趨勢能夠了解觀眾喜好和需求，幫助公司能更準確購入戲劇內容，以確保平台上能提供使用者有興趣的的題材、演員和劇情，提高用戶使用平台的意願。另外，也能針對目前的熱門戲劇加強行銷，制定更精準的策略，讓用戶知道LINE TV有熱門戲劇。
綜合使用訪談和市場調查的方法，可以更全面地了解LINE TV用戶的需求，並更精準地進行內容與產品的優化，從而增強其吸引力和市場競爭力。