亂搭租書網 離線閱讀器 APP UIUX 規劃

2021-2022
專案時程

6 個月

我的角色

UI UX designer

我的職責

UI/UX design

產品

APP

我的角色
UI/UX 設計師,負責離線閱讀功能的使用情境分析、流程與資訊架構設計。
團隊挑戰
行動場景中因網路不穩造成用戶流失,但團隊對離線使用行為與功能範圍缺乏具體共識。
設計方案
我從實際閱讀情境出發,定義離線下載與書櫃檢索流程,將抽象需求轉化為具體操作路徑,協助團隊理解離線功能的產品價值與實作重點。
產出價值
完成一套可延伸至實際開發的離線閱讀流程與 Prototype,作為後續產品與技術評估依據。

專案概述

2020 年 3 月 ~ 2020 年 8 月

在 2020 年 3 月,公司預計規劃亂搭租書網 APP 這項產品,當時的規劃在沒有 APP 工程師的角色之下,開啟規劃專案,我當時以 iOS、Android 兩版本的 APP 規劃列入我的 UIUX scope 當中,並且在會議中進行利害關係人訪談,了解公司希望 APP 的產品方向,當時規劃的版本以不含購物流程,有完整的產品曝光導購至網頁購買,以及線上閱讀器開發為主。

2021 年 7 月 ~ 2021 年 11 月

在 2021 年 7 月,公司招娉了 flutter APP 工程師,決定以 flutter 這項跨平台應用程式軟體開發套件作為 APP 開發語言。由於原先我以開發 iOS、Android 兩版本的 APP 作為設計規劃,需要微調 UI 介面,以符合 flutter 這項跨平台的開發元件,並與工程師對焦離線閱讀器開發與應用方式。

UIUX designer (我)
1 人

UI UX design, 建立 UI design system, 繪製 prototype, wireframe, UI flow, 易用性測試, 資料分析, 測試

產品主管
1 人

管理專案進度、產品負責人

Flutter 工程師
一人 (2021 年加入)

完整產品規劃完畢後,後期才加入進來

使用者痛點研究

透過競品分析、問券調查發現,使用者最重視「離線閱讀穩定性」與「雲端同步」

由行銷同事主導協助 2020 年 10 月於社群發布滿意度問券,調查用戶的使用行為以及站點改版建議。
依照問券結果我們發現用戶對於網站的閱讀器的改善,以及離線閱讀器的需求,許多用戶在使用我們站點的同時,也有使用其他競品進行漫畫小說的閱讀,而 APP 閱讀器的需求,是我們公司尚未補足的閱讀體驗項目,同時 App 開發也在我們公司的年度目標中。

關於 APP 相關內容整理從調查問卷的回應數據中,我過濾出所有提及「app」的回應資訊。總共有約 50 筆相關回應(從超過 4000 筆數據中提取),主要集中在「送給六周年亂搭的悄悄話」、「針對上題,想詳細說明希望改版地方」和「期待亂搭官網未來針對哪項進行改」等開放式欄位。這些回應多為用戶建議,顯示用戶對開發專屬 APP 的強烈需求

大多數用戶希望亂搭平台開發專屬 APP(約 80% 的相關回應),以提升行動裝置的便利性。

以下列出 6 位列出使用者關鍵回應內容

用戶背景:多為女性(90%以上)、26-40歲(60%以上),每天或每周使用平台的活躍用戶。
貝關
19-25歲

希望有app這樣在登入以及安全性方面的使用感受會比較好

水晶
31-40歲

希望可以連結Renta app閱讀器, 只需下載一次就能無線閱讀, 可以參考美國版的 Renta

Pearly
26-30歲

Loading時間頗長,建議可增設下載app讓讀者下載書籍,不用上網也可以隨時閱讀

林皺皺
31-40歲

沒有手機APP
(在不儲值原因提到)

ripwoal
31-40歲

使用網頁有時候會跳掉或是時間久了被登出,希望未來可以出亂搭APP,方便使用

ㄚ牳
41-50歲

若能有獨立書櫃閱讀app,無需每每看書都得進網站再到書櫃,更是便利了⋯⋯

市場競品分析

差異化策略
1
強調租閱模式的獨特性
2
設計租期提醒等專屬功能
3
優化離線書籍管理 (因租閱會過期)
機會點
1
租閱模式是差異化優勢 (其他都是買斷制)
2
既有使用者基礎
3
需開發完整離線功能,才能與 Readmoo/Kobo 競爭
4
筆記同步與書籍管理是關鍵功能
產品定位

