▍詳細

▍項目概況

01 | 目標：將現有5款產品合而為1

2021中華電信MOD推出新的訂閱計劃「影劇全享包」，成為MOD旗下超過100萬訂閱用戶的主力產品，此產品須將舊有用戶和新用戶整合至同一個服務產品裡，為本次的改版主軸。

02 | 專案挑戰：需積極與產品團隊溝通協調

整合5個產品會影響到不同產品的使用者習慣，也會面臨的技術限制等，需積極與其他產品團隊溝通協調。

03 | 角色與交付

在這個項目中，我和研究員與專案PM及產品PM合作，負責 UX 和 UI 設計流程與產出部分，從定義問題到交付最終設計給工程團隊。

04 | 成果

💡作為HamiVideo的新版設計並採用，獲得App Store裡4.5的評分 📒建立起UI團隊的Design System

MOD影劇全享包是什麼

MOD影劇全享包是一個整合了5個產品的影視娛樂平台，為用戶提供無縫的觀影體驗。在「MOD影劇全享包」推出前，所有MOD的影視產品是分別出售的；​隨著串流媒體興起和疫情期間生活方式改變，消費者對線上觀影的需求增加，MOD也為了因應市場的變化，將自有的5個影視產品合而為1，讓用戶可以以一個價格觀看所有類型影片，也省去了切換不同產品的煩惱。​​這個轉變同時必須考量到原有「購買單一產品」的用戶，也必需同時整合5個產品。

專案設計流程

①使用者研究

新用戶內心OS:馬上給我「我想看的！」

用戶在使用影視產品時，通常都是想放鬆的時刻，在這時他們會希望可以不費吹灰之力就可馬上開始觀影。如果途中需面臨「無法播放」、「另外付費」、「需要額外的操作和思考」時，都會讓用戶覺得使用費力、甚至想放棄。 ​

在 既有用戶 調查問券的結果中發現幾個共同想法：

😕 害怕如果產品整合在一起，會找不到原來熟悉的地方，亂點可能會不小心付錢 ，用起來壓力很大。

😅 總是要先選擇館別才能找影片，搜尋時很浪費時間，不人性

🤯 整合在一起太多一層一層的目錄，完全不知道自己在哪，能不能簡單一點？

“總體來說與「不明確的階層」和「難找片怕犯錯」是大部分使用者的痛點。 MOD雖然有海量的影片，但卻不易被發掘，難以滿足使用者「立即找到想看的影片」的需求。

②定義問題及目標

我們透過內部會議和團隊一起進行了一次腦內風暴，讓每個人對設計都有初步的認識，並提供建議，讓大家對專案有一致的想像，並朝著同一個地方前進，並針對前述的痛點訂出一個解決的目標（雖然大家針對用戶痛點有一定的聚焦，但在討論的過程也總是提出其他客訴案的問題點，要一邊收斂一邊納入其他建議與改善方向也是一大工程）。

階層過多，到觀影前太多步驟

MOD的產品架構及分類在最初就和其他影視類產品不同，採用以產品的方式來陳列目錄，然而，在不熟悉產品的情況下，使用者無法準確地找到自己可以看或是想看的片，很多人需要花很多時間在思考到底要去哪個地方看，或是思考自己訂閱了什麼產品。

目標❶『縮短觀影路程』

影片搜尋不易

​在使用者想要找一部片時，往往會透過關鍵字搜尋片名或是演員及導演，但目前MOD卻是必須先以特定的搜尋方式來區分，選定後才能在下面查找，讓使用者反覆來回搜尋，增加多餘的負擔。

目標❷『優化找片功能』

使用者不熟悉產品、怕犯錯

在瀏覽影片時，使用者必須點進去才知道自己能不能看（是否需要付費）、和查看預告片及集數，造成在瀏覽過程中體驗不順暢，相較於其他OTT，仍有改善空間。

目標❸『明確標示資訊』

③發想並提出解決方案

最終我們採取目前影視產品裡用戶習慣的配置作為基礎框架，開始做發想。

目標❶『縮短觀影路程』

在和相關單位討論的過程中，發現讓用戶從「自己訂購的館別」進去這樣的流程，雖然對單⼀產品的⽤⼾很直覺，但卻不便於訂購影劇全享包⽤⼾，這失去我們⼀開始的原意，因此在流程中我們做了調整，以用戶為第一視角的觀影旅程從頭跑一次，把能節省或多餘的步驟省除，幫助用戶達到快速觀影。

整體介面的架構也分為左側的收合功能選單，以及右側主要瀏覽區，使用者第一次進入影劇館時會焦點會Focus在5個產品中自己已訂閱的那一個，幫助選擇。

左側的選單則有防迷失的功能，當使用者不知道自己目前位於哪個階層時，他可以按遙控器的返回，最終會叫出左側選單，點選第一個Focus時即可回到影劇館首頁。

左側選單的配置也可因應不同時期的功能新增或減少，並將所有功能整理於此處。

目標❷『優化找片功能』

1.改善搜尋介面

