TAFM APP Redesign
台北市立美術館應用程式再設計
本次設計重點在於增強應用程式的功能性和使用者體驗,提供參觀者更全面且便利的服務。新增預約服務功能讓使用者可以提前安排參觀時間,避免在現場久候;同時,應用程式內增加詳盡的美術館資訊,使用者能夠快速地獲取展覽資訊、館內設施介紹和導覽服務等。
User Research
用戶研究
研究發現,年長或攜帶兒童的參觀者在入場時等待時間過長,聽力受損者在購票和詢問時面臨溝通困難,有特殊需求的參觀者無法提前確認設備可用性,且設施指示不夠明確,難以找到無障礙設施和育嬰室。根據這些發現重新設計應用程式,以更好地滿足參觀者需求並改善整體使用體驗。
痛點研究
PAIN POINTS
年長或攜帶兒童的參觀者需要花費太多時間進入美術館。
因為無法順利溝通,聽力受損的人在購票或詢問時會遇到問題。
有特殊需求的參觀者無法確認是否有足夠的設備可供租借。
美術館的設施指示不明確,有特殊需求的參觀者無法在不詢問工作人員的情況下找到無障礙設施或育嬰室。
人物誌
PERSONA
做完痛點的研究之後,我藉由定義 Persona,讓我理解試用者的行為、目的、內在動機和隱藏的情緒,以及可能遇到的挫折。
USER JOURNEY MAP
用戶體驗地圖
User Experience Design
使用者體驗設計
使用者流程
USER FLOW
我希望這個應用程式除了預約展覽,也能夠改善參觀者在觀展當下的體驗,因此加入搜尋功能,讓使用者可以在觀展的當下搜尋作品的簡介或場館內的設施,避免因場地標示不明或場館工作人員短缺而影響觀展體驗。
線框圖
WIREFRAME
這個應用程式的其中一個用途是作為美術館的廣告行銷媒介,所以在首頁優先考量如何呈現展覽相關的圖像和資訊,在設計上以大面積的圖片吸引使用者點擊展覽資訊;另外是導覽列的設計,我希望使用者能夠快速精準地使用應用程式的功能,而螢幕下排的導覽列比起漢堡式選單更加直觀,並且減少使用者點擊次數。
低擬真原型
LOW-FIDELITY DESIGN
以較簡易的介面模擬使用者流程,測試頁面轉換的流暢度及內容易讀性,確保應用程式設計符合邏輯,並且明確傳遞資訊。在本次設計過程中,透過主題色和字級大小幫助使用者快速辨識資訊層級;此外,加入具有一致性的按鈕及箭頭等元素,引導使用者點擊操作,完成使用流程。
Refining the app design
最佳化應用程式設計
DESIGN SYSTEM
設計系統
Primary color & Secondary color
Font
高擬真原型
HIGH-FIDELITY DESIGN
以完整的介面模擬使用者體驗,測試所有互動功能和視覺設計的細節,確保應用程式的視覺呈現和操作方式達到預期效果。在本次設計過程中,根據設計系統搭配色彩和字體,營造整體畫面的一致性,並細緻調整各種 UI 元素以提升使用者的操作流暢度。同時加入頁面切換的動態效果,符合現代應用程式操作直覺。這樣的設計不僅提升了使用者體驗,也確保應用程式的質感與功能性並重。
進入頁面
進入畫面僅顯示必要資訊,以確保使用者不會受到多餘元素的干擾,從而順利完成操作。這樣的設計既能確保操作的流暢性,又保持了簡潔美感,符合美術館的整體形象。展覽和活動部分則採用卡片式設計,清楚區分不同的活動類型,同時加入了引導性按鈕,促使使用者點擊操作,讓整體使用體驗更加流暢。
預約流程
預約畫面採用彈出式視窗,明確提示使用者這是一個從活動頁面延伸出來的操作。為了讓使用者能更好地預估填寫所需的時間,畫面中加入了流程進度欄,這樣可以減少因為不確定性而中斷預約的情況發生。此外,統一樣式的按鈕設計有助於引導使用者順利完成預約流程,確保整體操作的流暢性和一致性。
導覽列
採用卡片式設計呈現各頁內容,有助於清晰地區分不同資訊,同時保持整體畫面的一致性。在搜尋頁面中,預先設定常見的搜尋項目,使得使用者在觀展前或觀展過程中,能夠迅速找到所需資訊。不僅提升了使用者的操作效率,也確保了資訊的易讀性和整體體驗的流暢性。