台北市立圖書館APP設計優化

PROJECT
#User Research # Mobile APP # UIUX Design
MY ROLE
UX Research UIUX Design
TIME
2 Weeks

專案說明

台北市立圖書館App為讀者提供更便利的使用環境,本館APP「iRead 臺北市立圖書館」提供「找書」、「手機借書」、「個人書房」、「行動借閱證」等功能。讀者可透過本館APP的「找書」功能找到欲借閱的館藏進行預約;「個人書房」功能掌握借閱或預約資訊並進行續借或修改預約;如有預約書到館,卻臨時無法領取,亦可透過APP延長預約書取書期限2日;若讀者忘記攜帶實體借閱證也可透過「行動借閱證」功能,登入帳號密碼後產生借閱證條碼,來借閱圖書或領取預約書。

設計目標

台北市立圖書館App目前的使用者體驗和功能有待改進,我們計劃重新設計這個App,除了改善原有的體驗,亦希望透過強化曝光館方舉辦的活動,來倡導市民參與藝文活動,推廣閱讀風氣,並提升使用者整體的滿意度和便利性。我們希望這個優化設計能夠更好地反映圖書館的形象,並為讀者提供更優質的服務。

Taipei library image

設計流程

第一週:
我們將分析App的現況問題,篩選適合的用戶進行2-3場訪談,並開始繪製線框圖。同時,需準備第一週的提案簡報,與設計總監們進行提案,並收集回饋以進行初步的設計迭代。

第二週:
我們將進行細部的UI設計,並準備第二次的提案簡報。最後,設計總監們將對整體設計進行評估並給予回饋。

定義問題與目標

現況分析
用戶訪談

設計研究與發想

競品分析
團隊討論
線框圖
提案簡報

設計規劃

高擬真設計
設計原型
提案簡報

回饋搜集

設計提案
設計主管反饋

現況分析

首先,我跟團隊們一同分析了App的現況問題,從既有問題中來歸納出重要需要被解決的痛點,隨後我們也從用戶訪談的過程中蒐集了有用的回饋。

Old app screen
現況問題#1
借閱證線上辦證仍無法使用,導致借閱流程中斷,影響用戶借閱體驗
用戶在線上開卡後,卻無法立即借閱書籍,這導致借閱流程出現斷點。這種情況可能讓新用戶感到困惑,無法充分體驗線上開卡的便利性。
Old app screen
現況問題#2
首頁推薦書籍分類較單一,無法有效吸引用戶
目前推薦的書籍內容多為新書和熱門排行,但經過用戶訪談後發現,這些推薦對用戶來說缺乏實質的幫助和吸引力。用戶普遍認為,推薦內容應該更具個性化,根據個人喜好進行推廣,才能更好地滿足他們的需求。
Old app screenOld app screen
現況問題#3
活動曝光率低,需用戶主動挖掘與探索
目前活動資訊的推廣管道過於單一,且大多數用戶不會主動探索內容。由於資訊僅以文字形式呈現,無法有效吸引用戶的注意力,導致活動資訊的曝光和吸引力不足。

用戶研究

在此次專案中,我與團隊共訪談了3位圖書館App的用戶,深入了解他們使用App的情境以及使用過程中可以優化的部分。訪談結果顯示,許多用戶遇到的主要問題包括借閱書籍通知不足,這使得他們容易忘記取書和還書。此外,我們發現,大多數用戶傾向於以被動的方式接收活動資訊,例如在前往圖書館取書時,偶然看到活動海報,並因海報內容而參加活動。

借閱通知不足
一位用戶提到,他經常忘記取書或還書,因為App的通知不夠明確或即時,這導致他錯過了多次借閱期限。
被動接收活動資訊
另一位用戶表示,他通常不會主動查看App中的活動資訊,而是在圖書館取書時,看到活動海報後才會有興趣參加。
Illustration of a teacher and a student

定義問題

「借閱體驗不連續,無法獲得有用的資訊,難以察覺活動資訊和功能服務」

線上開卡作業不便借閱體驗不連貫
推薦內容過於無趣無法吸引讀者借閱
資訊呈現方式不直觀難以察覺活動及功能

HMW

我們如何推薦有用的資訊內容,讓使用者有更好的借閱體驗,並有效推廣更多藝文活動和功能服務?

解決方向

有了HMW之後,我與團隊一同發想可能的解決方案,以下是我們想要鎖定的優化方向

優化線上開卡作業
提高借閱便利性
目前的線上開卡仍無法帶給用戶借書的便利性,我們希望優化開卡的流程讓借閱書籍的流程更加的連貫
理解讀者借閱興趣以推薦個人化內容
首頁目前缺乏個人化的推薦內容,導致大部分的用戶容易忽略首頁的推薦書籍,我們希望透過理解用戶的閱讀興趣來打造出個人化的書籍推薦
優化資訊呈現方式提高活動及功能曝光
目前App上的活動資訊仰賴用戶主動的探索,但透過訪談我們理解到用戶大多透過被動的方式得知活動資訊,我們希望優化資訊呈現方式,提高活動的曝光

線框圖

我將目標鎖定在我們的解決方案並繪製出第一個版本的線框圖, 繪製出來之後我與團隊一同討論,並且向設計總監們分享我的想法。

