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%。從過去的經驗比對，是一個正向的回饋與成長。

跨部門團隊學習

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

About the project

ESG(Environmental, Social, Governance) ，是為了評估企業是否符合永續發展目標的指標，全球永續意識也逐漸提升。此計劃將為新聞品牌TVBS，將ESG的內容整合成一個全新網站，目標推廣永續理念。

Project Goal

希望藉由網站，第一是提升品牌質量，以TVBS品牌之名，推廣全世界的永續報導、新知，並且具備永續倡議的能力，第二增加商務合作機會，成為企業、團體的首選媒體，幫助他們推廣永續形象。

Understand

Competitive Analysis

為了理解市場現況，針對相同為媒體產業的直接競品分析，天下、遠見、UDN(倡議家)，都已具備完善的網站架構，累績扎實的新聞內容，發現內容上，不外乎提供符合企業風格的ESG新聞報導、EGS趨勢內容，與目前TVBS的呈現方式，明顯不足。

Secondary data

在眾多的二手資料搜集中，根據B Lab 《2022 ESG策略調查問卷》，企業認同做好ESG有助於營運，並且是應盡的責任，其中提升品牌形象為第一，其次是回應消費者期待、吸引人才加入。

對一般民眾來說呢？什麼是ESG?

根據政大商學院信義書院與東方線上消費者研究集團發布的《2022消費者永續指數報告》，詢問ESG對於他們的理解，E環境議題 45%、S社會責任 38% 、G公司治理 17%，可見一般民眾只了解到環境議題，對於ESG的理解是不夠全面的，換言之，企業建立的ESG形象，以現階端的民眾認知，是無法接收到的，企業所理想的期待，也無法達成。

Design Direction

實踐TVBS成為「轉譯者」的理念 > 永續、共好

to B為企業提供一個更能和一般民眾產生共鳴與互動的平台
to C 幫助一般民眾更了解甚至進而參與 ESG 的行動

Workshop

為了將想法多元，執行了一個發想Workshop，針對目標發散出不同的點子，以及透過這個階段，取得利害關係人的對於設計方向的反饋，即時取得並且回應。

Prototype & Testing

收斂點子後，最終設計出兩款的概念設計，提供測試。
A 利用高度的互動性首頁，吸引民眾點擊內容
B 具張力的意象視覺，長頁面的設計，提供民眾在當頁一次掌握到足夠的資訊後，再選擇點擊內容。

最終，測試結果以A的反應最佳，7成的人都會馬上點擊，並且平均會觀看6.5頁

Final Design

首頁

最終設計上，除了增強互動性，也增加了影音內容，視覺上更具互動性、商務角度上也象徵我們具備媒體影音內容。

永續生活小撇步

將永續新知、內容包裝成生活小撇步，讓民眾輕鬆了解，同時表現出轉譯內容的意象。

Takeaways & Learning

成為設計主導，帶領產品走第一步

過去都以業務或是內容為主導整個產品開始，在這次計畫中，以設計團隊的角度為出發，挖掘出全新的觀點，過程中發想階段比預期花的時間還久，但最後找出關鍵點的同時，感受相當值得，從中我逐漸訓練出，更快速的發想能力，快速且精準的找到機會點。

痞客邦是一個部落格平台，提供免費建立個人部落格、撰寫部落格文章、分享貼文等服務，本次專案即是痞客邦APP改版

Project Summary

痞客邦為部落格平台，已成立19年，創作者們，都以電腦為主要使用裝置，隨時手機裝置普及，自2018年APP上線，希望將所有服務整合在APP中，並且適應最主流的手機使用習慣，藉此解決創作者能隨時隨地發表內容，使用者在瀏覽內容上更便利。

我們藉由設計思考，打造全新網站的過程中，能快速避開開發誤區、即時討論並決策出最佳解法，高效率的開發流程。
而我負責UI/UX設計師的角色，參與的前期的到上線3個月後的時間。

Problem

將目前產品服務攤開來，更清楚了解現在的產品，與其他競品的差異。從中理出以下三點：

1. 產品服務單一、老化，同時使用者族群也跟變老
2. 創作者(部落客)與使用者(瀏覽者)的互動機制沒有更進
3. 痞客邦品牌本身，與創作者(部落客)的聯繫淡化

目標使用者

