Website Redesign

 五福旅遊 LIFE TOUR

重新設計目前的旅遊搜尋體驗,
同時也整理產品系統架構並增加未來產品擴展彈性。

My Role
Period
Skills
Tools

在職:行銷企劃
目前:UI/UX Design 

2019-now

Research
Wireframe
Prototyping
User testing

Figma
UXR、UI

Background
專案背景
五福旅遊為台灣前五大旅行社之一,負責的旅遊產品多達國內海外上萬種,合作對象主要針對B2B2C提供量化系列團體產品(包含量身定作產品)及 FIT(Foreign Independent Tourist)產品,產品比重為團體旅遊98%、其他2%。

自從自由行新興旅遊型態改變之後,對原本緊密且壟斷的台灣旅遊共生結構帶來極大的震撼與變化。

過去,要出遊就只能倚靠跟團,總被詬病行程不夠彈性、價格不夠透明、導遊司機素質良莠不齊等負面印象,除了面臨旅遊消費型態的轉型,同質性高且多的同業以及消費者對於出遊品質的習慣和追求,也讓本土旅行社本身意識到這不僅是單次的服務關係,更重要的是如何建立品牌信任及延續客戶服務。
面對的困難
Problems
此專案於五福旅遊任職行銷企劃期間,由PM與設計前端合作,我以企劃身份從旁協助,針對官網執行第一次敏捷思考進行MVP改版,但上線時間較為不足,加上初版後的介面,內部及客服皆反應不夠使用者友善疑問,且同時發現網站跳出率比起改版前逐日漸高。

因疫情因素離職後,希望藉由自己規劃更周詳的使用者研究,進行產品迭代而獨立完成的企劃案。除進行使用者研究外,更融合「行銷策略」及「商業模式」,協助找出問題並提供參考的介面和回饋。
設計流程
Design Flow
數據分析
Data analysis
為了進一步找出具體的設計策略,我透過網路流量數據分析了訪客的來源、造訪的行為與目的,進而發現

01|首頁是五福旅遊官網上瀏覽量最大的頁面。

02|首頁雖被設定為瀏覽旅程的起點,但其實大多數使用者是透過搜尋引擎及社群推薦,從產品子頁進入五福旅遊網站。

03|網站改版的數字變化:發現改版的同時,除卻疫情衝擊影響外,發現原生流量比起前年同期的流量降低了至少5成以上,於是思考,若無疫情之下,目前的網站易用程度如何。(下方圖一)

04|主要客群目標為::25-48歲女性,台北及高雄為最多。
考量NDA,不方便提供正確數據,但倚靠其他數據偵測平台所提供的數據,可做為參考依據。
問卷調查
Questionnaire
透過問卷調查,以量化的方式去了解使用者,再以使用者地圖歸納出進而找出可能的解決切入點。
易用性測試
Usability testing
列出問題清單後,根據易用性測試來確認這些被評估的問題是否會影響使用者完成任務。故設計了6項任務,涵蓋官網首頁、標籤頁、大小Banner、搜尋、產品、註冊登入等路徑。

受試者招募條件為曾購買過團體旅遊產品,但未透過五福旅遊網站購買產品的6位受試者,來觀察他們對系統的理解與反應。

使用性測試則揭露了幾項重要的網站導航痛點
Heuristic Evaluation
建立假設
Hypothesis
由於旅遊產品多為高變動性,且團體行程隨時因應環境進行彈性擴展,再加上任職於旅遊產業執行專案及企劃近4年,了解生態及供應商特有操作模式,因此,根據上述研究,我認為首先執行,有兩種可能的方向:

01|增加網站的流量,讓更多客戶造訪網站
02|優化網站內的使用效益,讓客戶更容易在網站上達成造訪目的
定義問題
Defination
利用上述問卷及訪談統整歸納之後,掌握到主要有三大問題點。

01|五福旅遊的使用者不熟悉關鍵字搜尋

五福旅遊的網站首頁常在搜尋欄位使用目的性搜尋,如果使用者知道他們想要什麼類別產品的話,這種搜尋方式能夠快速幫助消費者快速找到他們要的結果。然而,有大部分的使用者更習慣使用瀏覽類別和篩選的方式來進行搜尋,很多人需要花很多時間在找適合自己的產品。

02|整體資訊不足且架構混亂

在回收的內容中得知,官網所呈現的資訊缺乏視覺層級以及好的分類架構,因此對很多使用者來說產生很多認知負擔並且不方便快速瀏覽。他們沒辦法簡單快速地查看產品並找出他們最感興趣的那一個。

03|缺少基本信息及功能

五福的網站缺少了很多基本的元素,例如對使用者來說,產品分類和客服直接聯繫的歸納項目就很重要,但目前在五福旅遊的網站上是沒有提供的。此外,比起其他國內大型傳統旅遊公司,五福旅遊的網站整體的感覺對使用者來說,品牌記憶點較為不足,且看不出特色及亮點。
專案目標
Project objective
旅遊產業的產品多且雜,要一次翻新整個官網,無論是時間或是成本都有所限制。
加上旅遊需求快速變異,因此,此次故採用資訊量最大的導覽首頁進行改版,作為其他頁面示範的模板。

使用 Figma 製作 wireframe, 並先進行初步的 Lofi-prototype。

