Tolka App
設計種類Mobile 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，依據團隊的市場調查，在聊天室內增加語音訊息、照片訊息、聯絡人訊息...等功能，影音播放器則新增拖曳播放器、放大縮小、橫放狀態自動切換全螢幕、直播聊天室...等功能。
改版App全部的視覺與重製文件
由於舊有的紅黑色調並不符合影音通訊APP的使用情境，而部分既有功能在流程上也有一定的問題，因此重新設計了包含聯絡人頁、好友聊天室、群組聊天室、APP設定頁、節目選擇頁，並考慮多國語言字串的狀況。作業上，文件補製由UX設計師負責，新視覺重製由視覺設計師負責。
前期研究與調査
在新功能的部分，使用競爭産品分析，蒐集影音類與通訊類二種類型APP做比較。經過整理與討論之後，盡可能設計出適合公司産品現階段的功能與使用流程。

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