Wanderwag
Wanderwag
畢業專題 | 2 週
專案目標：
打造一個幫助使用者找到寵物友善旅館的旅遊訂房平台。
我的角色：
在這次的專案裡我和其他5位設計師一起合作，在兩週的時間內設計出一個網路訂房網站，我負責的任務包含建立一個設計系統、繪製wireframe、UI設計和製作可互動的prototype。
平台主頁
平台主頁
平台主頁
搜尋結果
搜尋結果
搜尋結果
旅館資訊
旅館資訊
旅館資訊
專案背景
專案背景
打造一個旅遊訂房平台
打造一個旅遊訂房平台
這個專案是AAPD UI 設計實戰營的畢業專題，我們被分配了特定的主題和user story，目標是要針對這些已知的需求設計出理想的解決方案。
User Story #1： 訂房首頁
User Story #1： 訂房首頁
「我期望能在『訂房首頁』設定住宿條件（日期、地點、人數、寵物數量等）並搜尋，讓我能找到符合需求的房源。」
「我期望能在『訂房首頁』設定住宿條件（日期、地點、人數、寵物數量等）並搜尋，讓我能找到符合需求的房源。」
User Story #2：搜尋結果頁
User Story #2：搜尋結果頁
「我期望能在『搜尋結果頁』瀏覽不同房源的照片、價格、評分和評論，讓我能做出初步決策。」
「我期望能在『搜尋結果頁』瀏覽不同房源的照片、價格、評分和評論，讓我能做出初步決策。」
User Story #3：房源資訊頁
User Story #3：房源資訊頁
「我期望能在『房源資訊頁』查看房源的詳細資訊，包括全部照片、友善寵物相關設施和附加服務，讓我能判斷是否要下訂此房源。」
「我期望能在『房源資訊頁』查看房源的詳細資訊，包括全部照片、友善寵物相關設施和附加服務，讓我能判斷是否要下訂此房源。」
競品分析
競品分析
我們透過競品分析來決定適合我們的設計方向
我們透過競品分析來決定適合我們的設計方向
進行競品分析之後，我們根據產品的商業模式（Y軸）和視覺風格（X軸）把潛在的競品用十字定位法進行分類和定位，嘗試在這些商品中找到屬於我們的發展方向。
受眾廣泛
受眾聚焦
活潑、豐富
簡約、乾淨
Our direction
受眾廣泛
受眾聚焦
活潑、豐富
簡約、乾淨
我們的方向
產品方向
產品方向
打造一個有著簡約視覺風格的寵物友善旅館的旅遊訂房平台
打造一個有著簡約視覺風格的寵物友善旅館的旅遊訂房平台
我們發現受眾廣泛的大平台優勢在於有著非常豐富的客房選擇和價格優惠，而對於一個新的產品來說，是沒有辦法在價格上發揮競爭力的。
為了要在這個競爭激烈的市場上生存下去，我們的策略是把目標受中聚焦在有特定需求的族群上，加上在背景研究的過程中，發現寵物旅遊是一個非常有潛力的市場，而我們也進一步將目標客群聚焦在寵物狗的飼主身上作為平台的出發點。
除此之外我們在使用競品的過程中也發現，過度豐富和活潑的視覺設計會干擾使用者的使用體驗，讓頁面上的資訊過於雜亂、難以聚焦，所以我們決定以簡約、乾淨的視覺風格來設計我們的產品。
Wanderwag
/名詞/
由"Wander"和"Wag"組合成的文字，象徵著與毛小孩們安心愉快的旅遊體驗。
Mood board
Mood board
活力、自在、舒適
活力、自在、舒適
我們依照期望的產品核心價值建立了一個mood board來幫助我們定調設計的風格。
設計系統
設計系統
顏色、字型、圖示
顏色、字型、圖示
在開始進行設計之前，我們依照品牌的核心價值選擇了產品的主題色、字型和圖示風格並整理出設計規範，在選擇顏色時我們也確保了主題色在對比度上可以符合A11y的規範。
基礎元件系統
基礎元件系統
除了字型和顏色外，我們進一步的把基礎的元件也做了規劃和整理，確保在進行設計時可以維持一致的視覺風格。
設計細節
設計細節
從使用者故事到wireframe
從使用者故事到wireframe
因為本次專案的時間有限，所以我們這次的目標放在三個主要頁面的設計呈現上，並從繪製wireframe開始我們的設計流程。
視覺化使用者體驗
在設計使用者介面的過程中，我們嘗試在平台的視覺細節上營造毛小孩及飼主友善的使用體驗，除此之外也額外設計了一個行動裝置應用程式版本，方便使用者在更多情境下都能使用我們的產品。
平台首頁 UI
平台首頁 UI
Search bar互動細節
Search bar互動細節
元件庫
元件庫
手機版平台首頁 UI
手機版平台首頁 UI
預設狀態
開始搜尋
下滑狀態
Search bar展開狀態
搜尋結果頁面 UI
搜尋結果頁面 UI
地圖視窗互動細節
地圖視窗互動細節
元件庫
元件庫
手機版搜尋結果頁 UI
手機版搜尋結果頁 UI
讀取狀態
下滑狀態
Search bar展開狀態
篩選列表
旅館頁面 UI
旅館頁面 UI
下滑時導航列表狀態變化
下滑時導航列表狀態變化
元件庫
元件庫
手機版旅館頁面 UI
手機版旅館頁面 UI
旅館簡介
設施和地圖
房型選擇
收藏與分享選單
後記
後記
在兩週的密集討論與協作中我學到了什麼
在兩週的密集討論與協作中我學到了什麼
由於這個專案是UI設計實戰營的畢業作品，在兩個禮拜的時間內我們並沒有足夠的時間針對使用者行為做深入的調查與研究，於是我們從競品分析開始整個設計流程，藉著這個機會我們從各種設計細節上去觀察一個成熟的產品，並思考有什麼值得學習和改善的地方。
在專案結束前的一次design review中，實戰營的設計師前輩們點出了我們的設計明顯有著視覺風格一致性的問題，由於我們採用個別設計不同頁面的合作方式，如何建構一個清楚完整的設計系統對我們來說便成為一個當務之急，在風格與元件樣式統一之後我們成功地改善了這個問題，並在時限內完成了電腦版與手機版兩個版本的設計。
這次的專案對我來說是一個很好的機會，能夠讓我在團隊合作的工作模式下發揮過去所學的設計技巧，在這次的協作過程中，我們在線上進行了密集的非同步討論，激盪出了很多在自學時所沒有想過的觀點。
如果你對這個專案有興趣更進一步的了解，歡迎透過各種方式聯絡我，我非常樂意和設計師朋友們分享與交流學習上的心得！