G-BO

繁體中文

G-BO

繁體中文

G-BO

繁體中文

TR-Plus Redesign Proposal Document

TR-Plus Redesign Proposal Document

Client: Test Rite Group

Client: Test Rite Group

Role: UX Consultant/Designer @Ogilvy

Role: UX Consultant/Designer @Ogilvy

Date: Jul. 2020

Date: Jul. 2020

Project Points
Project Points
#EC WebApp Redesign #Optimization Proposal
#Online Shopping Behavior Analysis #Boost Customer Business Revenue
#EC WebApp Redesign #Optimization Proposal
#Online Shopping Behavior Analysis #Boost Customer Business Revenue
Project Role
Project Role
#Interview Analysis&Summary #Market Research #Product Positioning Analysis #UX Analysis #Proposal Writing
#Interview Analysis&Summary #Market Research #Product Positioning Analysis #UX Analysis #Proposal Writing

Redesigned goals

Redesigned goals

針對特力愛家卡(特力會員APP)和 TR Plus(特力集團線上購物網站) 進行可用性檢查以及優化健檢報告。

替TR Plus 網站進行優化,以找出提升用戶體驗和提供更好購物體驗的機會。

優化目標為增加消費者參與度,以及客單量及客單金額。

針對特力愛家卡(特力會員APP)和 TR Plus(特力集團線上購物網站) 進行可用性檢查以及優化健檢報告。

替TR Plus 網站進行優化,以找出提升用戶體驗和提供更好購物體驗的機會。

優化目標為增加消費者參與度,以及客單量及客單金額。

Start from website experience evaluation
Start from website experience evaluation
Start from website experience evaluation

透過兩種方法來健檢網站及App,找出優化方向

透過兩種方法來健檢網站及App,找出優化方向

Google Analytics

利用 Google Analytics 工具分析了網站和應用程式上的用戶參與度和活動。通過分析用戶行為模式,我們能夠預測相關的偏好和興趣類別。

利用 Google Analytics 工具分析了網站和應用程式上的用戶參與度和活動。通過分析用戶行為模式,我們能夠預測相關的偏好和興趣類別。

UX Sitelens

奧美亞洲使⽤體驗團隊專⾨針對數位體驗健檢的⼯具,根據使⽤者經驗設計的基本要素對網站及App進⾏體驗流程檢視。

奧美亞洲使⽤體驗團隊專⾨針對數位體驗健檢的⼯具,根據使⽤者經驗設計的基本要素對網站及App進⾏體驗流程檢視。

About Online Shopping Experience Process

About Online Shopping Experience Process
我們將整個購物流程分為三個階段。
我們將整個購物流程分為三個階段。
我們將整個購物流程分為三個階段。
#Browsing and searching 瀏覽搜尋
#Browsing and searching 瀏覽搜尋
#Considering and wanting 想要與考慮
#Considering and wanting 想要與考慮
#Purchasing and checkout 購買結帳
#Purchasing and checkout 購買結帳
接著分析每個階段的不同用戶行為和體驗重點,並相應地設定優化目標。
接著分析每個階段的不同用戶行為和體驗重點,並相應地設定優化目標。
Browsing and searching 瀏覽搜尋
Browsing and searching 瀏覽搜尋
使用者行為
使用者行為
使用者行為

搜索:關鍵字搜索、分類搜索、排序和篩選

瀏覽:熱銷排行、主題活動、促銷

搜索:關鍵字搜索、分類搜索、排序和篩選

瀏覽:熱銷排行、主題活動、促銷

搜索:關鍵字搜索、分類搜索、排序和篩選

瀏覽:熱銷排行、主題活動、促銷

體驗重點
體驗重點
體驗重點

發現有趣的主題、產品,查看是否有優惠商品

發現有趣的主題、產品,查看是否有優惠商品

發現有趣的主題、產品,查看是否有優惠商品
  1. 無縫瀏覽、多維度分類

  2. 快速找到所需產品

  3. 輕鬆瀏覽更多相關產品

  1. 無縫瀏覽、多維度分類

  2. 快速找到所需產品

  3. 輕鬆瀏覽更多相關產品

優化目標
優化目標
優化目標

刺激購買興趣 / 提高結帳率

刺激購買興趣 / 提高結帳率

刺激購買興趣 / 提高結帳率
Considering and wanting 想要與考慮
Considering and wanting 想要與考慮
使用者行為
使用者行為
使用者行為

查看細節:產品描述、折扣資訊、運送細節。

考慮與比較:加入願望清單、加入購物車、查看評論、類似推薦。

查看細節:產品描述、折扣資訊、運送細節。

考慮與比較:加入願望清單、加入購物車、查看評論、類似推薦。

