亂搭租書網 RWD 網站 UI/UX 改版

2021-2022
專案時程

一年

我的角色

UI designer

我的職責

UI/UX design

產品

電子書 RWD 網站

我的角色
UI/UX 設計師，負責全站 RWD 改版、首頁資訊架構與 Design System 規劃，與產品與工程團隊密切協作。
團隊挑戰
舊有介面限制行銷操作與產品擴充，視覺與元件缺乏一致性，增加維護與溝通成本。
設計方案
我重新規劃首頁資訊架構與推薦模組，並建立可延伸的 Design System，協助團隊在維持品牌一致性的同時提升開發效率。
產出價值
改版後首頁離開率降低 19%，跳出率降低 21%，整體體驗與維護性顯著提升。
cover

專案背景

我們為什麼要做重新設計？
為了提升使用者體驗
簡化購買與閱讀流程

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

提升程式碼的維護性
突破現有產品的技術限制

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

商業模式更彈性
自現有商業模式提供站點多樣化的行銷模式，改善銷售痛點，讓用戶有更多選擇

➡ 規劃點券改版至小數點後一位，將產品價格相等於台幣單位 (0.1 點券 = 1 NTD)、行銷公版頁改版

強化品牌形象
統整企業風格形象，強化品牌風格

➡ 舊版的網站內容已不符當今品牌形象，針對 Footer 服務內容、關於我們頁、使用條款頁改版

改版前後成效

1. Google Lighthouse 亂搭電腦版網站分數*:

Before: 平均約 69 分
After: 平均約 86 分

*Google Lighthouse 指標透過專注於效能、可訪問性和 SEO，提供有關網站品質的關鍵見解。它提供全面的審核，找出需要改進的程式技術。

Google Lighthouse 電腦版網站競品分析

2. Google Analytics 首頁改版前後成效

(年份同期比)

首頁改版後成效:
跳出率

降低 9.52% ↓

離開率

降低 19.34% ↓

不重複的網頁瀏覽量

增加 5.79% ↑

研究

1
我繪製了站點的核心路徑圖、functional map，並著手發起內外部問券調查同事、使用者針對站點所看到的問題
2
分析站點現有 GA 報表數據 基底進行改版，
3
電子書閱讀平台競品分析，同時統整出各方建議，彙整出未來改版的方向與功能
網站核心路徑圖 :
內部問券調查:

目標

我們為什麼要做重新設計？
針對使用者:
1
提升舊客回流率與活躍度
2
提高新客續留率、新客消費率、觸及更多對電子漫畫 / 小說有興趣者
3
簡化頁面，調整視覺層級，降低使用者選擇門檻。
針對亂搭租書網:
1
優化介面，實施前後端分離與 RWD 化站點，以提升網站效率與維護易用性
2
藉由提升使用者體驗來提升 SEO 排名
3
塑造並強化品牌形象

設計

Wireframe 與 Functional map

Flow chart

我繪製了全站購買流程和首頁瀏覽流程與資料載入流程。

  • 購買流程
  • 首頁瀏覽流程

Design Guideline

原站點無統一的 Design guideline，色彩計畫也叫紊亂，於改版同時導入統一的設計系統，逐步改版將 UI 各頁元件統一化。
1
系統化配置色彩，定義主副色以及功能輔助色，讓重點資訊更集中
2
遵循既有設計準則之下進行模組化
3
混和型扁平化設計 ( Semi-flat design: 使用部分擬真元素，如陰影等)
Colors
Typography
Buttons
Switch
Others
Layout

由於改版為漸進式進行，網頁最大寬度仍維持 980px 以及網站的 Breakpoint，考量到首頁頁面特殊性，頁面部分元件滿版顯示。

Before
After
點券價格 button UI 漸進式改版

目的：自現有商業模式提供站點多樣化的行銷模式，改善銷售痛點，讓用戶有更多選擇

2020/07 之前
2020/07 之後
2022/09 之後

我們進行競品分析，先前站點的商品價格單位無法提供用戶更優惠的折扣價格 (1 點券 = 10 NTD) 相比其他電子書平台，我們的用戶也反應過消費的費用較高，為了改善這個痛點，我們決定規劃點券改版至小數點後一位，將產品價格相等於台幣單位 (0.1 點券 = 1 NTD)，讓用戶有更多優惠選擇。
‍
我的設計思考：在有限的空間內增加文字顯示的範圍
方法：調整按鈕 UI，將價格顯示區域範圍加大，迭代後調整字體與延伸顏色

2020/07 之前
2020/07 之後
2022/09 之後

Iconography and Favicon

沿用與 logo 圓角的設計，重新設計新版圓角 icon 風格，因原先網站有導入 font awesome icon，又混雜自家icon，風格較不統一。

