top of page

​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

工作區域 1 複本 11.png

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

工作區域 1 複本_2x.png

PERSONA

工作區域 3_2x.png
工作區域 1 複本 2_3x.png

PAIN POINT

USER FLOW

調整預約流程架構,使步驟更加明確,減少操作誤解與借閱資訊衝突

Adjusting the structure of book reservations to clarify the procedures and avoid operation misunderstandings and information conflicts.

工作區域 3 複本_4x_edited.jpg

WIREFRAME

工作區域 3 複本 2_2x.png

FINAL DELIVERY

​為使預約流程更加順暢,除了預約功能流程的主要設計,同時也整合相關連動資訊,讓使用體驗更加完善。

To make the reserving service more smooth, I also integrate related info, improving the user experience.

welcome 複本 3.png
reserve desin
預約流程優化

Redesign
flow of books reservation

將流程中的資訊,依據頁面目的進行分級,讓使用者能更快速地找到需要的信息,順利地完成查詢、預約與借閱書籍。

Classify the information of the pages according to the goal of action. Users can find what they need and finish searching and reserving books smoothly.

資訊整合

Organize information 

BEFORE

工作區域 26_2x.png
工作區域 26_2x.png

在原始的介面中,由於資訊未被妥善的分級及分組,使用者在閱讀資訊時需花上更多時間了解內容流程的規劃及說明提示未充分提供資訊導致使用者不確定自己執行的步驟是否成功。

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

Search

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.

Search_book list.png
reserve
工作區域 28_3x.png

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.

cofirm

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.

工作區域 28 複本_3x.png
my book

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.

工作區域 31.png
預約流程優化

Redesign
flow of books reservation

透過分析資訊內容,我發現有許多功能與個人帳戶有很多的關聯,於是在增加個人頁面來彙整資訊,並同時將與圖書館相關的資訊整合至首頁中,使資訊的查找能夠更加直覺快速。

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 

data design

BEFORE

南圖for wix-22.png

原始頁面架構下,其他功能這個選單的意義不明確,資訊未有良好的分組,首頁的信息過於緊密,讓人很難一眼獲取優先訊息。

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

Personal info
Personal

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.

工作區域 32_3x.png
工作區域 32 複本_3x.png
Homepage
工作區域 34_3x.png

01

新增篩選功能,使用者可依據分館查詢

Available to search info according to different libraries with the new filter.

02

色塊標籤來顯示分館名稱,使活動標題為主要資訊下,也能快速辨認出分館

The news title is the main info, and use the color label to indicate the library name.

03

將圖書館相關聯絡資訊,整合至首頁下方

Integrate library contact information at the bottom of the home page.

HOW TO RESERVE A BOOK

bottom of page