6 個月
UI UX designer
UI/UX design
APP
在 2020 年 3 月,公司預計規劃亂搭租書網 APP 這項產品,當時的規劃在沒有 APP 工程師的角色之下,開啟規劃專案,我當時以 iOS、Android 兩版本的 APP 規劃列入我的 UIUX scope 當中,並且在會議中進行利害關係人訪談,了解公司希望 APP 的產品方向,當時規劃的版本以不含購物流程,有完整的產品曝光導購至網頁購買,以及線上閱讀器開發為主。
在 2021 年 7 月,公司招娉了 flutter APP 工程師,決定以 flutter 這項跨平台應用程式軟體開發套件作為 APP 開發語言。由於原先我以開發 iOS、Android 兩版本的 APP 作為設計規劃,需要微調 UI 介面,以符合 flutter 這項跨平台的開發元件,並與工程師對焦離線閱讀器開發與應用方式。
UI UX design, 建立 UI design system, 繪製 prototype, wireframe, UI flow, 易用性測試, 資料分析, 測試
管理專案進度、產品負責人
完整產品規劃完畢後,後期才加入進來
由行銷同事主導協助 2020 年 10 月於社群發布滿意度問券,調查用戶的使用行為以及站點改版建議。
依照問券結果我們發現用戶對於網站的閱讀器的改善,以及離線閱讀器的需求,許多用戶在使用我們站點的同時,也有使用其他競品進行漫畫小說的閱讀,而 APP 閱讀器的需求,是我們公司尚未補足的閱讀體驗項目,同時 App 開發也在我們公司的年度目標中。
關於 APP 相關內容整理從調查問卷的回應數據中,我過濾出所有提及「app」的回應資訊。總共有約 50 筆相關回應(從超過 4000 筆數據中提取),主要集中在「送給六周年亂搭的悄悄話」、「針對上題,想詳細說明希望改版地方」和「期待亂搭官網未來針對哪項進行改」等開放式欄位。這些回應多為用戶建議,顯示用戶對開發專屬 APP 的強烈需求。
大多數用戶希望亂搭平台開發專屬 APP(約 80% 的相關回應),以提升行動裝置的便利性。

以下列出 6 位列出使用者關鍵回應內容
希望有app這樣在登入以及安全性方面的使用感受會比較好
希望可以連結Renta app閱讀器, 只需下載一次就能無線閱讀, 可以參考美國版的 Renta
Loading時間頗長,建議可增設下載app讓讀者下載書籍,不用上網也可以隨時閱讀
沒有手機APP
(在不儲值原因提到)
使用網頁有時候會跳掉或是時間久了被登出,希望未來可以出亂搭APP,方便使用
若能有獨立書櫃閱讀app,無需每每看書都得進網站再到書櫃,更是便利了⋯⋯
針對會員,以閱讀功能為主軸的離線閱讀器 APP,不開發未登入版本。
借鑒 Readmoo (優異的閱讀功能深度) 和 BookWalker (漫畫閱讀優化) 的經驗,將離線閱讀器打造為漫畫閱讀的頂級體驗,尤其在「下載管理」、「固定版面翻頁流暢度」上希望能夠超越現有競品。
我根據 Renta 網站 Google Analytics / Google Ads 的受眾資料分析,發現我們網站的主要使用者為 18~44 歲女性。我以此核心族群特徵作為 Persona 建立的根據,並結合平台常見的瀏覽與搜尋行為,整理出具有代表性的使用者角色,讓後續 UX 流程更貼近實際使用情境。
深度喜愛某特定作者或題材(如 BL/TL 獨家漫畫),願意為了優質內容付費(租借或購買)。
閱讀時被網路通知或廣告干擾;需要快速進入已下載內容。
追求穩定的沉浸式閱讀體驗。
隨時隨地能閱讀租借的漫畫,利用通勤時間放鬆。不想浪費時間等待下載或連線。
網路斷線後無法閱讀;App 啟動或翻頁載入緩慢。
追求在零碎時間內快速閱讀。
在 APP 工程師加入之後,我認為此專案需要導入測試回報流程,考量到測試回報的效率、與版本控管的追溯,我與主管、工程師討論導入 notion 進行測試回報。

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

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


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

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






我們的產品定位為針對會員,以閱讀功能為主軸的離線閱讀器 APP,因此不開發未登入版本,用戶下載完畢 APP 後直接引導登入。
在設計 APP 登入、註冊流程時,考量到現有資源,我們預計將註冊流程、忘記密碼流程、第三方登入、註冊流程引導至 APP 內開啟瀏覽器進行操作。登入流程資訊檢核則使用 flutter「snackbar 提示條」進行帳號資訊正確錯誤反饋顯示,而其餘首次登入 APP 權限與設定資訊,則使用 flutter「AlertDialog 彈窗」進行顯示。

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

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

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

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

APP 在帳號綁定上在這次 APP 規劃中沒有多個帳號登入切換的功能,一個 APP 僅能同時存在一個帳號,在用戶登出後,登入頁會保留用戶最後登入的帳號資訊,以便於下次快速登入使用。
書櫃依照官網產品架構進行設計,書櫃顯示系列套書,進入到單一套書頁面則顯示該套書中的每冊書籍。(例如:排球少年共 45集,用戶購買了 10 集,在「我的書櫃」頁,僅會顯示「排球少年」單一書封,點擊進入到「排球少年系列」頁面則顯示已購買的 10 冊書籍項目),用戶在「系列」頁面進行下載與閱讀。

書櫃書籍不同陳列方式。

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

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

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

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

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

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

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

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

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



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

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