亂搭租書網 書籍搜尋篩選功能改版

為了增加用戶在搜尋和閱讀書籍體驗上的易用性，我們規劃了以下兩項功能改版。

1. 站內關鍵字搜尋與篩選功能改版2. 電子書櫃進階篩選功能
我的角色
UI/UX 設計師，負責搜尋體驗與結果頁流程設計，與產品與工程團隊協作推進改版。
團隊挑戰
舊版搜尋體驗不直覺，使用者需多次嘗試才能找到目標內容，影響整體使用效率與轉換表現。
設計方案
我重新設計搜尋輸入與結果頁篩選邏輯，將搜尋行為拆解為更可預期的操作流程，讓團隊能快速驗證並實作改善方案。
產出價值
搜尋功能使用率提升 9.52%，搜尋修正率降低 17.70%，搜尋結果頁流量提升 23.60%。

1. 亂搭租書網 站內關鍵字搜尋與篩選功能改版

2021
專案時程

搜尋結果頁改版: 1 個月

搜尋框功能改版: 2 週

我的角色

UI designer

我的職責

UI/UX design

產品

電子書 RWD 網站

專案背景

本專案為亂搭租書網的搜尋體驗改版，我在專案中擔任 UI/UX 設計師，與前端工程師、後端工程師、利害關係人密切合作，針對使用者搜尋行為與轉換流程進行優化。我負責將使用者需求與商業目標轉化為可執行的搜尋流程與介面設計，並與利害關係人持續對齊優先順序與產品方向。
我們為什麼要做重新設計？
用戶體驗
簡化流程

➡ 將找書、看書、買書變得更簡單，改善購買與閱讀體驗

程式結構
突破現有產品的技術限制

➡ 預計將網站 UI 元件模組化、前後端程式分離、RWD 化，提高站點維護與使用效率。

改版前後成效

Google Analytics 站內關鍵字搜尋功能成效

(年份同期比)

關鍵字搜尋功能改版後:
搜尋功能使用率

增加 9.52% ↑

搜尋修正率

降低 17.70%↓

搜尋結果網頁流量

增加 23.60% ↑

使用者研究

搜尋體驗的問題最初來自與行銷同事的討論，行銷同事指出平台雖有穩定流量，但搜尋後的轉換率偏低。進一步分析後，我們發現使用者在搜尋關鍵字後，難以快速判斷書籍是否符合需求，導致頻繁跳出或反覆修改關鍵字。
1
我使用 Hotjar，一款用戶行為熱點圖分析工具 來分析使用者行為。
2
我分析了現有的 Google Analytics 的數據，作為重新設計的數據基礎。
電腦版 search bar 改版前mouseclick 熱點圖

使用者的主要搜尋行為從熱圖來看為直接登打關鍵字在搜尋框中，較少使用類別搜尋下拉式選單，因此我決定移除了類別搜尋下拉式選單這項功能。

人物誌

我根據 Renta 網站 Google Analytics / Google Ads 的受眾資料分析，發現我們網站的主要使用者為 18～44 歲女性。我以此核心族群特徵作為 Persona 建立的根據，並結合平台常見的瀏覽與搜尋行為，整理出具有代表性的使用者角色，讓後續 UX 流程更貼近實際使用情境。

Persona 1 —「悠閒通勤讀者」
Anna Lin
25 歲 ｜都市上班族
生活習慣 & 行為特徵
1
喜歡在通勤或午休時段「消磨時間、放鬆心情」，下班後傾向用手機或平板看東西，習慣夜晚放鬆
2
流量、空間有限，不想下載大檔案、偏好線上閱讀而非下載
3
偶爾會收藏「想讀清單」，喜歡隨性挑選下一本
目標

想在通勤/休息時段找到能快速開始閱讀的作品，想隨時隨地、快速搜尋到合適作品，不想花太多時間挑選

痛點
1
有時搜尋結果太多、排序混亂，不易快速找到想要的作品
2
詳細頁資訊太多太雜 → 在手機上滑動不方便
3
若購買流程太繁瑣，就會犧牲體驗
價值觀 / 動機
1
追求「快、輕鬆、方便」的閱讀體驗
2
減少「猶豫」「等待」「繁瑣流程」的時間成本
Persona 2 —「資深書迷 & 收藏控」
Mei-Chun Wu
19 歲｜社會新鮮人
生活習慣 & 行為特徵
1
有探索興趣，想嘗試不同題材 (漫畫/輕小說/言情)
2
偏好視覺化、封面吸睛的書籍，容易被推薦或封面吸引，喜歡看封面＋簡短介紹就判斷是否繼續閱讀
3
偶爾用手機滑社群、在朋友介紹/社群看書單 → 想找好入門作品，閱讀時間不固定，有時睡前、有時空閒看
目標

希望找到好入門、容易上手的書籍（類型多樣、封面吸睛、價格親民），同時希望有推薦系統、熱門榜單、排行榜幫助她快速挑選

