背包客棧
app design
背包客棧app設計
UIUX design
2018
「背包地圖」:背包客棧團隊製作的app,以地圖的形式,讓旅人瀏覽曾在客棧上被發布過的文章。
overview
根據背包客棧的理念設計出一款旅人用的app
自己因為熱愛自助旅行,常常需要搜尋大量旅行用資訊,背包客棧是每個旅行者一定使用過的論壇,目前他們市面上有的app是只強調地圖功能的「背包地圖」,而這個專案的目標是設計一款跟論壇形式比較相近的產品。
oberservaiton
觀察我常用的旅行app
-
couchsurfing:提供免費換宿以及與其他旅行者交流的功能。
-
map.me:支援離線地圖功能。
-
google map:除了地圖功能外,最常使用的功能是查詢某景點的評分/評論,還有儲存景點功能。
couchsurfing
map.me
google map
analysis
製作一款與市面上有別的旅行app
綜觀以上app,我觀察至今的旅行者仍然缺少一個好用的,統整大量資訊的app,因此使用者多半還是習慣用網頁搜尋資料,而資料的結果呈現方式則分為:
-
部落客文章
-
社群媒體
-
背包客棧上的文章(部分會導向部落格或其他社群媒體)
-
其他旅遊平台
所以,此專案志在設計出一款符合背包客棧宗旨「協助每個人完成屬於自己的旅行」的app。
背包客棧 app user flow
outcome
LOGO & 初始頁面
客棧象徵每個旅人休息的場所,以此概念作為發想,結合「協助每個人完成屬於自己的旅行」呼應背包客棧原始初衷,希望使用者因為使用這個app而讓旅行更為順利,就像停留在好客棧一般的充滿了電,繼續上路。
初始頁面流程圖
初始頁面prototype
outcome
從主頁進入專區瀏覽文章
我將app瀏覽文章的方式依照不同類型做分類(最上方的「全部」「食記」「購物」「交通」...)而瀏覽文章的方式分為:
-
從上方選單進入該分類,針對該類別文章進行搜尋或直接選讀
-
從首頁選單「最新好文」或「精選好文」選取文章閱讀
主頁>食記>食記中選文
食記 prototype
主頁>搜尋頁面>搜尋結果
outcome
主頁的地圖及搜尋功能
-
搜尋功能:位於下方,方便使用者快速的搜尋全站文章
-
地圖功能:沿用「背包地圖」的功能,方便使用者快速瀏覽附近景點
主頁>搜尋頁面>搜尋結果
搜尋功能 prototype
主頁>地圖功能
地圖功能 prototype
outcome
分類下的搜尋及Filter功能
從主頁進入到各個分類中(這裡以「食記」為例),設計了從分類搜尋與filter功能,方便使用者可以更精確的找到文章,快速抵達目標。
由專區快速
過濾(右上)/搜尋(右下)
食記>filter prototype
搜尋功能 prototype
filter功能 prototype