版本1
Wireframe image

從團隊以及設計總監們那裏我得到了許多寶貴的回饋,例如「首頁的互動方式過於複雜」「 借閱證的優化無明顯亮點」,針對這些回饋內容,我重新設計了另外一個版本,這些回饋有助於我在前期可以快速發想並調整設計。

版本2
Wireframe image

設計產出

在進入到設計之後,我也做了一些設計優化,以下是這次優化過後的設計稿:

解決方向#1
建立完整直觀的開卡流程,提升開卡便利性 讓借閱流程更連貫,提升使用者好感
我們優化了開卡流程,讓用戶可以通過簡單直觀的表單快速完成資料填寫,並且使用進度條引導用戶逐步完成所有步驟。透過此優化,用戶可以輕鬆上傳證件並在線上完成身分驗證,無需到臨櫃,即可直接開始借閱書籍,讓辦卡變得更方便、更靈活。
Redesign app screen
Redesign app screen
Redesign app screen
Redesign app screen
解決方向#2
了解讀者喜好與習慣,推薦更個人化的書籍,使讀者對推薦內容產生依賴,提升借閱體驗
透過問卷深入了解用戶的閱讀「目的」「類別」「喜好」,強化推薦內容的精準度,打中讀者的心,藉此提升讀者對推薦內容的依賴,產生對平台的好感。
Redesign app screen
Redesign app screen
Redesign app screen

推薦的內容藉由書評幫助使用者更深入了解推薦書籍的內容,提升借閱意願並拉近和其它讀者之間的距離,透過分享心得促進閱讀風氣

Redesign app screen
Redesign app screen

以讀者常借閱的分館推薦「還書書櫃」,提供更便捷、更有探索性的借閱體驗,讓讀者能有新奇的管道挖掘更多有興趣的書籍

Redesign app screen
Redesign app screen
解決方向#3
提供更直覺的借閱管理系統,讓用戶輕鬆掌握借閱狀況。同時,活動資訊以清晰、生動的牌卡形式呈現,吸引使用者的注意力。透過分類標籤,讀者能更方便地找到感興趣的活動內容,提升整體使用體驗。
優化借閱證的呈現方式,左右滑動的互動模式幫助管理多張借閱證,並更直覺地瀏覽借閱證資訊和狀態

我們優化了活動資訊的呈現方式,使用牌卡展示活動的重點資訊,吸引使用者的注意。每個活動類別都配有預設的視覺海報,使牌卡更生動且視覺一致。透過分類標籤,讀者能更方便地找到他們感興趣的活動內容,提升整體使用體驗。

設計方向

在這次的視覺設計優化中,我們遵循了三大準則:舒適的暖色調和圓潤字型提升使用體驗;易讀的簡潔牌卡確保資訊有效傳達;一致的視覺和互動設計讓大眾能更直覺地享受多元借閱服務,確保圖書館APP對每位使用者都友好且易於使用。

舒適
採用暖色調與圓潤的字型,為讀者營造舒適的借閱體驗。
易讀
牌卡上的資訊簡潔明瞭,確保推薦內容能夠被有效吸收。
一致
保持互動與視覺的一致性,讓使用者能更直覺地享受多元的借閱服務。

UI設計

情緒版
台北市立圖書館提供豐富多元的服務以及圖書資源,視覺應帶給人親切、明亮、清新的簡潔形象
Cozy and friendly library environment
顏色選擇
從圖書館的場景中重要的元素採用暖色的色彩,讓使用者能更好聯想到圖書館的形象,以綠色作為主色,帶給讀者更舒適的體驗
字型選擇
選用「俊羽圓體字型」,其特點包括三角形襯線和方頭筆觸且融合粉圓體的活潑感和隸書的韻味,突顯了圖書館既多元又文雅形象
圖標選擇
圖標也選用圓潤、簡潔、與文字風格呈現一致的視覺調性,突顯北市圖多元友善的閱讀環境,圖標的兩種狀態可以因應選取或未選取狀態作出對應變化
設計元件
整理牌卡資訊,並以顏色強調重點資訊,幫助使用者更快速判讀並吸收,以陰影效果創造牌卡漂浮感,引導使用者點擊互動
Redesign app screens

反思與學習

設計需要大量溝通
這是我第一個以團隊的方式進行一個專案,在過程中不論是用戶研究、線框圖設計、原型互動設計,各個階段團隊都會因有不同考量而有不同的想法,在這次的經驗裡面,我學習到了必須透過大量的溝通與討論,才能在彼此之中挖掘出共識,並訂定出優化的方向而推進專案的進行。
培養說故事的能力
這次的專案在過程中需要呈現設計提案簡報,在第一次的提案簡報中很明顯的看出設計總監們似乎不是很理解我的設計亮點,其主要的原因在於我的提案簡報並沒有梳理出清晰的設計脈絡,故難以看出設計前後的對比與影響力,在第二次的簡報中,我更警慎的在梳理我設計的前後因果關係,讓我在第二次的簡報中得到許多正向的讚賞與回饋,此經驗讓我學習到-簡報如同說故事,必須將聽眾帶入你的故事脈絡,才能深刻理解到各個設計決策。
Thank You

其他專案