▍詳細

▍項目概況

01 |背景

MOD 是中華電信的影視內容平台（IPTV），擁有200萬名以上的⽤⼾，提供了約200多個頻道、獨家賽事Live 轉播及上1,000 部隨選影⾳。

👉 MOD官網

02 | 挑戰

優化MOD⾸⾴內容配置，提升不同年齡層用戶的操作體驗，促進廣告銷售與新增廣告版位。

03 | 角色與交付

在這個項目中，我和研究員與1位專案PM及6位產品PM密切合作。負責 UX 和 UI 設計流程與產出，從定義問題到交付最終視覺設計成果給工程團隊開發。

04 | 成果

改版後 用戶滿意度達80%🙋‍♀️，首頁日流量達150萬+📈 ​每月多出80~150萬的廣告銷售區塊🎊，在每個賽事檔期都創造了可觀的收入並且沒有使用者客訴。

MOD 的下一步

2017年開始，MOD開始與其他產業合作，推出了在MOD也可以使用KKTV、KKBOX等服務，頻道也提供了自行組合頻道的全新訂閱方式。 因應服務與合作增加，MOD也必需考慮到更多的頁面層次和呈現信息的方式，在此之前的MOD主頁上需要時間去學習與習慣的，因此本次改版的重點也著重於頁面簡化，讓各個年齡層都能馬上上手。

(舊)iap、單一平台的MOD首頁	(舊)omp平台的MOD首頁

①內部討論：了解公司目標，深入研究問題

在這個專案裡，我們先從和公司相關單位釐清需求開始，這個過程包括與產品經理、營銷團隊和廣告部門的討論，歸納出「增加廣告銷售」和「提高首頁流量」 是這次首要目標，過往的MOD首頁構成，廣告版面就佔了整體的1/2以上，但事實上雖然廣告佔比高，使用者的停留時間卻不長，點擊率也不理想。​

因此，我們思考優化的方向並不會在首頁擠進更多的廣告，而是必須想辦法如何讓使用者真正的注意到廣告、感興趣，進而點擊增加流量。為了解決這個挑戰，我們決定不只是塞入更多廣告進首頁，而是要找到一種方式，讓用戶更容易注意到廣告，感興趣，並進一步點擊，以提高廣告的效果。

②產出3款線框草稿，進行初步設計的討論

第1款

將需求裡所有功能都放上，功能與操作都較為複雜，主要對齊為25~40歲用戶，資訊需求量大、喜歡主動搜尋內容的使用者，左側維持主選單，中間加上可自由瀏覽的熱播影片，下方放重點推播及新電影，右側則是App等功能。滿足產品廣告的需求以及用戶所想要的功能。從左到右則是較常使用的工具順序配置。

第2款

針對50歲以上長者，將畫面單純化，每個區塊都放大，排版的主要構成只有3種，影音廣告、Banner、選單，讓他們可以安心操作，視覺動線為由上往下由左到右，希望可以讓使用者先瀏覽過廣告再進入選單的選擇。

第3款

綜合前面兩款，在之中做取捨，上畫面的上半部保留了足夠的資訊與廣宣版位，讓使用者優先瀏覽廣告，也保留操作的單純性，下方使用圖像的顯示方式把主選單攤開，讓各個年齡層都能輕鬆使用，版面配置為3:1，視覺焦點落在廣告版位。

在繪製出線稿後，我使用Flinto製作了簡易的prototype，讓用戶進行操作並給我們feedback。

③製作Prototyping、用戶測試

經過測試發現，不管是那種年齡層，第3款最受好評，大部分的人喜歡較乾淨的視覺（甚至可以在乾淨一點！），也喜歡橫式選單的呈現方式，但對於第2款的選單特別有印象，覺得閱讀輕鬆方便，家中的長輩操作起來也不會有問題

在討論過後，我們選第3款修改為第4款的版型並製作成prototype，並將廣告的數量再下降，使視覺動線更集中，並把連結分享給我們的使用者做線上測試，經測試發現，這個版本的閱讀速度比上個版本高出許多，使用者能馬上理解，家中長輩也沒有操作上的障礙。

這一款版本的配置為將第一Focus(遙控器選取焦點)直接放在選單上，讓用戶意識到該從這裡開始，接著可以往上看瀏覽相對應選單的內容。整體分成上下區塊，讓視覺更單純。

④加入細部設計

首頁選單優化

在確定基本框架後，為了讓介面和操作感受更靈活，將選單加入了已訂閱產品icon往前排序的功能，並顯示「已訂」的標籤，讓使用者縮短選取路程。Icon的排版呈現也調整為與文字 2： 1的分佈，較好閱讀辨識。

其他外部產品如需上架MOD選單，也須配合相關icon規範，確保呈現一致性。

字級的選用＆Icon的辨識性

考慮到MOD的使用者年齡廣泛，因此我們將閱讀文字最小字級設在28pt，讓長輩或是小孩都可以輕鬆地閱讀。 另外也將選單與icon和顏色做搭配，讓不同年齡層的人可以依照不同的辨識方式使用選單（例：爺爺總是記得看新聞要按藍色的，或是弟弟記得要看兒童是選小馬。）

設計多種款式版位供廣宣運用

為了滿足公司的廣告需求，我們設計了3種不同的版型供選擇，讓產品PM根據其目標和需求選擇不同的版型，從而更好地達到廣告效果。另外也加入選單與上方版型一起切換的連動功能，讓用戶在切換選單時也能同時瀏覽該類別中的最新內容。

以下是這些不同版型的詳細說明：

①Barker channel+Banner版型：這種版型適合那些希望在首頁上展示多樣廣告內容的產品。它包括一個橫幅廣告和一個旁邊的廣告頻道，使廣告宣傳更多元化，適用於頻道、直播、大型活動連線等，用戶可以一進首頁直接觀看直播頻道。

②影片版型：對於希望以影片形式呈現廣告的產品，這個版型可以讓用戶的注意力更集中。

③海報牆版型：這個版型適用於希望以圖像或海報形式一次展示多個內容的服務，當用戶在切換選單時，會須經過各種不同的內容，我們希望用戶在經過電影的選單時可以同時注意到我們有什麼先上架的好片，不用一一點進去。

外部廣告的部分也特別在首頁下方設計了大版面區塊，搭配第一頁的連動廣告，在每個大型賽事及節慶時都帶來了上百萬以上的營收。

⑤交付設計

Feedback & Survey

在上線前，我們進行了使用者的易用性測試，也請使用者留下建議，意外的新版的設計的問券結果好評高達90%！這讓我們感到很意外（因為MOD的用戶年齡偏大，較不易接受新的修改，但這次的結果卻出乎意外的可以被大家接受。）

當然其中也有關於可以更好的改善意見，我們將這一部分納入下一階段的更版，讓整體開發時程不受影響也可以持續地精進。

上線後使用者回饋

簡單、容易！用顏色非類清楚很好 簡潔俐落，可以很快找到自己想要的 很喜歡可以預覽內容、節省我的時間 耳目一新 很友善的介面 內容變豐富了，而且一目瞭然，很棒

我們持續觀察用戶在改版後的反應，有高於80%的正面評價，且針對這次改版0客訴（以往老客戶介面受到更改常常會有很大的反彈，這讓我很驚訝）！ 首頁下方廣告版位也非常熱門，在每個賽事轉播檔期銷售一空，創造了亮眼的廣告收入。

下個專案

👉 MOD影劇全享包：整合新舊產品，幫助用戶輕鬆的觀影