痛點
1
如果首頁 / 搜尋介面太專業、資訊太複雜 → 會讓她感到困惑、不想繼續
2
如果沒有清楚標示「適合新手」「推薦指數」「讀者評價」 → 很難下決定
3
如果 UI 不直覺、不友好 → 容易放棄
價值觀 / 動機
1
喜歡輕鬆、有趣、流行、有潮流感的閱讀內容
2
想快速抓到書籍重點 (封面/簡介/評價) → 想馬上決定要不要租閱
3
對價格敏感，希望租借機制簡單、價格透明

設計過程

在重新設計搜尋流程前，我盤點使用者從「輸入關鍵字」到「購買書籍」的完整行為路徑，並與行銷同事、前後端工程師討論哪些資訊應優先呈現以降低決策成本。在流程討論中，我們針對搜尋結果排序、篩選條件顯示方式進行多次取捨，以在資訊完整度與操作負擔之間取得平衡。

一步一腳印

Phase 1 - 改版搜尋結果頁 (新增進階篩選功能)

在重新設計搜尋框之前，我們計劃先改版搜尋結果頁面。我們移除了原有的側邊欄，並新增進階篩選功能，使用戶在搜尋上更加便利有效率。

Phase 2 - 重新設計全站 header 內搜尋框

搜尋框功能改版讓用戶在購買過程中的搜尋產品時更簡單，更容易找到想要購買的商品。此外，我們也增加熱門關鍵字創造，藉此商機與提高轉化率

Phase 1
Phase 2

Redesign UI

初版介面完成後，我與行銷同事共同檢視搜尋結果頁的資訊層級，並根據使用者可能的決策情境進行調整。例如，將關鍵書籍資訊提前顯示、弱化干擾性資訊，協助使用者更快判斷是否進一步查看或購買。

電腦版 - 關鍵字搜尋輸入框

Demo video
Before
After
改版後，增加可讀性與易用性並補足系統狀態可視性
1
新增「清除」按鈕
2
輸入關鍵字時，自動建議關鍵字
在選單中顯示建議關鍵字，並依照中原始搜尋列的類別選項，分為書名、標籤、作者、出版社。
我是如何決定建議關鍵字排序的?
建議關鍵字排序與分類，我根據過去 6 個月，所有搜尋關鍵字中，以搜尋書名、作者、標籤、出版社所佔的百分比進行排序。
3
增加熱門關鍵字創造商機與提高轉化率
search bar 下方顯示熱門關鍵字依照 GA 站內搜尋關鍵字顯示
4
載入狀態
5
空白狀態

手機版 - 關鍵字搜尋輸入框

用戶於 Header 點擊搜尋 icon 後，滿版顯示搜尋內容，並移除了舊版類別項目的顯示。常用關鍵字現在顯示在搜尋列下方，同時也會顯示最近的搜尋紀錄，並新增了「清除」圖示按鈕，增加可讀性與易用性並補足系統狀態可視性。

Before
After

簡化手機版搜尋行為與狀態之視覺層級

改版前，原有的搜尋關鍵字建議選單，重複疊加在介面上方，造成 UI 視覺層級複雜化。因此我決定移除這樣的設計，簡化 UI 層級，提升可讀性。

Before
搜尋中狀態
After
搜尋中狀態
已搜尋狀態

電腦版 - 搜尋結果頁

Before
After
Searching status
1
提升系統狀態可視性: 保留搜尋關鍵字於搜尋輸入框中 (舊版沒有此功能)
2
漸進式揭露: 顯示關鍵字搜尋結果筆數。
3
增加易用性: 將目前用戶的搜尋篩選條件以標籤方式顯示。
顯示選擇之篩選條件於結果上方，並可透過單點清除篩選。
Before
側選單
After
進階篩選選單
4
將進階篩選顯示於篩選結果頁，提升易用性
新增進階篩選功能選單，移除舊架構的左側邊欄位，改為進階篩選功能列表。
同時，在 UI上保持頁面整潔，減少頁面色塊與複雜度，降低用戶認知負荷。
4.1
上方單選動態選單
根據搜尋結果顯示動態選單，顯示與關鍵字相符的搜尋結果的篩選條件。
我是如何決定篩選項目內容與排序的?
我整理了我們商品所有狀態，並與我們內部團隊溝通目前開發階段可上線的篩選項目，進行篩選條件的整理與階段是開發排程。列表項目依照 2 年內分類頁面瀏覽量與收益佔比、主推內容進行綜合排序
4.2
下方複選靜態選單
靜態選單
根據團隊討論結果，考量到資料載入速度以及後端資料庫的欄位規劃來決定呈現的選單項目以及單複選的操作行為。

如果沒有搜尋結果，則顯示品牌吉祥物和文字提示。

手機版 - 搜尋結果頁

Before
搜尋結果頁
After
搜尋結果頁
執行進階篩選後的搜尋結果頁
1
漸進式揭露: 顯示關鍵字搜尋結果筆數。
2
新增進階篩選選單展開按鈕，點選自右向左展開選單。
3
增加易用性: 將目前用戶的搜尋篩選條件以標籤方式顯示。
After
Searching status
Searching status
4
將進階篩選顯示於篩選結果頁，提升易用性
顯示動態與靜態選單，並根據搜尋結果顯示動態選單，顯示與關鍵字相符的搜尋結果的篩選條件。
5
於選單內顯示固定於下方的「篩選行動按鈕」
點擊「套用」​​以執行篩選。點擊「清除」再按「套用」執行清除搜尋篩選條件。