對於痞客邦來說，使用者分成兩類，在使用者訪談上能更精確：

1. 創作者(部落客)：平台擁有9億篇文章內容，全都仰賴於這些部落客們，曝光量、編輯易用性、互動性為創作者最在意的3個重點
2. 使用者(瀏覽者)：最多使用者的來源，是從google搜尋，減少廣告量(優化瀏覽體驗)、流暢的使用動線、高質量內容為使用者們最在意的3個重點。

發想概念

從三個角度出發：痞客邦(即APP)、創作者、使用者

強化創作者與使用者的關係：社群互動
大量的部落格內容，全都是環繞著生活，創作文章後，使用者得以即時互動，雙向達到一個正面循環
喚醒原使用者、增加新使用者：新功能
多樣競品出現後，長文章體驗已不符合年輕族群習慣，增加新的短貼文功能與任務機制，將格局拉大

發想圖

Prototype & Testing

內容架構

將概念文字化呈現出來，PM為主要負責人，將此建構出來
Function Map

Wirefrmae

在這個階段加入技術主管協助，確認功能可行性，同時在加入初步的UX體驗

wireframe局部

Prototype

Final Design

以品牌的IP痞客狐Happix作為視覺延伸，藉此為未來品牌行銷上鋪路，除了在UI上以IP的插圖點綴，主色上也選用相似的橘色來表現。

本次計劃包含我有兩位UI/UX設計師，設計的部分負責首頁、發表文章功能與優惠券。

首頁

從原版本的圖文列表牆，以使用者的角度重新思考，打造只有屬於創作者與使用者共同的社群圈，透過置頂的問候語提示使用者在不同時間區段，同時顯示當下的熱門關鍵字，隨時跟上最新話題。

發表文章

將原版的發文功能，設計得更流暢，將上傳圖片流程可預覽、流程直覺，解決使用者在發文後才發現圖片上傳錯誤要重發的痛點。

優惠券

我們在痞客邦中發覺到優惠好康的內容與服務，希望透過在APP曝光，藉此茁壯此商業模式，在原版中此功能也存在，但欠缺良好的使用體驗，主要的改動是將優惠券的使用狀態分開，並且提供票卷的生效/到期時間，將此功能更加完善。

Takeaways & Learning

理性與感性的設計思考

這是第一次在公司推動設計思考，面對PO是一個感性導向的人，我們透過與數據團隊的合作，以及一同腦力激盪發想的方式，利用數據的理性判斷出最佳解決方案、感性的創意發想出充滿創新感觸的產品。

成效

上線後，追蹤2個月後，數據上並無變動，但透過後續的意見訪談，獲得80％正面好感度，回饋包含使用者看得見品牌形象外，使用體驗友善、直覺，並且更貼近日常的使用者情境。

About the project

悠遊卡是臺灣一種非接觸式儲值卡IC卡，可使用來搭乘大眾交通工具外，也可在部分商店，作為支付工具。
根據客戶提供的2020年調查，全台灣所有支付卡服務中，悠遊卡的使用者佔比80%，位居第一。
過去客服部，都只有人工的客服服務方式，在科技趨勢與日益增長的用戶數，因此希望推出AI智能客服機器人，提供給使用者們自動化的客服服務。

Design Process

實際的執行時間不多，因此在設計流程上，採取得到資料後馬上收斂，並且再發散功能、收斂最終結果的方式，快速且精實，同時利於隨時應變客戶端的需求。

Understand

需求訪談

為了了解客戶對這個專案的全方面的想法，從現在、過去、未來，不同時空狀態，同理客戶的需求。
現在：希望智能客服能達成什麼目標？想改善哪些問題？
過去：過去曾經遇過哪些狀況，成功/失敗的案例有哪些？
未來：希望智能客服能帶來什麼價值？
透過與客戶不同部門的需求訪談，過去的踩過的錯誤得以避開，現在遇到的的痛點是需要被解決的，以及未來的目標為何，得以獲得應有的價值。

Project Goals

悠遊卡實體票券，是目前大眾最普及的應用，配合悠遊付的推出，同時象徵數位化升級。希望透過智能客服機器人，提供使用者線上、線下的整合服務，加速使用者得到問題的解答，達成全方位的客服系統。
減少真人客服的工作量，因為隨著真人客服日益增長，客服量過多就會影響服務品質。
使用族群龔固後，增加行銷服務曝光率，成為推廣路口之一，同時將智能服務成為品牌形象的亮點。

