News APP Revamp Project

About the project

TVBS新聞為傳統電視媒體，於2016年正式上架新聞APP，提供使用者在手機上瀏覽到最即時的網路新聞、新聞影音，也希望藉此展現數位轉型力。

TVBS主要流量來源為新聞網站，來源最多是來自社群導流、Google搜尋，這些都是倚賴其他的平台，因此確保網站中的廣告營收，啟動本次計劃，提升自流量(APP)的能力。

從過去的產品開發流程中發現，都是以新聞內容為主導產品發展走向，缺乏對使用者的考量。經過初步的市場分析，與對照公司的營運目標，本計畫以提升個人化服務體驗、解決目前產品使用痛點及作出產品差異化為主軸，推進產品達成公司年度目標。

---

Design Process

此執行計畫包含競品與市場分析、利害關係人訪談、使用者研究、產品研討、產品設計與Roadmap規劃。計劃團隊包含設計顧問 x1、PM x1、新聞編輯 x3、Engineer x4、Product Designer x1，需要在跨多個部門合作下完成研究與設計，我參與了全程的工作階段，主要負責：競品分析、內部專家訪談萃取、使用者研究、UI/UX設計、互動設計與用戶測試...等。

Product Analysis

我們招集各團隊的一名代表一同完成競品分析，透過這個跨職能的方式，了解到從不同的職能角度看到的洞察，同時促成跨團隊交流、同步計劃進度給各部門。
綜觀TVBS直接/間接競爭的APP，分析與研究完成後，我們從使用者歷程中的各階段，統合出其他產品的策略與功能佈局。
跳脫既有TVBS視角，了解使用者所渴望的內容體驗，與產品目前的市場定位以及改版後想達到的定位。

競品分析模板

分析結果統合後，依照功能產出量化的結果分成3組，此結果也成為後續User interview訪綱的依據之一。

User Research

為了解使用者對於現有TVBS APP使用回饋與建議，評估TVBS新功能使用意願與吸引力，在招募受訪者的條件分為兩類，在現有用戶部分，根據GA後台的數據，定義受訪者條件範圍

1. TBVS現有用戶：TVBS App現有用戶 x3
2. TVBS濳在用戶：TVBS web/電視台用戶 x2、非TVBS用戶 x3

使用者訪談現場紀錄(招募團隊成員代表一同參與)

使用者訪談萃取

Problem

統合以上研究與分析，找出了許多的使用者痛點與需求，對應Project Objective，我們希望可以回答的問題是「是什麼原因用戶不看更多/回訪?」

缺乏直覺性的體驗設計

首頁

1. 頂部的圓形快捷區塊，使用者回饋曾經點擊後發現內容不符合預期，圖文不符的感覺感受差
2. 往下滑後的新聞列表，即時新聞與5則議題新聞穿插的Layout，多次重複的直直橫橫，反而讓使用者視覺上感受到混亂，同時文字過細的關係，在移動中瀏覽APP，容易看不清楚

直播

1. 在首頁中的第一屏幕中，點擊瀏覽數據只佔了首頁全部的2%，使用者也反饋，看不出來這裡是直播影片的區塊
2. 底部的直播內頁點擊過去後，對使用者來說，就是一個圖文列表，並不會有想點擊看影片，即使有提示play icon，也無法提起使用者想去點擊的慾望。

缺乏精準的內容策略

1. 內容邏輯是依照新聞由新到舊排序，當記者編輯們觀察到可發展的主題，製作成議題整理包，這種方法相當依賴經驗與新聞敏感度，理性角度去考量，不具備可靠的標準。
2. 以「直播」頁來說，內容上也是以從新到舊的排序，當使用者想快速在此處找有興趣的新聞時，是無從下手的。
3. 對於其他APP的功能來中，最右側的「會員」也無提供任何會員專屬功能，名稱上不符合其功能帶給使用者的期待。

Synthesis

沒有從使用者的角度來產製內容，造成了使用者不想瀏覽更多，無法增長黏著度的問題所在。
內容+體驗設計才能完成一個完整的產品，提供最新的新聞對於使用者來說只是基本，因此我們將以個人化增加使用者看到有興趣的新聞為目標核心，吸引使用者多看幾頁、多停留瀏覽一段時間。

打造個人化且多元內容的探索，貼近使用者的體驗

Ideation Workshop

了解問題後，發想解決方案的過程，邀請所有團隊成員進行了一個簡單的ideation workshop，透過這樣跨多部門的合作方式，藉此一次整合大家的建議，每個概念再利用BUT評分方式排序，最後請Stakeholders做最終決定，在一個下午的時間內，聚焦出明確的方向。

Design Strategy

2016年開始累積了的使用量，與團隊(新聞編輯、Engineers)一同評估後，從商業與技術面的風選評估，我們分成三個階段，每個階段都有一個重要任務，每個階段都有提升體驗的重要任務，從改版的初期點燃使用者對TVBS APP的熱情，再增加實質上能建立習慣的更多功能持續擴展我們的服務。最後，深度的個人化功能讓TVBS真正的成為使用者日常生活的核心服務。

