Tolka App
設計種類App Design
市場分類通訊、娛樂
負責工作互動設計、流程設計、Prototype
任職公司精秝科科技股份有限公司
任職時間2017.08~2018.06
TOLKA APP讓使用者可以即時地與親朋好友們討論正在觀看的節目。TOLKA APP主要的節目内容來自於母公司ADTH自家的IPTV、Tuner、Set Top Box以及與TOLKA合作的相關廠商。

未來將可與其他TOLKA産品或技術結合使用,如影片版權浮水印和目標受眾廣告。並將提供電子購物平台,藉由目標受眾廣告與特定訂閱者的興趣做配對。
問題點分析
加入團隊後,首先,與團隊夥伴一起分析專案目前遇到的問題與需求。主要可以分為二個大方向:1.開發App新功能、2.改版App全部的視覺與重製文件。
開發App新功能
Tolka主要是結合通訊功能與影音功能的APP,一開始的專案裡,功能還不完全。因此,依據公司的要求主要開發以下的功能:
1.聊天室内,新增語音訊息功能。
2.聊天室内,新增照片訊息功能。
3.聊天室内,新增聯絡人訊息功能。
4.手機橫放時,自動轉成全螢幕模式。
5.新增拖曳播放器與放大縮小的功能。
6.播放器區塊内,新增關閉影片、加入最愛、全螢幕模式、直播聊天室的按鈕。
作業上,由二位UX設計師分工負責。
改版App全部的視覺與重製文件
由於公司對於專案初期(2017年)之視覺並不滿意, 因此,依據公司的要求重新設計以下的功能:
1.聯絡人部分,補製舊流程文件與重製新視覺。
2.聊天室部分,補製舊流程文件與重製新視覺。
3.APP設定部分,補製舊流程文件與重製新視覺。
4.選擇節目部分,將按鈕從tabbar改成sidebar,並重製作流程文件與新視覺。
5.由於為多國語言,在所有文件中標註字串編號。
作業上,文件補製由UX設計師負責,新視覺重製由視覺設計師負責。
專案流程
前期研究與調査
在新功能的部分,使用競爭産品分析,蒐集影音類與通訊類二種類型APP做比較。經過整理與討論之後,盡可能設計出適合公司産品現階段的功能與使用流程。

在視覺改版與重製文件的部分,使用内容分析法,先分析原有的APP的所有流程與架構,並和團隊成員討論功能上之落差、如何改善,最後重製所有流程圖、架構圖、視覺稿。
Flow Chart
我們將影片播放器、節目選擇、聯絡人、聊天室、設定等主要功能,依照不同的需求,再細分成各個小功能以製作操作流程圖,並將使用者可能遇到各種特殊情況詳細地放在流程圖裡,包含基本的六種頁面狀態、網路連線狀態、使用者與聯絡人關係、使用者手機權限等。同時,盡可能符合ios與Android平台的設計規範。
Information Map
我們列出所有産品可能出現的頁面並將他們編號,同時使用規格文件命名並規劃成完整的資訊架構。同時,幫助整個團隊迅速地了解整個産品的架構,以及App中各個頁面的路徑。
Wireframe
在完成基本的操作流程、資訊架構後,我們使用Sketch建置各個頁面的基本骨架,並盡可能將各個基本元件放在使用者最直覺的位置。同時,與團隊成員討論各功能的可行性,並使用Invision做Lofi - Prototyping 檢查並修正操作流程圖或資訊架構圖中出現的錯誤。
Mockup
在完成前期的所有規劃後,交由視覺設計師設計TOLKA APP 的icon與配色,並設計各個頁面切換、元件觸發的微動畫。最後,上傳至Zeplin與公司團隊的各個成員確認、修正頁面視覺,並裁切相關的按鈕圖示、聯絡訊息圖示,製作9-patch圖等提供工程師下載。
Prototype
關於Prototype的部分,在Wireframe階段我們先使用Invision測試APP的基本流程。在Mockup完成後,我們再次使用Invision做完整的流程測試,並使用Protopie針對不同的細部功能,模擬各種效果與功能,並以此與團隊成員做最後的確認,包含上下拖曳播放區塊、拖曳或點擊節目選擇按鈕等。
Invision Link : User Flow Prototype
Protopie Link : Side Menu & Player

An audiovisual entertainment and social networking platform.