The Progress

定義需求

1. 圖文功能：當遇到操作上的問題，有時候透過電話語音無法清楚理解，因此需要提供清楚的圖文功能，更容易理解。
2. 基礎QA：希望最快的方式讓使用者看到基礎QA，有效排除基礎問題的用戶，將進階問題留給需真人客服的用戶，降低客服量，提升服務品質，強化正向的公司形象。
3. 跨年齡易用性：使用者年齡層非常廣，從5-65歲以上，因此需要多方考量不同年齡層的易用性問題。

功能架構

分析訪談結果後，將需求濃縮在這個架構中，除了基礎的出對話，利用牌卡與跳出連結方式，透過點擊每個快捷問題，提供使用者最完善的解答。

重點功能 Final Design

Design System

色彩上應用品牌色，透過訪談得知這四個品牌色都各具有不同的意義，因此在設計上除了避免誤用外，在視覺上需符合品牌風格，成為這次的挑戰之一。

快捷牌卡與按鈕，文字尺寸調整

使用者在對話前，即可透過快捷入口，找到答案，或是開啟一個對話，讓機器人快速引導至想要的答案，明顯的的文字尺寸調整功能，提供跨不同年齡層更友善的文字閱讀體驗。

多形式出話樣式

機器人回答的對話泡泡，應用選擇題按鈕、icon牌卡、圖文方式，使用者在視覺化狀態更容易聚焦做選擇外，同時強化體驗的友善性。

聯想式輸入

使用者輸入上更便利快速外，同時背後也訓練機器人的數據庫。

轉真人文字客服

複雜問題上，我們設計出提供使用者轉真人文字客服的流程，貼心加入提示顯示在線等候人數，切換頭像方式區別，對話中的對象。

語音輸入

悠遊卡的使用族群年齡層很廣，加入語音輸入功能，將友善性再提升（行動裝置原生鍵盤就有此功能，這裡是電腦版本裝置示意）。

Takeaways & Learning

成果

後續追蹤後，每個月平均1-2萬使用次數，降低了電話客服的數量。
從年齡層分佈來看，成功的將慣用電子產品的年輕族群引導過來使用，幫助客服團隊擬定出未來的優化策略。

拓展產業新知

這是少數我可以直接進入到案場的機會，從與客戶的需求訪談中，讓我感覺到這也是一種彼此互相交流的體驗，了解到客服人員的工作日常、行為，進而發掘出洞察，以及嘗試發展出讓不熟悉AI知識的人容易入門的方法，培養出更好的溝通技巧，經過了這個經驗，增廣我很多在工作上的軟實力。

目標

系統將呈現在大尺寸平板，裝置在高爾夫球車上，
所有服務數位化，功能包含：擊球預約、櫃台報到、出發站派組、球場球車管理機制、成績紀錄、球洞資訊更新、GPS定位導航、球場訊息推播、即時點餐服務，
目標是改版優化，現代化整個系統，符合品牌調性，重新調整介面設計與使用體驗。

前置

使用者訪問
由於這個App系統遍佈全台各不同的高爾夫球場，取得真實使用者的想法不易，
因此我們想到了兩種方式：

1. PM與工程師前往台北的合作球場測試時，依照擬定好的問卷問題，趁機取得資訊
2. 第二是透過各地配合的業務，拜訪客戶時，取得資訊。
   高爾夫球場是戶外環境，在螢幕使用上變動因素更多，因此晴天、陰天的也有納入訪問中的一個項目。

小結：功能操作、文字配置顯眼
主要使用者，落在35-65歲的中老年族群，文字不能過小，功能展開於介面上為第一考量配置，讓他們一目瞭然能夠找到
設計風格
除了桿弟使用以外，會員多為中高收入以上的族群，設計風格中性、信任感、專業、現代

關於設計

介面顏色
由於高爾夫球場為戶外環境，強烈陽光照射下螢幕顯色較差，因此用色上，注意按鈕顏色與文字對比強

靈感
球場的綠草坪與陽光融合，深色底與亮色按鈕、文字搭配，確認陽光下螢幕的可見度依舊

重點功能UI

內容功能主畫面
選單側邊欄形式，一目瞭然所有功能外，大面積畫面空間提供使用者操作，下方為計分中心，點擊一下表格空白處即可編輯桿數