用戶不再需要選定類別才能搜索，透過關鍵字即可查看所有結果。 搜尋的首頁也在預設狀態新增了「搜尋歷史」、「熱門搜尋」、以及「推薦影片」功能，方便用戶省去查找的時間，其中推薦影片也可以方便產品PM操作近期主打。

2.新增的篩選功能，幫助用戶可以交互查找

以往MOD用戶最常使用的分類別為「年代」及「地區」，但卻只能搜尋單一分類，無法針對某一單一類別下去做篩選（例：1989 日本）因次這此改版的過程裡也將影片做好不同的tag與分類，使查找不在只是用樹狀目錄的方式瀏覽。

3.新增相關連影片

這次在資訊頁下方也新增了「相關影片」的片架，儘管用戶只訂閱單一產品，還是可以在此找到平台上的其他產品內的影片，促使用戶導購。在劇集頁面的呈現也將季、OVA、電影整合至同一頁，使用者可直接接續觀看，不會被中斷觀影過程。選集的方式以往為一片一片的海報，這次將所有資訊整合至同一頁，並記錄使用者上次觀看的位置，讓每次進來選集不在有痛苦的斷點。

目標❸『明確標示資訊』

1.已訂閱/未訂閱資訊

在有訂閱的產品（包含單片租借）都會加上橘色已訂勾勾的標示，使用者只要看見橘色勾勾就知道這是可以直接觀看的影片/區。

2.強化影片資訊

在以往的產品裡，用戶必須點進去看才知道影片的內容，在這次改版裡，用戶可「將焦點停在該影片上」便可直接預覽，左方也有簡易的影片敘述，影片資訊頁的部分也使用自動播放影片的形式取代海報，使用者即可直接觀賞內容，減少操作與縮短決策時間，另外也加上「行銷短說明」的欄位，讓內容PM可以操作活動及臨時宣佈更新資訊。

④驗證想法

在有了初步的概念後，我使⽤Framer X 做了初步的模型，讓使⽤及操作更為擬真，透過它我們可以更好的與⼯程師、PM 溝通，確保⼤家腦海裡的想像是⼀致的。

在與決策者溝通時，我們請前端⼯程師製作了可使⽤機上盒操作互動的android版本，讓每個⼈、及受測者可更⾃由的操作介⾯，體驗更真實的感受。​並透過使⽤者操作後的回饋，逐⼀驗證結構和選單是否清楚明⽩。

為確保我們的解決方案在實際應用中達到預期效果，我們採用了多種驗證方法，其中包括使用者測試、A/B測試。以下是我們所採用驗證方法：

使用者測試

測試範圍： 我們讓30位使用者參與測試，這些用戶包括了既有MOD用戶和新MOD影劇全享包的潛在用戶。這有助於我們瞭解不同用戶類型對於新設計的反應。

執行的任務： 我們為參與者設定了一系列實際使用情境，包括尋找特定影片、訂閱產品、使用搜尋功能、觀看預告片等。這些任務涵蓋了一般用戶在平台上的日常活動。

獲得的反饋： 我們記錄了參與者的操作過程，包括他們的點擊、滑動、搜索和反饋意見。在測試過程中，我們要求參與者思考出聲，分享他們的想法、困惑和建議。這些反饋提供了寶貴的資訊，有助於我們了解用戶在使用新界面時遇到的問題和喜好。

A/B測試

測試範圍： 我們在模擬的UI上實施了A/B測試，將新設計的界面（A組）與舊有界面（B組）進行對比測試。這允許我們在實際用戶中進行直接比較，評估新界面是否優於舊有界面。

參與者的人數： 我們讓用戶群組的30人參加A/B測試。

執行的任務： 參與者在A/B測試中執行了各種任務，包括查找影片、訂閱產品、觀看預告片等。我們關注了他們在不同界面下的操作效率、成功率和滿意度。

獲得的反饋： 我們分析了A/B測試結果，包括用戶的點擊數、轉換率、思考時間等數據。這些數據提供了直觀的比較，讓我們能夠評估新設計在用戶參與度和轉換效果方面的表現。

討論結果：

我們將使用者測試和A/B測試的結果相互對比，以確定新設計在實際使用中的表現是否與預期一致。新的設計在提高用戶參與度、提升轉換率、簡化用戶流程方面都取得了積極的效果。

這些驗證方法的綜合結果為我們的設計決策提供了有力支持，並確保我們的解決方案在實際應用中取得了成功。我們持續關注用戶的反饋和數據，以確保設計的持續優化和改進。

成果

💡作為HamiVideo的新版設計並採用，獲得App Store裡4.5的評分

最終，由於公司的策略考慮，我們的設計並未上線（因為公司決定專注發展OTT）。然而，此次的設計成果成為了後續在Hami Video上整合MOD影視產品的架構，後續HamiVideo也在App Store裡獲得4.5的評分。

👉HamiVideo為中華電信的線上影視串流產品。

📒建立起 Design System

在以前的團隊設計檔案中，缺少了UI元件庫的部分，並且缺乏一致性的規範和邏輯。在這次改版過程中，我們將Design System納入，以便未來的設計修改更加高效，減少了冗餘工作，讓後續的設計師能夠快速理解和修改，保持了樣式的一致性。

下個專案

👉 HamiVideo Design System