查看細節:產品描述、折扣資訊、運送細節。
考慮與比較:加入願望清單、加入購物車、查看評論、類似推薦。
體驗重點
體驗重點
體驗重點

收藏清單和比較功能,有用的商品資訊

收藏清單和比較功能,有用的商品資訊

收藏清單和比較功能,有用的商品資訊
  1. 快速找到收藏清單

  2. 有用的評論參考

  3. 便捷加入願望清單

  4. 完整的產品資訊

  1. 快速找到收藏清單

  2. 有用的評論參考

  3. 便捷加入願望清單

  4. 完整的產品資訊

優化目標
優化目標
優化目標

加速購買決策 / 提高加入購物車率

加速購買決策 / 提高加入購物車率

加速購買決策 / 提高加入購物車率
Purchasing and checkout 購買結帳
Purchasing and checkout 購買結帳
使用者行為
使用者行為
使用者行為

確認購買內容|查看購買清單、購買部份商品

資訊填寫、付款結帳|填寫資料、選擇付款/運送⽅方式

確認購買內容|查看購買清單、購買部份商品

資訊填寫、付款結帳|填寫資料、選擇付款/運送⽅方式

確認購買內容|查看購買清單、購買部份商品
資訊填寫、付款結帳|填寫資料、選擇付款/運送⽅方式
體驗重點
體驗重點
體驗重點

方便快速的結帳流程

方便快速的結帳流程

方便快速的結帳流程
  1. 清晰閱讀的購物車資訊

  2. 簡單的結帳流程

  3. 方便填寫的表格

  4. 通順的結帳流程

優化目標
優化目標
優化目標

減少結帳障礙/增加購物車金額

減少結帳障礙/增加購物車金額

減少結帳障礙/增加購物車金額

About E-commerce Experience Evaluation

About E-commerce Experience Evaluation
使用者的購物體驗可以分為四個主要面向。
使用者的購物體驗可以分為四個主要面向。
使用者的購物體驗可以分為四個主要面向。
#Usability 易用性
#Usability 易用性
#Usability 易用性
#Content 內容性
#Content 內容性
#Content 內容性
#Visual Design 視覺設計
#Visual Design 視覺設計
#Visual Design 視覺設計
#Guiding Assistance 導購性
#Guiding Assistance 導購性
#Guiding Assistance 導購性
Usability 易用性
Usability 易用性

平台是否容易易學習、有⼀一致性、提供⾜足夠的反饋、允許⽤用⼾戶輕鬆的在不同區塊之中來來回。

平台是否容易易學習、有⼀一致性、提供⾜足夠的反饋、允許⽤用⼾戶輕鬆的在不同區塊之中來來回。

平台是否容易易學習、有⼀一致性、提供⾜足夠的反饋、允許⽤用⼾戶輕鬆的在不同區塊之中來來回。

Content 內容性
Content 內容性

商品資訊及促銷內容是否實⽤用且可信賴,透過適量量的資訊且便便於閱讀及瀏覽,提供滿⾜足⽤用⼾戶所期待的內容。

商品資訊及促銷內容是否實⽤用且可信賴,透過適量量的資訊且便便於閱讀及瀏覽,提供滿⾜足⽤用⼾戶所期待的內容。

商品資訊及促銷內容是否實⽤用且可信賴,透過適量量的資訊且便便於閱讀及瀏覽,提供滿⾜足⽤用⼾戶所期待的內容。

Visual Design 視覺設計
Visual Design 視覺設計

圖片、字型、顏⾊色、圖⽰示、排版等是否⼀一⾄至性且適合裝置瀏覽,提供良好的閱讀感受體驗及互動回饋

圖片、字型、顏⾊色、圖⽰示、排版等是否⼀一⾄至性且適合裝置瀏覽,提供良好的閱讀感受體驗及互動回饋

圖片、字型、顏⾊色、圖⽰示、排版等是否⼀一⾄至性且適合裝置瀏覽,提供良好的閱讀感受體驗及互動回饋

Guiding Assistance 導購性
Guiding Assistance 導購性

機制及內容是否能夠影響⽤用⼾戶⼼心理理,引起且放⼤大⽤用⼾戶購物慾望,刺刺激產⽣生預期及非預期的購物⾏行行為,進⽽而強化購買決策,增加品牌收益。

機制及內容是否能夠影響⽤用⼾戶⼼心理理,引起且放⼤大⽤用⼾戶購物慾望,刺刺激產⽣生預期及非預期的購物⾏行行為,進⽽而強化購買決策,增加品牌收益。

機制及內容是否能夠影響⽤用⼾戶⼼心理理,引起且放⼤大⽤用⼾戶購物慾望,刺刺激產⽣生預期及非預期的購物⾏行行為,進⽽而強化購買決策,增加品牌收益。