針對會員,以閱讀功能為主軸的離線閱讀器 APP,不開發未登入版本。

功能目標與目標使用者:
目標使用者以既有使用者為主,並以 MVP 角度開發 APP。

借鑒 Readmoo (優異的閱讀功能深度) 和 BookWalker (漫畫閱讀優化) 的經驗,將離線閱讀器打造為漫畫閱讀的頂級體驗,尤其在「下載管理」、「固定版面翻頁流暢度」上希望能夠超越現有競品。

人物誌

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

Persona 1 — 深夜的書蟲 (The Dedicated Reader)
是亂搭的營收主力,他們對內容的依賴性最強,因此對閱讀體驗的穩定性個人化設定要求最高。
陳美玲
35 歲|家庭主婦
使用動機

深度喜愛某特定作者或題材(如 BL/TL 獨家漫畫),願意為了優質內容付費(租借或購買)。

主要需求
1
極致的閱讀客製化: 調整亮度、背景色、深色模式等細節。
2
收藏與進度同步: 確保裝置間的閱讀進度零遺失。
3
高效的下載管理:能一鍵下載整套系列作,並清楚知道檔案大小。
痛點

閱讀時被網路通知或廣告干擾;需要快速進入已下載內容。

對離線 App 的核心需求

追求穩定的沉浸式閱讀體驗。

Persona 2 — 通勤族的效率家 (The Efficiency Commuter)
注重時間管理,App 必須具備快速存取高度可靠的離線功能,以利用零碎時間閱讀。
吳雅婷
28 歲|科技業產品行銷
使用動機

隨時隨地能閱讀租借的漫畫,利用通勤時間放鬆。不想浪費時間等待下載或連線。

主要需求
1
「一鍵離線」功能: 在有 Wi-Fi 時能快速批量下載。
2
App 啟動速度: 能夠秒開 App 並進入上次閱讀進度。
3
清晰的閱讀列表: 快速找到「最近閱讀」和「已下載」的漫畫。
痛點

網路斷線後無法閱讀;App 啟動或翻頁載入緩慢。

對離線 App 的核心需求

追求在零碎時間內快速閱讀。

問題定義

設計挑戰與限制條件

1. Renta APP 測試回報溝通方式

在 APP 工程師加入之後,我認為此專案需要導入測試回報流程,考量到測試回報的效率、與版本控管的追溯,我與主管、工程師討論導入 notion 進行測試回報。

2. APP 上架產品年齡分級限制

亂搭租書網站點包含許多限制級的漫畫小說產品,而「年齡分級」是必填的 App 資訊欄位,這些分級保護控制功能讓家長和監護人能夠為兒童建立安全的線上環境,在原本的站點會員機制下,站點僅有彈窗式判斷用戶年齡,請用戶勾選是否已年滿 18 歲的前端判斷,並未真正搜集到用戶年齡資訊於後台資料庫,因此在 APP 線上閱讀功能上,我們決定捨棄,僅開發離線閱讀器進行會員認證年齡進行線上下載。

同時我們希望藉由 APP 的上線,針對站點的會員年齡資訊進行改版,寫入會員年齡資訊到系統中。

優先開發建議:

在專案一開始,我與專案利害關係人進行功能對焦,並根據公司年度目標與時程規劃經由內部討論決議第一版 APP 已離線閱讀器、書櫃功能作為 APP 主要功能。

pharse1

不包含購物流程的功能

書櫃
離線閱讀器
APP 與會員帳號設定
跨裝置管理
促銷活動導連
Single Sign-On (SSO)
pharse2

包含購物流程等高階功能

站內點券購買與儲值
積分兌換制度
免費書籍專區
站內書籍搜尋與購買
線上試閱閱讀器

設計流程

APP 架構圖

與工程師討論流程與頁面編碼形式彙整出個頁面的編碼與整體 APP 架構。

APP 設計準則

設計過程

functional map

Step 1
製作整體 APP 功能地圖,在產品開發前期內部討論對焦,定義 APP 服務架構。

Flow Chart

Step 2
依照功能繪製 APP Flow Chart,彙整出重點功能與流程。

UI flow

Step 3
依照功能複雜度繪製 APP UI Flow,梳理 APP 操作流程。

mock up & prototype

