Redesigning The Book Reserving Service
透過台南市立圖書館app，可以進行全市書籍的資訊查閱與預約。此專案以優化書籍預約流程為主要設計方向。
We can use the Tainan Public Library app to search and reserve books throughout all the libraries in Tainan. This project aimed to improve the reserving book experience.
Product
Tainan Public Library
Mobile app
Role
UIUX Design
Prototyping
Completion
2021
2 months
Tools
Figma
GOAL
透過借閱習慣訪談，發現預約書籍是目標用戶族群使用此圖書館館藏系統的主要目的。因此我決定以優化預約流程體驗作為此專案的首要目標。
Through the interview of borrowing books with target users, I found that reserving books is the primary purpose of using the online library system. Therefore, I decided to improve the reserving experience as my project's primary goal.
CHALLENGE
原始的頁面所提供的資訊相當詳細，如何定義與分級信息，來使操作更加快速精準，是此次專案中最大的挑戰。我在進行設計之前，規劃原版本的預約任務測試來釐清痛點，並建立操作流程圖定義任務目標，幫助我在進行介面安排時有清楚的參考依據。此外，我也透過原型測試，來驗證設計與搜集用戶回饋，使設計優化更準確。
Defining and classifying the mess info to make operation rapidly is the biggest challenge in this project. Before getting into design, I arranged user testing to clarify the pain points. Next, I built a user flow chart to define the goal of every single page, which helped me with wireframing. In addition, with prototype testing, I verified my design and got feedback from users, which made me optimize the design accurately.
RESEARCH
PERSONA
PAIN POINT
USER FLOW
調整預約流程架構，使步驟更加明確，減少操作誤解與借閱資訊衝突
Adjusting the structure of book reservations to clarify the procedures and avoid operation misunderstandings and information conflicts.
WIREFRAME
FINAL DELIVERY
為使預約流程更加順暢，除了預約功能流程的主要設計，同時也整合相關連動資訊，讓使用體驗更加完善。
To make the reserving service more smooth, I also integrate related info, improving the user experience.
BEFORE
在原始的介面中，由於資訊未被妥善的分級及分組，使用者在閱讀資訊時需花上更多時間了解內容；流程的規劃及說明提示未充分提供資訊，導致使用者不確定自己執行的步驟是否成功。
The information isn't classified well in the original interface, so users need to take more time to understand the content. And the notices are not apparent during the flow that users are not sure whether the action is successful.
DESIGN
01
將電子書選項整合到搜尋頁面
Join the ebook option the searching page.
02
圖像化ISBN掃描工具，安排於搜尋格旁查找更直覺
Visualize the ISBN scanner and put it beside the search engine.
03
重新安排搜尋圖框，引導使用者完成設定選擇
Organize the searching section and guide the user to complete the settings before searching.
01
凸顯書籍借閱狀態、增加預約人數篩選機制，快速找到欲借館藏
Emphasize the reserving status of books, add the filter of reserving numbers.
02
收合次要詳細資訊，縮短滑動尋找的時間
Hide the secondary information to decrease the time to swipe.
03
預約功能啟動即連結選擇取書館，同時過濾在架館藏不可預約同館取書的衝突
To avoid the conflict of reserving the available book which is in the same library where you choose to pick.
01
新增確認資訊頁，再次確認增加操作安心感
Add the confirm page, which allows users to check the reservation.
02
預約成功彈出視窗，並可前往查看預約狀態
After finishing the reservation, it will show a pop-up window that has the option to check the reservation immediately.
01
將各階段的重要狀態安排至書籍卡片上方
The book status is on the top of the card, which is apparent to find.
02
上方選單可快速切換，直接查看書籍狀態，省去原本需前後往返的操作
Use the top menu switching between different status which is more simple and clear.
透過分析資訊內容，我發現有許多功能與個人帳戶有很多的關聯，於是在增加個人頁面來彙整資訊，並同時將與圖書館相關的資訊整合至首頁中，使資訊的查找能夠更加直覺快速。
By analyzing the app's content, many functions have a common relation to personal information, so I created "My account" to group them. On the other hand, the information related to the library is integrated into the home page so that the search of data can be more intuitive and fast.
資訊整合
Organize information
BEFORE
原始頁面架構下，其他功能這個選單的意義不明確，資訊未有良好的分組，首頁的信息過於緊密，讓人很難一眼獲取優先訊息。
The menu of other functions is ambiguous, and the information on the home page is so tight that it's hard to get the priority information at a glance.
DESIGN
01
整合個人帳號有相關的功能
Integrate functions associated with individual account.
02
可查看借閱狀態
Available to view the status of borrowing status.
03
行動借閱證整合於個人頁面中，使主選單更加簡要
Combine the mobile library card to this page that makes the menu neater.
04
新增書單儲存功能，方便用戶整合待借清單
Add the books saving function, allowing users to integrate the book reserving wish list.