為體現出與品牌 Logo 相同風格，將 Favicon 改為與日本站點相同的設計，藉此體現一致的品牌風格。

改版後的網站 UI 設計

電腦版 Header

Before
登入前首頁
登入後首頁
After
登入前首頁
登入後首頁
我是如何決定 Header 項目的排序與項目的？

我從 Google Analytics 查詢用戶較常使用的頁面，總合以上數據之外，也同時彙整了內部需求與主打類型、產品分類銷售排名、頁面點擊熱點圖等方式，最後經由團隊討論而決定 Header 與 Menu 的項目內容與排序。

1
改版後 Header 固定於上方:

舊 header 頁面捲動時無固定，新 header 設計為頁面捲動時固定於界面上方，以便於用戶操作網站
2
移除舊頁面的側邊選單：
將內容 Header重複資訊移除，部分資訊調整顯示位置。原分類側選單: 移到 header 書籍分類 hover 選單中。
  • 書籍分類選單: 移至頁首全站分類下拉 hover 選單內
  • 部落格文章曝光，調整至首頁內容中呈現
  • 品牌社群媒體資訊，新增其他社群媒體外連結入口，並調整至 Footer 內顯示
  • 由於「兌換禮券」功能僅限會員使用，且使用率低，因此我移除了首頁的「兌換禮券」入口，並將其移至登入後 Header顯示的「我的專區」選單內顯示
Before
登入前 header
After
登入前 header
3
未登入前的訪客 Header 呈現:
  • 改版後的搜尋輸入框與熱門關鍵字
  • 「登入 / 註冊」文字按鈕
  • 新增「簽到」、「儲值」按鈕，因為我們發現，大多數的用戶登入行為中，簽到與儲值行為排名一二的行為，因此新增至Header 中。同時，我將按鈕設計為 Icon 形式，減少空間占比
4
Header 下方選單內容呈現:
  • 讓分類入口更易達，顯示全站分類 Hover 選單入口 (將原漫畫小說合併)
  • 選單項目依照品牌主打頁面排序在前，其餘依照頁面流量排序
  • 免費頁為用戶點擊最活躍的項目 (不論放在哪用戶仍會點擊)，選單順序置於中間
5
項目較多的全站書籍分類細項則顯示於分類 Hover 下拉選單中
Header 於頁面向下捲動時，隱藏熱門關鍵字，Logo 高度縮減，減少 Header Fixed 的畫面占比，讓視覺上更簡便潔。
Before
登入後 Header
After
登入後 Header
6
登入後 Header 內容呈現:
將按鈕設計為 Icon 按鈕形式，減少空間占比，依照用戶功能使用率，調整選單順序，並將「登出」按鈕埋置 Hover 選單中
7
新增「我的專區」Hover 選單:
  • 將舊版 Header 顯示的會員點券與積分資訊顯示於此
  • 選單依照頁面使用率排序
  • 兌換禮券移至我的專區

手機版 Header

Before
登入前 Header
登入後 Header
After
登入前 Header
登入後 Header
登入前 Header (訪客)
登入後 Header (會員)
1
登入前 Header
「登入 / 註冊」文字按鈕外顯，減少用戶登入層級 (原登入按鈕於漢堡選單中)
2
登入後 Header
「我的專區」Icon 按鈕外顯，提升會員使用站點功能易用性，「書櫃」入口外顯，更利於提升用戶閱讀體驗
3
基本的通知紅點標示設計
4
會員點券、積分資訊移至會員專區顯示，以避免每頁均顯示占版位
手機版 header 漢堡選單
Before
登入前 Header 選單
登入後 Header 選單
After
登入前 Header 選單
登入後 Header 選單
5
我是如何設計 Header 漢堡選單內容:
  • 為了減少程式判斷提高維護性，登入前後顯示相同的選單內容
  • 依據用戶操作行為，我將「我的專區」移到漢堡選單外露出，「登出」入口與「兌換禮券」移至我的專區頁內
  • 為減緩視覺疲勞，我選擇將色彩弱化，簡化 Icon 使用色彩
6
新增全站分類次選單，方便使用者查找書籍
7
調整視覺層級: 次要頁面顯示於下方
8
將社群資訊與客服中心移入首頁內容與 Footer 當中呈現
手機版全站分類次選單內容與操作行為模擬
Prototyping
漫畫選單
小說選單
其他分類選單

Footer

Before
PC
After
PC
Before
PC
After
PC
Before
1
舊版 Footer:
  • 資訊並未分門別類
  • 沒有品牌資訊、合作資訊以及招募資訊，客戶、業主等相關人士無從查找相關資訊
  • 沒有社群媒體資訊呈現
