Pet City

▍專案概要

I. 專案背景

Pet City 是一個由四名成員組成的團隊，兩個月完成六角學院的課程專題。團隊成員包括前後端開發人員，我於專案內擔任 UI/UX 設計師，協助 UI 設計及提供一些 UX 想法與團隊討論。

II. 專案目標

建立一個讓使用者可以安心搜尋寵物旅館的平台。

III. 定義問題

有時候寵物飼主無法找到能幫他們短期照顧寵物的人，因此需要為寵物尋找適合的寵物旅館。

IV. 解決方案

• 提供完整且清楚的寵物旅館資訊：
  我們要求寵物旅館業者於註冊帳號時提供完整資訊，包括服務項目、旅館及房間照片。
  
• 寵物卡片提供寵物旅館業者住宿的寵物資訊：
  讓寵物旅館業者清楚了解寵物的需求和健康狀況，避免預訂房間後雙方資訊不對稱的問題。

▍研究分析

使用者訪談

開發人員訪問了一些有飼養寵物的人，以了解他們在尋找寵物旅館時的需求和關注點。根據研究內容，我歸納出以下幾項痛點。

寵物飼主有哪些痛點呢？

• 關心寵物旅館是否能完善地照顧他們的寵物。
• 希望寵物旅館能滿足寵物的特定需求，例如房間大小、飲食偏好和活動空間等。
• 想知道寵物旅館可以為他們和寵物提供哪些服務。

市場研究

我於產品設計完成後，為了解市場上是否對於寵物旅館訂房平台有確切的需求，自行找尋了目前台灣寵物登記犬貓及合法寵物旅館隻之數量，從資料中可以明確看到寵物及寵物旅館的數量有增加的趨勢，2019 年全國合法寵物旅館約 2,153 家，而 2023 年則增加至 3,840 家，成長率約為 78.3%，可見消費需求正逐年增加。

因目前市場上尚為有相關平台提供寵物旅館業者及寵物飼主進行旅館預約及曝光，可推斷 Pet City 具寵物旅館服務市場開發的潛力。

此外，透過財團法人中華民國消費者文教基金會新聞稿，了解到消費者與寵物旅館進行交易時需要注意以下問題。因此在產品迭代時，需在思考如何協助消費者利用平台消費時，避免這些爭議的產生。

• 特定寵物業許可證字號：
  Pet City 可以串聯行政院農業委員會資料開放平台 API，協助合法寵物旅館的資料媒合，以提供消費者在平台上更安心的選擇。
• 合約內容：
  可思考是否提供制式化合約讓寵物旅館填寫資料，並讓消費者下訂時瀏覽確認合約內容，避免消費糾紛。

違法業者

明確退款方式

寵物死亡賠償

▍Sitemap

兩種類型使用者的後台介面設計

Pet City 針對寵物飼主和寵物旅館業者兩種類型的使用者，設計不同的後台功能。寵物飼主的後台主要為管理預約及寵物名片，而寵物旅館業者則是管理旅館，如房間、預約訂單等資訊。

▍流程圖

I. 如何在註冊過程中辨識用戶身份呢？

使用者需選擇身份為寵物飼主或寵物旅館業者，以便後續辨識。

II. 如何讓使用者輕鬆搜尋寵物旅館？

搜尋欄設計整合了寵物名片，名片資訊內包括寵物資料及需求。

▍Wireframe

開始進行 Mockup 前，我提出了更友善使用者的介面設計想法，並與開發人員確認在哪些介面上的資料需與資料庫連接、資料內容。

寵物旅館業者後台 - 訂單管理頁

• 第一版：
  將訂單管理頁設計成日曆型式，讓寵物旅館業者可以輕鬆一覽所有房間預訂狀況。點擊預約內容後跳轉至第二個頁面，則有預約訂單的詳細資料和更改預約訂單狀態的按鈕。

• 第二版：
  為省去第一版設計讓使用者於兩個頁面間切換的不方便，我提出修改成單一頁面瀏覽預約訂單，將訂單狀態分成四個類別：待入住、已入住、已完成和已取消，讓使用者快速查閱訂單，並修改其狀態，同時也減少了編寫兩個分開頁面所需的程式時間。
  

▍Mockup

進行 Mockup 時，我持續與開發人員保持溝通，以確保彼此開發方向一致，以完成最終的設計介面樣式。

I. 寵物飼主後台 - 我的寵物名片頁

「寵物名片」是 Pet City 最特別的功能，它優化了使用者搜尋合適合的寵物旅館和向旅館傳達寵物需求的流程。此外，使用者可以為每一隻寵物客製化每張寵物名片的資訊。

• 寵物旅館服務標籤：
  寵物旅館服務標籤將協助寵物飼主篩選過濾出符合他們需求的寵物旅館。
• 寵物旅館清楚了解寵物資訊：
  寵物飼主預訂房間後，寵物旅館業者收到訂單的同時也會收到寵物名片，以幫助業者了解預訂住宿的寵物資訊和需求。
• 輕鬆創建和編輯寵物名片：
  寵物名片新增及編輯頁面以單選按鈕、複選框和文字輸入框等元件製作，讓使用者輕鬆編輯資料，並維持資料的完整及乾淨度。

II. 首頁 - 搜尋欄

為提升使用者搜尋適合的寵物旅館效率，整合寵物名片在搜尋欄內，讓使用者可以一個步驟依據他們的需求完成篩選寵物旅館。

III. 首頁 - 篩選器

使用單選按鈕和複選框元件設計篩選器，讓使用者可以快速地瀏覽選項後作出抉擇，而非使用下拉式選單。

IV. 寵物旅館資訊頁

重新排版了資訊區塊，如營業時間、服務標籤和評論，使其排版清楚更易於閱讀，使用者也可於確認評論後再預定房間。

▍Prototype

尋找一間寵物旅館

建立一個寵物名片

▍企業識別系統

Logo 設計理念

Pet City 的目標是提供一個平台，讓使用者能夠為他們的寵物選擇一個像家一樣的寵物旅館。為了呈現這個目標，Logo 的設計中加入了愛心和家的元素，最終我選擇了簡單的形狀組合來代表房子、狗和貓。

品牌色設計理念

橘色代表溫暖、活力和快樂，而綠色則代表和平及健康，就如同我腦袋中想象寵物在草地上快樂地玩耍的場景一樣。

元件設計

為了維持產品設計的一致性，於開始進行頁面設計前，確認所有頁面可能需要哪幾項元件設計，接著建立設計系統，包括顏色、字體、按鈕和文字輸入框等元件後，再將這些基礎元件應用於 Pet City 的其他元件設計中。

▍學習總結

因專案時程較緊迫，我們沒有足夠的時間進行前期的深入研究。僅於瀏覽 Wireframes 與 Mockups 時，確認使用者流程是否對使用者友善或需要再進行一些調整。未來，我們計劃進行易用性測試，以獲取更多使用者對產品的使用反饋。

完成 Pet City 專案後，意識到好的產品設計不僅應考量使用者需求，還有需要與開發人員之間有效溝通，包含介面設計、資料需求和專案時間的可行性。了解到有效溝通是團隊合作的基礎。