球道導覽
畫面切割方式，果嶺與球道地圖都能在同一個畫面呈現

警示提示
常見的燈箱設計，在戶外環境下，視覺會有縮小的錯視，因此設計以大面積底色與文字，加強辨識度

餐飲中心
多功能點餐機制

User Journey

透過這個階段，與工程團隊釐清細部功能。
值得一提，這項task中客戶端，相當有想法，以專業度說服客戶了解，同時保持修改彈性，是我覺得最大的學習。

My Role UI/UX Designer

UI Design, UX Design, Prototyping, User Flow, Wireframing

Project Time

1.5 monthes

Collaborative Partner

PM, Sale, NLP, FE, BF, QA, AI Trainer

產品說明

將所有通話錄音均轉成文字，由機器人根據品質檢測規則對所有錄音進行質檢。基於AI能力為錄音提供深層次的挖掘與分析，例如對話中的正負情緒、說話的語速等等，同時能提供客服能力、銷售分析、投訴預測、話術挖掘等數據分析。
基礎使用情境說明：

Design Process

此計劃為產品team負責，擔任設計師的角色，負責所有的UI 設計、UX 流程、功能邏輯定義、互動設計與易用性測試等。除了既有功能翻新與新增功能，前期花了比較多時間探索問題外，工程師也一同花費較大量的時間評估調整架構的可行性與風險評估。
這個產品多以內部的維護工程師與AI Trainer使用，因此在設計過程後期的測試階段，花了不少時間跨部門約會議，最後才順利安排開發與上線。

Discovery

優化的目標？

舊版的系統，原本只是給公司內部的維護服務員使用，沒有完善的使用者規劃就執行開發，因此對於初次的使用者，除了要詳閱使用者手冊，還需要有專人指導，甚至為了延伸很多為了求快的暫時優化功能，造成產品本身很多的技術債，本次目標為降低上手本系統的使用門檻，藉此也將維護成本降低。

使用情境在哪？

在客服大量的情況下，只要設定好規則，利用智能檢測方式，自動化為客服服務過程作評量，快速檢測出質量，從中我們可以進行改善，幫助客服服務維持良好的品質。

使用者是誰？

維護工程師、AI Trainer。

目標指標
降低完成一項檢測規則設定的時間，提升使用效率

Define

經由初步的UX Rerview，從業務端尋求客戶的反饋，並且與公司內部的AI Trainer執行易用性測試，統合出使用上的問題點。

複雜的介面體驗

在系統功能複雜的狀況下，為了讓功能都可以被一次看到，將所以內容功能展開，反而造成視覺無法集中，降低使用上的效率。

缺乏明確的資訊層級

直覺的介面設計，就是讓使用者第一時間知道如何繼續使用，但在介面設計中，因為資訊層級不明確，造成使用者切換到下一步時，容易造成困惑、進而增加了學習成本。

Solution

針對上述的量大問題點，以功能經過問題釐清，同時技術增進與銷售分析後的結果。
討論出以下四個優化重點：

圖像化：加強友善性

舊版純文字按鈕的操作佔據整個畫面的80%，將增加icon與顏色卡牌方式優化，整體視覺上的親和度增加。

操作簡化：提升易用性

加增應用游標互動，調整操作流程，減少重複點擊的次數，降低複雜性。

強化重點：增強功能可見度

各層級功能的區塊分隔扁平，每個功能區塊間的色彩對比加強，在功能越來越多的情況下，也能達到視覺聚焦性。

文字精簡：降低視覺負擔

舊版設計開發上，為了避免功能詞彙理解不易，因此在UI上顯示的文案，標題長、描述冗長，這點也反而造成介面上的混亂。

Ideate

功能架構與使用流程

列出完整的架構釐清每個項目，同時也將功能的位置，透過搜集來的內、外部使用體驗資訊進行調整。
最後我們分出舊有功能優化與新功能，在串連出完整的功能架構。

Wireframe

重點功能 Final Design

對話規則設定

將每項對話邏輯的類別列出，利用一個個卡牌，去排列組合進行規則上的設定，圖像化後規則攤在同個平面上，達到一目瞭然，便於編輯。

對話規則設定-對話邏輯設定細節

應用游標互動，Hover上節點卡牌即出現可新增節點的icon。