Step 4
產出設計稿與原型交互模擬,與開發人員在最終確定設計之前測試功能與可用性,APP 內的客製化動圖使用 rive 動畫工具匯出適用於 Flutter 格式的動畫檔案。

UI

1. 登入頁與 aPP 啟動頁

我們的產品定位為針對會員,以閱讀功能為主軸的離線閱讀器 APP,因此不開發未登入版本,用戶下載完畢 APP 後直接引導登入。

在設計 APP 登入、註冊流程時,考量到現有資源,我們預計將註冊流程、忘記密碼流程、第三方登入、註冊流程引導至 APP 內開啟瀏覽器進行操作。登入流程資訊檢核則使用 flutter「snackbar 提示條」進行帳號資訊正確錯誤反饋顯示,而其餘首次登入 APP 權限與設定資訊,則使用 flutter「AlertDialog 彈窗」進行顯示。

登入頁與啟動頁 prototype
首次下載 APP 啟動頁顯示

用戶首次登入 APP 時,顯示 APP 使用說明介紹

首次登入

用戶首次登入 APP 時,顯示通知提醒設定,希望能透過新書通知、商品優惠資訊增加用戶黏著度。

註冊、忘記密碼流程

註冊與忘記密碼流程,以開啟 APP 內部瀏覽器引導用戶至網頁版流程進行操作。

使用不同帳號登入流程

若用戶以不同帳號登入,APP 會跳出提示會自動移除上次登入帳號內 APP 中所有下載之內容,防止 APP 內下載資訊佔用手機內部儲存空間,維持資訊安全。

登出流程

APP 在帳號綁定上在這次 APP 規劃中沒有多個帳號登入切換的功能,一個 APP 僅能同時存在一個帳號,在用戶登出後,登入頁會保留用戶最後登入的帳號資訊,以便於下次快速登入使用。

2. 書櫃與離線閱讀器

書櫃依照官網產品架構進行設計,書櫃顯示系列套書,進入到單一套書頁面則顯示該套書中的每冊書籍。(例如:排球少年共 45集,用戶購買了 10 集,在「我的書櫃」頁,僅會顯示「排球少年」單一書封,點擊進入到「排球少年系列」頁面則顯示已購買的 10 冊書籍項目),用戶在「系列」頁面進行下載與閱讀。

書櫃 prototype
書櫃瀏覽

書櫃書籍不同陳列方式。

書櫃排序

書籍排序設定可以依照租期等其他條件進行排序。

書櫃篩選

書籍篩選可以照不同分類與產品特性進行篩選。

書櫃關鍵字篩選

用戶也可以使用關鍵字搜索的方式查找書籍。

書櫃下載書籍

用戶可前往書櫃中套書系列頁面進行單一冊的下載操作,下載成功後即可進入閱讀器中進行閱讀。當用戶斷線時,會跳出開啟網路的提示。

書櫃一鍵下載多本書籍

在書櫃中套書系列頁面,我們也提供用戶一鍵下載套書系列為下載的書籍,進行多冊下載的操作。

書櫃書籍編輯

離線下載著重的電子書容量,用戶可至管理下載頁中進行以下載項目的容量總計閱覽與書籍刪除。

離線閱讀器 prototype
閱讀器閱讀漫畫操作

閱讀器在 APP 的手指操作包含:
1. 放大縮小:「雙指放大縮小」、「快速點擊兩下放大縮小」
2. 翻頁模式:「點左右側邊翻頁」、「左右滑動翻頁」、「上下滑動翻頁」
3. 點擊中央開啟功能表

閱讀器切換上下冊

閱讀器內切換上下冊,依照用戶購買與下載狀態判斷顯示對應的提示內容,若用戶已下載下一冊則直接跳轉下一冊內容。

閱讀器教學

用戶首次使用閱讀器時顯示教學步驟。

3. 首頁與跨裝置購買

APP 首頁書籍顯示大數據個人化書籍推薦,由於我們的 APP 並未有線上購買的功能,因此需引導使用者開啟 APP 內建瀏覽器至我們的產品網站進行購買,商品頁僅有資訊顯示與線上試閱的功能。

首頁與產品頁 prototype
首頁瀏覽產品
瀏覽產品推薦頁
產品頁

用戶進入到產品頁僅具備瀏覽與導購至網站的功能。

產品線上試閱

產品試閱頁開啟線上閱讀器進行線上試讀,操作與 APP 離線閱讀器相同,但資料讀取來自線上資料庫。

← Prev projectNext project →

Get in touch

隨時歡迎各種合作機會!