Phase 1

Connect & Impress
全面打底，將首頁使用體驗優化，搭配下半年選戰議題、民調投票模組更好的視覺與互動體驗，給使用者煥然一新之感。

Phase 2

Fortify & expend
利用直播內容、生活小工具、使用者最關注的生活好康、在地新聞推薦機制，讓TVBS真的走進使用者日常，將既有使用者習慣建立、同時拉取新客並提高其留存率。

Phase 3

Reimagine & Enable
深度個人化內容推薦機制已成熟，再疊加使用者客製功能，真正打造使用者對於TVBS APP的歸屬感、認同感，提高精準與細膩的客製化功能是第三階段的主力。

Prototype & Testing

Mockup即時新聞：為本次的核心重點，設計多版本，提供使用者測試。
在測試過程中，採取滾動式調整，當一場測試訪談結束後，有明確的缺點就會直接調整，這樣的做法，可以直接篩選掉無效的部分，在越後面的訪談自然就會產出最精粹的設計。

Prototype

A/B Testing

在使用者訪談中，得到的明確回饋與痛點，直接進入A/B testing的開發流程，上線、快速取得反饋，以下是其中一個小實驗，在訪談中使用者都不理解我們在底部導航列「直播」的語意，有人甚至覺得是主播開直播，因此我們測試「直播、影音」的wording，並且增加提示紅點，測試使用者是否會因此增加點擊或是增加PV，實驗結果後D點擊排名第二但PV最佳，在對標Product Objective後，以D版本做為最終版。

重點功能 Final Design

Design System

重新整合視覺語言，將顏色、風格更符合品牌調性，UI模組一致性，視覺上自然產生和諧與舒適感，同時定義出一個新的漸層色，利用此新的元素，利用線條與藍色的結合塑造TVBS專業可信賴的形象，亦暗喻即時、快速與世界連結。

即時新聞 最大化首頁的探索

1. 選單設計上增加箭頭引導設計，讓使用者知道還有其他分類可以滑動。
   圓形快捷統合內容與UI，增加更新提示表示為熱門新聞，無提示則表示非新聞的工具型功能，區隔出內容特性，避免使用者混淆，同時圓型中的視覺也規範了一個只能用真實照片的原則，將視覺一致性。
   直播新聞為內容與商業策略上重點，提示出動態的icon，增強直播的連結感，並排呈現在第一屏幕即可一目瞭然、增強印象，這麼做也是為了將空間節省，讓即時新聞可以馬上看到，讓使用者在開啟APP的第一畫面，得到清楚的新聞探索畫面。
2. 議題包模組整合成一個區塊，解決使用者覺得首頁滑動起來感受上凌亂的問題。
3. 在使用者訪談中我們挖掘到，看新聞的使用者，多數喜歡看的內容之一就是熱門新聞，有的是因為社交需求要有了解最熱的話題、有的是單純跟風，我們利用輕量的熱門關鍵字設計，不壓縮到底下更多即時新聞的空間，增加熱門度的新聞探索，勾起使用者的興趣。
4. 個人化區塊在使用者最常瀏覽的新聞列表中，在不影響使用者習慣，就是在使用者的閱讀歷程中優化所看到的內容，我們夠過使用者瀏覽過的新聞分類與其他人也看過的關聯新聞，整合成一組AI模型呈現出內容。

優化影音

1. 從用戶訪談與內部客服信件中收到大量不容忽視的直播需求，重新提供24H的直播體驗，影音自動播放、自動續播、續集連播並新增分類，更符合現在的影音瀏覽習慣
2. 在滑動時影片會置頂，想瀏覽底下的詳細文字新聞，同時保留正在播放的影音體驗。

民調投票

為APP與使用者最具互動性的功能之一，從使用者訪談中得知，參與者偏好立即看到結果，了解自己和他人想法的雷同及差異性，所以首要提供即時結果呈現，以及縮減題數，能有效提高完成填答率，並且也解決原本user flow不順暢的問題。

Takeaways & Learning

Design Impact

本次是TVBS第一次由產品設計主導的大型計劃，從Kick-off Meeting開始，導入Design Thinking流程，成功在計劃完成後，讓產品設計的建議被採納，成為可以影響產品的一部分。

成果

DAU正成長
根據過去的產品大幅改動經驗，都會流失掉10%的DAU與日均PV。使用者是討厭改變的，從過去的經驗比對，是一個正向的回饋與成長。

跨部門團隊學習

這次為了打破跨部門間的隔閡，加快計劃的推動，在計劃一開始，我們做對的是，將不同部門的的人，納入計劃的成員之一，在每次討論的過程中，除了可以達到將進度同步給各部門之外，也能將產品設計的核心概念分享給大家，從中互相學習與成長，將大計畫切割成。