對話規則設定-對話規則內容編輯

規則設定項目相當多，第一層只顯示重要資訊，展開所有包含次要資訊，經過調查，資訊區塊編輯的場景，在初次建立新的資料的當下，因此將編輯功能藏於icon中，避免不必要的更動而造成錯誤。

測試管理內容頁

規則、評分標準設定完成，皆可進入測試管理進行測試，
這個頁面，搭配語音辨識文字的功能，可聽錄音檔、編輯文字，在同個平面下，左右對照出相應的資訊。

Takeaways

成效

在上線更版後，一個月後回饋使用狀態，在相同項目數量與複雜度的規則，從原本1.5小時的設定時間，降為1小時，節省了1/3的時間，有效提升效率。

學習到了...

設計過程中，對我來說最大的困難點有兩點：

1. 理解對話規則設定的邏輯：在許多不熟悉的名詞下，必須在自己的腦海不斷搜尋，以我理解的方式一直去替換，直接內化為止。
   與此同時，這些困難也成為設計建議之一(作為初次使用者的角度)
2. 簡化背後邏輯複雜的功能：透過PM與技術端的多方討論，保持本次的目標「降低使用門檻」為核心，反覆思考更新。

產品說明

利用AI的文字辨識出報銷用收據、發票等，與自動化審核結合的應用產品

設計目標

使用這個系統的目的是什麼？
讓報銷流程數位化，利用文字辨識、自動化審核比對，快速完成整個報銷流程。

使用情境在哪？
在大量報銷審核工作上，可達成即時儲存報銷單據的動作，並且能同步傳送給報銷審核人員。

使用者是誰？
分為兩個角色：要申請報銷的人員、報銷審核人員

設計重點

跨載具應用：行動裝置版與電腦版本

1. 行動裝置版：申請報銷人員需要可隨時上傳的機動性，因此將設計一套行動裝置系統，給申請人建立報銷單，並且透過行動裝置直接拍照上傳，快速的完成動作。
2. 電腦版本：審核報銷人員身份，定位在財務相關或主管位階，電腦版本為基礎應用，同時也考量此為審核人員的慣用裝置。

架構圖

Wireframe局部

視覺設計
本次系統的最高目標就在於能快速完成報銷流程，使用體驗上功能易用性要很高，因此設計上色彩搭配上，白色凸顯出功能操作區，以品牌色為背景色搭配，每個功能層級也就區隔開來。

重點功能介紹

申請報銷人員
申請人登入帳號後即可開始進行操作，將功能簡化在最基本的上傳與建立、編輯報銷單據的動作，讓每個功能都清楚好找。
考量到資安問題，這個系統僅提供內部人員使用，因此僅提供登入，需要開立新帳號由後台做設定。

申請操作
上傳報銷明細後，依照狀態分類，幫助瀏覽的速度，此處也加入自動審核功能，幫助申請者先行確認上傳的資料是否有問題來進行修正。

審核報銷人員
登入後，進入列表，即可瀏覽所有的報銷資料
最重要的部分在自動審核功能，設計成左右排列方式，一目瞭然單據申請者上傳單據與實際收到的單據是否吻合，即可快速執行作業。

UI review

結語

面對全新的產品，無前可考的狀態下，從產品定位釐清到設計的過程，開啟了另一種思維，這次學習到最多的是，如何找尋潛在使用者，訪談後從資訊中抽取出更友善的設計方式。

獎金獵人為一個比賽活動的資訊平台，在這裡可以找到全台灣最齊全的比賽活動資訊，同時具備線上報名、投稿、作品集張貼等功能。
Bounty Hunter- A platform that share and build competition informations. As a user(Bounty Hunter), you can explore new informations, submit and share your work.

探索問題

優化的目標？
透過數據分析結果得到以下已知內容：
使用裝置：行動裝置Mobile 59%、桌上型裝置Desk 38%、其他others 3%
明顯得知Mobile的使用率較高，然而距最後一次改版已有數年，已發現有許多顯性問題
比對2017-2018年GA數據分析顯示，總使用數量也有下滑的趨勢，因此提升數據成為主要目標之一

使用情境？
找比賽、投稿及報名比賽
辦比賽與張貼比賽資訊

使用族群是誰？
使用者族群年齡：18~34歲
身份：學生族群為主，部分社會人士