// 因為涉及企業資訊,圖片模糊處理。//

// 因為涉及企業資訊,圖片模糊處理。//

// 因為涉及企業資訊,圖片模糊處理。//

經過全面評估後,根據三個購物階段整理了網站的現狀。確定了所有需要優化的項目,區分出三個狀態,分別體驗佳、負面體驗、可優化

經過全面評估後,根據三個購物階段整理了網站的現狀。確定了所有需要優化的項目,區分出三個狀態,分別體驗佳、負面體驗、可優化

經過全面評估後,根據三個購物階段整理了網站的現狀。確定了所有需要優化的項目,區分出三個狀態,分別體驗佳、負面體驗、可優化

Finding & Solutions

Finding & Solutions
在瀏覽與搜尋階段
在瀏覽與搜尋階段
Finding
Finding
Finding
內容過於單⼀一無法刺刺激更更多消費產⽣生
內容過於單⼀一無法刺刺激更更多消費產⽣生
內容過於單⼀一無法刺刺激更更多消費產⽣生
  1. 較少情景式的消費引導

  2. 商品分類單⼀一不彈性

  3. 切換同分類商品入⼝口單⼀

  4. ⽬目標性購物導向為主,無法刺刺激非⽬目標購物族群

Solution 1
Solution 1
Solution 1
多維度商品分類
多維度商品分類
多維度商品分類

增加瀏覽商品分類⽅方式及路路線,讓⽤用⼾戶瀏覽順暢無礙

優化使用者體驗的建議:

優化使用者體驗的建議:

A:增加相關分類與商品標籤
  1. 商品⾴增加相關分類入⼝,增加⽤戶瀏覽相似商品類別的便捷

  2. 增加多維度標籤分類,提供⽤戶更彈性跟多元的商品分類,藉由標籤串連更多面向的商品

Ref example

B:增加商品標籤

多⾯向推薦商品,吸引⽤戶查看與瀏覽,刺激非⽬的導向的購物選擇

Ref example

在想要與考慮階段
在想要與考慮階段
Finding 1
Finding 1
Finding 1
商品資訊不易易瀏覽、評價資訊參參考值低
商品資訊不易易瀏覽、評價資訊參參考值低
商品資訊不易易瀏覽、評價資訊參參考值低
  1. 評價數少,參參考價值低

  2. 部分商品資訊冗長,瀏覽時不易易聚焦

  3. 評價資訊錯誤,降低⽤用⼾戶對資訊的信賴

Solution
Solution
Solution
提供⽤用⼾戶評價誘因獎勵,增加專家知識型資訊
提供⽤用⼾戶評價誘因獎勵,增加專家知識型資訊
提供⽤用⼾戶評價誘因獎勵,增加專家知識型資訊

透過⽤戶⼝碑與專家知識型資訊加速⽤⼾購買決策

優化使用者體驗的建議:

優化使用者體驗的建議:

A:便捷的評價+獎勵誘因

1. 適當時間提醒⽤戶留下評價,提供便利簡易的操作引導及模板文字,提⾼⽤戶評價意願
2. 提供評價獎勵,如:優惠券、紅利代幣等,增加提⾼用戶回訪消費機會與刺激。

Ref example

B:專業點評+重點式資訊評比

1. 提供專家點評內容,提供⽤戶知識型資訊
2. 加入重點資訊評比,讓⽤戶能快速掌握商品重點。

Ref example

Finding 2
Finding 2
Finding 2
”收藏清單“功能高度被使用
”收藏清單“功能高度被使用
”收藏清單“功能高度被使用

購買商品品項與被收藏商品品項在比例例數字上表現相符,推測收藏功能在完成結帳前常被⽤戶用來暫存欲購買的商品。

Solution
Solution
Solution
⼀鍵抵達收藏清單
⼀鍵抵達收藏清單
⼀鍵抵達收藏清單

便捷醒目的收藏清單按鈕,縮短加入收藏後到結帳的操作步驟

優化使用者體驗的建議:

優化使用者體驗的建議:

將收藏清單入口按鈕提升至導航列第⼀層

目前的桌面版本需要兩個步驟才能訪問收藏列表,而手機版本需要三個步驟。

將收藏清單入口提⾼置導航列列第一層,讓⽤戶於各⾴面皆可⼀鍵抵達收藏清單,縮短操作流程

Ref example

在結帳購物階段
在結帳購物階段
Finding 1
Finding 1
Finding 1
介⾯面操作不易、表單無即時反饋
介⾯面操作不易、表單無即時反饋
介⾯面操作不易、表單無即時反饋
  1. 表單無填寫錯誤即時反饋,易增加結帳時間,⽤戶放棄結帳

  2. 資訊排版不整,閱讀費力

  3. Mobile字級與按鈕過⼩小,不易閱讀,容易產生操作錯誤