2. 亂搭租書網電子書櫃改版

2021
專案時程

3 週

我的角色

UI designer

我的職責

UI/UX design

產品

電子書 RWD 網站

專案背景

我們為什麼要做重新設計？
提升會員回流率

➡ 透過向已購書籍用戶推播新書發布通知，提高現有用戶的回訪率。
➡ 透過通知用戶他們的收藏清單中新書發布訊息，提高書籍購買率。

提升會員活躍度

➡ 讓書架更方便用戶尋找、整理和閱讀書籍。
➡ 讓收藏清單更方便讀者找書。

改版前後成效

Google Analytics 書櫃頁成效

(年份同期比)

書櫃新書通知機制成效:
平均頁面停留時間

增加 10.79%↑

不重複網頁流量

增加 21.82%↑

書櫃排序、篩選功能上線後成效
平均頁面停留時間

增加 12.25%↑

網頁價值

增加 3.90%↑

研究

於社群發布問券調查，同時進行競品分析。

調查用戶未來期望針對官網哪項功能改版，從資料顯示「書櫃」功能為用戶第二期望改版之項。

  • 新書上架通知功能  
  • 書櫃排序篩選功能優化
  • 電子書閱讀平台競品分析

Persona 人物誌

我根據 Renta 網站 Google Analytics / Google Ads 的受眾資料分析，發現我們網站的主要使用者為 18～44 歲女性。我以此核心族群特徵作為 Persona 建立的根據，並結合平台常見的瀏覽與搜尋行為，整理出具有代表性的使用者角色，讓後續 UX 流程更貼近實際使用情境。

Persona —「資深書迷 & 收藏控」
Yuna Chen
34 歲 / 女性
生活習慣 & 行為特徵
1
閱讀習慣已養成：每月租借、收藏多本書
2
喜歡深入閱讀、收藏、反覆回味書籍內容
3
不只租借，也常把書收藏在「我的書櫃」中作為書單管理，會依風格 / 題材 /出版社 /作者做分類整理
目標

想維持自己的書單／書櫃收藏習慣，同時希望收藏、分類功能強大、介面容易管理、搜尋 & 過濾方便。喜歡有封面、詳細資訊、分類標籤、閱讀歷史紀錄

痛點
1
原本書櫃界面 / 管理系統不友善 → 書多後難管理、找書困難
2
搜尋 + 過濾功能不夠細或不直覺 → 很難快速找到想再閱或推薦的書
3
若 UI 不夠清楚、排版不佳 → 長時間看很累
價值觀 / 動機
1
把閱讀當成長期生活習慣，不只是打發時間
2
喜歡有秩序、有收藏感、有美感的閱讀／收藏體驗

設計

functional map

Flow chart

  • 電子書架瀏覽流程
  • 開發新書通知和偏好設定流程
  • 電子書刪除流程
    優化的書籍排序與篩選機制

Redesign UI

電子書櫃頁

Demo video for PC
Before
After
Before
After
1
新增可收合的進階篩選和排序選單:
  • 書櫃內部關鍵字搜尋
  • 分類篩選 (單選)
  • 其他商品狀態篩選 (複選)
2
將「刪除」按鈕文案改為「封存」，語意更符合電子書商品特性
隨時告知用戶當前狀態: 在前端介面未選取時，該按鈕應處於不可點擊狀態，提示使用者操作行為。
Before
After
進階篩選選單展開 (default):
進階篩選選單收合:
1.1
新增排序選項:
  • 依即將到期日(近→遠)
  • 依最近購買日(新→舊)
  • 依最近更新日(新→舊)
  • 依書名
  • 依作者名
  • 依出版社
1.2
新增分類下拉式單選選單
  • 使用下拉式選單顯示用戶購買的書籍類別以及每個類別中的書籍數量。
  • 其他書籍狀態篩選條件 (複選)
  • 關鍵字篩選
1.3
重新設定原本的篩選字按鈕，以增加易用性
原先的文字按鈕在點擊時，按鈕範圍小，不易點擊，改版為 outlined 按鈕，更易於點擊。
1.4
新增關鍵字篩選搜尋框，用戶能夠更快查找書籍
在輸入狀態下，點選搜尋框即可執行關鍵字篩選。篩選後，顯示「清除」按鈕，使用者點擊即可清除關鍵字篩選。
1.5
可收合式的選單設計，更利於瀏覽書櫃書籍
點擊「篩選」按鈕時，如果套用了篩選條件，按鈕會顯示目前篩選的項目數，選單會顯示書籍總數。
亂搭！租書網已依台灣網站內容分級規定處理，作品均來自出版社正版授權，未經許可不得轉載，違者必究！
©2022Papyless Taiwan Co., Ltd. All rights reserved
← Prev projectNext project →

Get in touch

隨時歡迎各種合作機會！

unlimited0455@gmail.com
LinkedinBehancedribbble