優化重點

了解問題後，我們透過Brainstorming找出關鍵字
找比賽

1. 強化搜尋的功能，在第一的畫面放上搜尋，讓使用者就能快速搜尋來找比賽。
2. 舊版兩欄式排列，容易讓視覺分散，因此優化成一欄式，集中視覺，並且透過卡片式的排列，即使內容豐富的狀態下，仍然是整齊、視覺友善的。
3. 透過一欄式的改動，同時優化Mobile版本的體驗。

獎金獵人
透過電子報宣傳與社群的問卷調查，多數使用者會記得獎金獵人就在於我們獨特品牌故事與視覺風格，因此在優化上，在UI上增加品牌IP置入的比例，增強視覺上的記憶點

首頁舊版本UI

Wireframe 演變

重點Review

視覺設計
以全彩圖於首圖，展現視覺張力與吸睛度
下滑後為比賽資訊的展示為重點，因此以無彩度的線條插畫點綴於背景

比賽內容頁
增加了獨特視覺風格外，加上偏好推薦比賽的區塊

辦比賽入口

舊版本需要辦、張貼比賽的主辦方常反映，不易找尋辦到比賽入口的位置，新版本中將其放置在登入按鈕處附近

UI REVIEW

關鍵成果

數據分析(跳出率)
上線後約3週，桌機下降0.12%，而行動裝置下降5.67%

正面使用者回饋
改版後發送電子報、粉專貼文方式推廣，最多人反饋的就是品牌更加貼合網站本身，還有搜尋功能更加方便這兩點
負面使用者回饋
除了bug回報外，還有其他我們沒想過的問題，在網路不好的情況下首圖Loading較慢(影片關係)

結語

透過這個task，呈現出品牌的個性，是我覺得最具有挑戰性的事情，透過不斷實驗，學習如何與繪師溝通插圖、工程團隊協力開發測試完成！

Team
PO: Hana | PM: Zouber | 技術長：Hina | 前端工程師：AJ | 後端工程師：Scar | 設計師：Tia

目標

獎金獵人旗下B2B產品，提供主辦單位，建置報名網站與比賽資訊的系統，包含發布比賽資訊、比賽資訊設定、網站架設、管理投稿者作品、留言等等。
目標設定不需要客服、操作手冊，使用者就可以自行在管理介面找到想要的功能操作

設計流程

客服訪談
蒐集出客服最常被詢問的問題點

1. 原本介面繁雜，不易找到功能
2. 分類混淆
3. 很常需要的功能卻沒有
4. 體驗不順暢

改版前分析

1. 介面樣式不統一，造成使用者容易混淆功能上的意義。
2. 部分功能已經不符合現在需求，於2016年開發到至今。

Styleguide

選用品牌顏色，綠色與橘色，介面設計色彩。
系統以B2B客群產品，功能性為主導，因此在內容編輯頁，整體背景與大面積操作區塊，以灰色調為主，綠色與橘色應用在按鈕上對綴。
最後統一介面樣式，應用完整的Styleguide整合出所有畫面。

重點功能

登入Landingpage
登入註冊與功能介紹結合的Landingpageg設計，首圖即可操作登入註冊的操作，下滑查看更多功能簡介

主畫面
簡單乾淨的畫面，中央每一張卡片即是一個比賽網站項目，點擊後就可以進入編輯頁面
置頂的header上tab方式分類切換，解決原本都放在同一個頁面容易混肴的問題

報名網站內容編輯頁
左側列出所有報名網站中所有功能設定，搭配icon提升辨識度，左側大面積顯示報名網站的內容
下方畫面為報名網站的Dashboarde管理，顯示報名狀態件數，閱覽所有報名稿件，縮圖功能方便使用者在列表狀態即可閱覽

User Journey

這個階段中，針對使用者體驗，與工程團隊一同討論，再一次修正後，進入開發階段。

UI REVIEW

結語

在wireframe到mockup的過程，雙重困難。
B2B類型的產品，因此對內要面對與業務、客服人員去討論，對外要去發想如何讓企業客戶們輕易上手，考驗UI/UX的設計能力，這次最重要的一課勇於互相溝通，理解不同角度思考的能力。

Team
PO: Hana | 技術長：Hina | 前端工程師：AJ | 後端工程師：Scar | 設計師：Tia