Finding 2
Finding 2
Finding 2
⽤戶有購物需求與意圖,但結帳最後關鍵步驟流失率偏高,以 APP 轉換為最低。
⽤戶有購物需求與意圖,但結帳最後關鍵步驟流失率偏高,以 APP 轉換為最低。
⽤戶有購物需求與意圖,但結帳最後關鍵步驟流失率偏高,以 APP 轉換為最低。

// Due to proprietary information, the images are blurred. //

Solution 1
Solution 1
Solution 1
適應裝置的介⾯設計
適應裝置的介⾯設計
適應裝置的介⾯設計

優化行動體驗介面,提⾼ Mobile 的結帳轉換

優化使用者體驗的建議:

優化使用者體驗的建議:

A:適應移動裝置的字級與按鈕

因應資訊及功能的增加,優化瀏覽舒適度,降低操作錯誤,提⾼⽤戶在零碎時間結帳的機會

B:優化付款⽅式的項⽬順序

因應現代⽤戶的付款習慣與參考數據資料,優化付款項目排序,加速結帳流程

Solution 2
Solution 2
Solution 2
提供⽤戶操作反饋
提供⽤戶操作反饋
提供⽤戶操作反饋

提供即時的系統反饋提醒,降低⽤戶等待時間的不耐感或放棄

優化使用者體驗的建議:

優化使用者體驗的建議:

A:即時提供錯誤反饋

表單填寫時,即時提⽤戶錯誤訊息,避免⽤戶填寫完才⼀次告知,降低用⼾不耐感

Ref example

B:提供趣味 Loading

系統運轉時,提供⽤戶趣味性 loading 動畫,降低⽤戶有感等待

Ref example

整體性評估
整體性評估
階段目標:提⾼整體購物體驗,提升品牌體驗好感度
階段目標:提⾼整體購物體驗,提升品牌體驗好感度
Finding
Finding
Finding
不易閱讀、表現形式不統⼀
不易閱讀、表現形式不統⼀
不易閱讀、表現形式不統⼀
  1. 字級過⼩/過細閱讀困難

  2. 同資訊/同操作於各⾴面表現形式不統⼀

  3. 可操作與不可操作的按鈕顏⾊一樣

  4. 產品說明無統⼀規範

Solution
Solution
Solution
建置設計系統 (Design System),提升整體購物體驗
建置設計系統 (Design System),提升整體購物體驗
建置設計系統 (Design System),提升整體購物體驗

Ensure consistency in user experience, readability of information, and enhance the overall presentation of the brand style.

Ref example

設計系統(Design System)能夠協助⽤戶更容易與更不費力氣來理解、使用產品;幫助團隊內溝通,加速開發過程。
設計系統(Design System)能夠協助⽤戶更容易與更不費力氣來理解、使用產品;幫助團隊內溝通,加速開發過程。
設計系統(Design System)能夠協助⽤戶更容易與更不費力氣來理解、使用產品;幫助團隊內溝通,加速開發過程。
Benefits for users
Benefits for users
Benefits for users
  1. 提升易用性:一致的設計和標準化的互動模式使⽤⼾⽅便地瀏覽和與網站或應⽤互動。

  2. 提升可讀性:清晰和標準化的設計元素確保信息對⽤⼾來說易於訪問和閱讀,從⽽提升其整體體驗。

  3. 優化體驗:平台上的標準化⼯作流程和設計元素創造出對⽤⼾來說無縫的體驗,減少了混淆和挫敗感。

  4. 增強信任和信心:一致且專業的設計⼀定⽤⼾對品牌及其產品或服務的互動更具信任感,使他們對其互動更加自信。

Benefits for the brand
Benefits for the brand
Benefits for the brand
  1. 提升品牌形象:一致且標準化的設計風格和工作流程可以提升品牌形象的一致性和專業性。

  2. 增加⽤⼾滿意度:提供一致且易讀的設計和操作⽅法可以提升⽤⼾的整體體驗,從⽽增加他們的滿意度。

  3. 提升品牌忠誠度:良好的⽤⼾體驗可以增加⽤⼾對品牌的信任和忠誠度,從⽽提⾼品牌忠誠度和聲譽。

  4. 節省成本:建⽴全⾯的設計系統可以提⾼團隊效率,減少冗餘⼯作,從⽽節省時間和成本。

Ready to work toghther ?
© G-BO 2024
Ready to work toghther ?
© G-BO 2024
Ready to work toghther ?
© G-BO 2024