After
2
新版 Footer :
整理網站品牌及客服資訊，將資訊分門別類排列，並新增社群連結資訊，UI 上更簡潔明瞭

Index for PC

Before
1
改版後的主要 Banner 區域
主要 Banner 區域自動輪播滿版顯示，增加頁面視覺吸引力，一次可看到將近 3 張 Banner，輪播設計為滑鼠hover時會暫停自動輪播。同時移除側邊選單欄位，讓頁面顯示範圍增加，使用者不必在瀏覽我們的網頁時被側邊的資訊分心。
2
改版後移除 Header 下方的長 Banner
移除重複功能的長 Banner，由於其功能與輪播 Banner 相同，且因為改版後 Banner 顯示範圍增加，取代長 Banner 的曝光
After
3
新書分類區:
新書書單元件設計為可切換內容的 Tabs，我們依照多數使用者喜好，優先顯示漫畫書單內容
4
首頁內容顯示設計為書單與 Banner 交替顯示，增加內容豐富度，減少視覺疲勞
5
次要 Banner 曝光區域:
將次重要的 Banner 固定顯示於第三區，不輪播
6
其他流動版位書單
其他流動版位書單依照該檔期選書顯示，書單設計為左右切換瀏覽
橫向書單數量顯示比舊版多出 1 本書，內容呈現豐富度增加 (原本 5 變為 6 本)
7
其他 Banners:
底部熱門活動 Banner移至上方與書單穿插顯示，並改為自動輪播顯示(原僅固定顯示 2 張)
8
會員評論內容:
顯示用戶評論推薦的書單內容，左右切換瀏覽
9
部落格文章:
顯示部落格文章，舊版側邊欄位顯示之文章於首頁內容底部顯示

首頁 Loading 載入圖片狀態: 使用網站logo作為圖片載入顯示圖示，強化品牌形象。

手機版首頁

Before
After
1
Banner 自動輪播區域
2
移除上方長 Banner，由於其功能與輪播Banner 相同
3
新書分類區:
新書書單元件設計為可切換內容的 Tabs，我們依照多數使用者喜好，優先顯示漫畫書單內容
4
首頁內容顯示設計為書單與 Banner交替顯示，增加內容豐富度，減少視覺疲勞
Before
After
5
其他流動版位書單依照該檔期選書顯示，書單設計為左右滑動瀏覽
Before
After
6
會員評論內容
顯示用戶評論推薦的書單內容，左右切換瀏覽，舊版手機首頁未顯示
7
部落格文章:
顯示部落格文章，舊版手機首頁未顯示，新增於首頁內容底部顯示
8
其他 Banner 位置調整:
底部熱門活動 Banner 移至上方與書單穿插顯示，並改為自動輪播顯示 (原僅固定顯示 2 張)

會員專區頁面改版

研究

透過 Google Analytics 分析「會員專區」內的子頁面的流量比例，可以發現流量較高的頁面是使用者造訪頻率較高的頁面。同時我也透過選單的熱點圖，進行綜合評估，病利用這些資料來調整「會員專區」頁面選單的排序。

(日期統計數據是基於過去四年的累積流量)

Functional map
會員專區頁面 UI
Before
PC
After
PC
1
於我的專區選單頁面顯示會員資訊，考量到未來會員制的擴充性:
  • 會員暱稱
  • 會員等級
  • 頭貼目前預設無法編輯，只是顯示， 未來規劃希望用戶能夠編輯上傳或顯示會員制度等級圖片
2
原 Header 登入後顯示的會員點數資訊改為顯示於「會員專區頁面」及「會員hover選單」中，並加上輔助按鈕 (儲值點券 / 簽到領積分)
3
依照用戶使用率排序各按鈕順序
4
Hover 浮動選單中於header已顯示的項目不再重複顯示並將「登出」路徑埋於選單內
Before
Mobile
After
Mobile
5
同電腦版顯示會員簡歷
6
原 Header 下方登入後顯示的會員點數資訊改為顯示於「會員專區頁面」，並加上「儲值點券」輔助 icon 按鈕，更易於儲值
7
依照用戶使用率排序各按鈕順序
8
選單有提醒時以紅點通知標示，提高訊息讀取率
9
不同於電腦版有 Hover 選單顯示登出按鈕，手機板選單新增「登出」選項
亂搭！租書網已依台灣網站內容分級規定處理，作品均來自出版社正版授權，未經許可不得轉載，違者必究！
©2022Papyless Taiwan Co., Ltd. All rights reserved
← Prev projectNext project →

Get in touch

隨時歡迎各種合作機會！

unlimited0455@gmail.com
LinkedinBehancedribbble