UX設計案例分享:ASUS客服網站改版專案

Amo Chu
May 29, 2019

專案目標

透過優化網站使用者體驗,以提升客戶滿意度並降低客服成本。

隨著客服成本逐年上升,客服網站作為一項低成本的服務管道也越來越受到重視。而網站設計師的首要任務即是引導客戶盡快在網站上找到他們所需的資訊,避免失去耐心的訪客轉向使用真人客服。

專案成果

此網站已經於2017年6月上線。

  • 從首頁到下載驅動程式頁面的流量增加了45%;
  • 詢問下載相關問題與疑難排解的線上客服使用率降低了22%;
  • 首頁的跳出率從25%降低至12%;
  • 80%的下載中心訪客成功抵達了驅動程式下載頁面。
  • 在Laptop Magazine 的筆電品牌客服評比中,在網站項目獲得第二高分。

我負責的工作

我從2016年2月到2019年4月之間負責這個網站的大部分使用者體驗策略和流程設計,並與資料分析師一起規劃了網站數據追蹤計畫。

開發與設計流程

定義商業目標

專案一開始,客服部門就給出了明確的目標:提高客服網站使用效率

過去幾年,客服部門在以線上客服取代部分電話客服使用量這項策略上有著成功的經驗,因此他們希望能進一步提升各種線上服務的使用效益。理想是引導更多客戶透過各種我們所提供的網站資源,像是常見問題等等,自行排除所遇到的問題。

研究

要達成這項目標,我們認為有兩種可能的方向:

  1. 增加網站的流量,讓更多客戶造訪網站(開源)
  2. 優化網站內的使用效益,讓客戶更容易在網站上達成造訪目的(節流)。

為了進一步找出具體的設計策略,我透過Googla Analytics 數據分析了訪客的來源、造訪的行為與目的,另外,我們也執行了使用性測試來發掘網站流程中可改善之處。

網站數據顯示

  • 下載驅動程式和疑難排解(FAQ)是客服網站上瀏覽量最大的兩種頁面。
  • 雖然首頁是瀏覽量最大的單一頁面,它也常被設定為瀏覽旅程的起點,但其實大多數使用者是透過搜尋引擎,從FAQ頁面和下載頁面進入網站
  • 桌機與行動裝置使用者的行為差異:行動裝置使用者造訪常見問題頁面的比例遠高於下載驅動程式頁面。桌機使用者則恰好相反。

使用性測試則揭露了幾項重要的網站導航痛點:

我們邀請了9位實際的華碩產品客戶來測試了舊版的網站,主要任務則是下載驅動程式和疑難排解。

下載驅動程式任務的第一步是要找到對應的產品資訊頁面,但大多數的受測者在這一步就遇到了困難。幾項最主要的問題如下:

  • 站內搜尋功能不佳:在舊版的網站上,訪客大多只能透過搜尋功能前往產品資訊頁面(雖然有選單,但是位置非常隱密),但由於當時採用的搜尋引擎技術限制,使用者必須輸入非常精確的關鍵字才能正確找到所需的資訊,而複雜的產品型號又使搜尋變得更加容易出錯。
  • 同樣的情況也發生在搜尋常見問題,如果沒有輸入精確的關鍵字,就很難搜尋到對應的解答,但客戶不一定知道該用什麼關鍵字去搜尋這些技術問題。雖然網站上提供了重要產品線的常見問題清單,但這些人工整理的清單更新頻率很低,讓使用者感覺資訊似乎很舊、不太可靠。
  • 產品列表問題:一部分的受測者會試著從官網產品列表中搜尋,問題在於官網並未將已停產的型號顯示在列表中,但這些產品仍有支援與更新的需求,使用者只能透過站內搜尋找到停產型號的產品資訊頁面,於是問題又繞回了原點。

我們觀察到,如果使用者花太多時間思考下一步、或是搜尋錯誤的次數太多,他們很快就會想要嘗試使用電話客服。

競爭品牌網站分析

除了網站數據分析和使用性測試,我們也比較了競爭品牌的客服網站。大多數競爭品牌都在首頁提供了基於產品選單的導航方式;另外,我們可能也是唯一沒有提供下載中心的品牌。

競品網站首頁導航比較
重要功能比較

資訊架構與設計策略

基於上述的研究結果,我們提出了幾項主要的設計策略

  • 基於產品選單的導航:讓客戶能透過更便利的互動方式來找到產品資訊頁面,並縮短從首頁到目標頁面的路徑。
  • 增加常見問題的分類清單:幫助客戶快速縮小問題範圍。
  • 建立下載中心頁面:引導客戶快速找到下載路徑和相關問題的解答。
  • 優化常見問題和下載頁面的SEO:讓客戶能更容易從外部的搜尋引擎直接找到解答。
  • 針對行動裝置使用者的特別優化

設計

基於產品選單的導航方式

我們的第一步是在首頁新增了產品選單,點擊任一產品線,頁面會往下推開並顯示包含完整型號的產品清單。

使用者只需點擊選擇產品型號,相關的支援頁面連結就會立即顯示在選單右側,無需經過搜尋頁面,就能從首頁直接進到下載驅動程式等頁面。使用選單也能有效避免因為打錯型號而搜尋不到資訊的情形。

FAQ熱門主題清單與分類

我們新增了FAQ分類來幫助不確定自己的問題屬於哪個範圍的客戶快速找到相關的解答,這也有助於降低使用真人客服的機會。另外,該功能是由系統定時自動更新維護,確保資訊保持在更新狀態,但客服人員也能從後台手動調整置頂。

下載中心建置

我們建置了一個專門的下載服務入口,同時將連結顯示在全站共用的導航選單中,讓使用者無論從官網或客服網站進入,都能快速找到服務入口。下載中心頁面上線的幾週內就快速成為僅次於首頁的瀏覽量第二高頁面。

優化SEO

我們移除了老舊的iframe架構以改善SEO,常見問題編輯人員也統一了寫作格式,並增添了分類標籤,讓客戶更容易透過外部搜尋引擎找到這些資訊。

考量到許多使用者都是直接從搜尋引擎進到這兩類頁面,我們也重新設計了下載頁面和FAQ頁面,讓使用者一進到網站就能感受到清爽的視覺體驗。

行動版網站的特別優化

過去我們多半是以RWD技術製作行動版網頁,但在這項專案中,由於行動裝置訪客和桌機訪客造訪的頁面有明顯的差異,因此我們另外針對行動版網站製作了獨立的頁面。設計上的差異包括:

  • 簡化首頁,只留下行動裝置使用者最常使用的服務項目
  • 在行動版網頁上,優先顯示常見問題相關的導航,桌機版網頁則是優先顯示下載功能。
  • 採用適合行動裝置操作的互動設計,避免像是在手機上捲動下拉選單的窘況。
M Site 首頁

評估成效與迭代

網站上線後,追蹤數據顯示有更多的使用者成功從首頁抵達了下載驅動程式與疑難排解的頁面,首頁跳出率降低,而線上真人客服的使用量也下降了。

雖然第一階段取得了正面的成果,但是這個網站仍然有很多待改進之處。從2017年6月網站上線以來,我們的團隊一直在持續優化網站的使用體驗,去年,我們的工程團隊導入了新的搜尋引擎技術來改善前面提到的搜尋問題,也執行了A/B測試和使用性測試來改善設計上的問題。透過整個開發團隊和客服部門的共同努力,華碩客服網站在今年的Laptop Magazine筆記型電腦品牌客戶服務評比中,在網站項目拿下了與Apple並列的第二高分。

--

--