主軸在於提供更簡潔的使用介面,一目了然的內容,對於台灣旅客來說更熟悉、更方便使用,它包含了:

01|全新的導覽式搜尋體驗

新的體驗從「旅遊地點」和「條件篩選」這兩個搜尋功能能開始,比起關鍵字搜尋,大多數的旅人者更習慣先選擇地點以及想要篩選的條件,這樣的介面調整也讓使用者對我們的產品有更多的信任。因此整合旅遊地點推出了「旅遊地點選擇器」,這讓使用者可以透過點選的方式選取感興趣的旅遊地點,完全不需要手動輸入。

02|具有信任感的品牌印象

第一版本主要著重於將現有的功能上線並且遵循RWD。下一步希望能確保五福旅遊有更明確地導引及更快速的產品分類,像是活動類別、地區條件等等加入新的篩選功能裡。

03|更清楚明瞭的分類架構

現在在搜尋結果上顯示的職缺卡片並沒有包含很多資訊,並且它看起來結構雜亂且設計沒有共通性不易閱讀。新的旅遊卡片更多的資訊(像是工作條件、照片等等)以及更清楚的視覺架構。下一步希望能提供更多旅遊獨有的標籤,讓旅人了解不同的旅遊產品在五福旅遊上面是如何被歸類。
為什麼選擇優化網頁版,而不是開發手機APP?

由於五福旅遊主要營收來自於團體行程,雖然現行使用者數據顯多為使用手機版搜尋了解需求,但其實大部分的購買者在確定要報名團體行程前,都會採取官網瀏覽作為他們的首要選項,來進行他們的比較優缺。
且加上考量B2B後台分銷串接操作後台技術比想像中的困難,所以我決定先專注將網頁版的介面重新設計,如果第二次改版後,數據上有良好的成效之後,再把這些新的改動內容移植到手機應用程式上。
設計原則
Design System
01|一致性
即使是為一個相對成熟的台灣市場及品牌做設計,在品牌規劃上仍然需要和在地的文化習慣有一致性。至少在設計的基礎層面上確保在跨裝置上都能保有相對一致的體驗。

02|易達性
台灣的旅遊消費者習慣在一個頁面中獲取很多他們想要的內容,因此設計會需要確保導航是清晰直覺的,也確保相重要功能以他們習慣的方式作呈現。

03|容易閱讀的
因台灣消費者傾向於仔細閱讀產品頁內容的每個細節,因為視覺上的指示以及我們提供的文案必須要非常的簡潔扼要和清楚,使用的文字上也需要注意到是否誤導以及容易理解。
設計產出
Design
01|點選式搜尋體驗:選擇旅遊地點

目前五福旅遊的關鍵字搜尋需要完整,打出整個符合的內容才能找到,但受測者們皆已習慣一般搜尋功能會跳出相關訊息或是直接點選或刪除,並不會想完整打完。若使用者需要記得精確資訊才能使用搜尋功能,而找不到時也沒有提供幫助,會讓使用者感到缺乏效率或疑惑。

使用者可以點擊「各大分類名稱」來開啟搜尋面板,故設計了一個線性的流程,從產品類別到國家最大範圍的州別,再延伸到國家及地區,一步步來幫助使用者選擇想要搜尋的地點。
或是將產品以引導的方式,打前幾個字就將所有相關的結果按順序列出,並擴大關鍵字搜尋範圍,如連休、賞櫻等。搜尋失敗時,可以提供搜尋方式建議或相關內容。
02|更一致的產品分類架構

首先是header功能標籤頁。
五福旅遊目前的功能標籤頁分類過多、各功能位置分散、有時會重複出現;在不同地方,導致剛開始使用時花很多時間在探索、切換、尋找各標籤頁下的功能。

建議是功能標籤要出現在一打開官網就快速找到的地方。項目不要超過五項,相似服務可以整合,點進去之後再有其他階層或區塊。
03|更清楚、更有吸引力的文案

為了在產品中的文字與語調的的一致性,使用關鍵字搜尋去驗證哪種溝通方式可以讓更多使用者多方蒐尋。由於五福旅遊有很多旅遊產業獨有專有名詞,這有時候會造成新使用者的困惑,建議使用清楚易理解的方式解釋我們的價值主張,所以重新檢視了產品中所有重要且普遍被使用的文字內容,確保它們在用法上是一致的。
04|符合RWD

由於五福旅遊有很多旅遊產業獨有專有名詞,這有時候會造成新使用者的困惑,建議使用清楚易理解的方式解釋我們的價值主張,所以重新檢視了產品中所有重要且普遍被使用的文字內容,確保它們在用法上是一致的。
反思與學習
What I learning
產品迭代是一條學無止盡的路,很享受不斷探索真實的過程。

01|研究的應用方式無法得知其準確效益

由於已於五福旅遊離職,因此較難以確定研究發現與建議能被實際應用的程度。改善方式為未來每次研究都記下適合在後續研究中探討或驗證的問題,來增加研究發現的全面性與正確性。

02|規劃研究時受限疫情缺少實際案例支持

在執行規劃時,受限疫情無法出國,因此受訪案例僅能以2019年及之前購買經驗作為準則進行問題定義。對此,在規劃研究前,應先做一些Case Study來設定研究問題。另外persona也會需要逐年進行迭代分析,作為更進一步的參考依據。