top of page

背包客棧

app design

背包客棧app設計

UIUX design

2018

「背包地圖」:背包客棧團隊製作的app,以地圖的形式,讓旅人瀏覽曾在客棧上被發布過的文章。

overview

根據背包客棧的理念設計出一款旅人用的app

自己因為熱愛自助旅行,常常需要搜尋大量旅行用資訊,背包客棧是每個旅行者一定使用過的論壇,目前他們市面上有的app是只強調地圖功能的「背包地圖」,而這個專案的目標是設計一款跟論壇形式比較相近的產品。

背包地圖截圖.jpg

oberservaiton

觀察我常用的旅行app
  • couchsurfing:提供免費換宿以及與其他旅行者交流的功能。

  • map.me:支援離線地圖功能。

  • google map:除了地圖功能外,最常使用的功能是查詢某景點的評分/評論,還有儲存景點功能。

競品截圖.jpg

couchsurfing

map.me

google map

analysis

製作一款與市面上有別的旅行app

綜觀以上app,我觀察至今的旅行者仍然缺少一個好用的,統整大量資訊的app,因此使用者多半還是習慣用網頁搜尋資料,而資料的結果呈現方式則分為:

  • 部落客文章

  • 社群媒體

  • 背包客棧上的文章(部分會導向部落格或其他社群媒體)

  • 其他旅遊平台

所以,此專案志在設計出一款符合背包客棧宗旨「協助每個人完成屬於自己的旅行」的app。

user flow.png

背包客棧 app user flow

outcome

​LOGO & 初始頁面

客棧象徵每個旅人休息的場所,以此概念作為發想,結合「協助每個人完成屬於自己的旅行」呼應背包客棧原始初衷,希望使用者因為使用這個app而讓旅行更為順利,就像停留在好客棧一般的充滿了電,繼續上路。

launch page.jpg

初始頁面流程圖

​初始頁面prototype

outcome

​從主頁進入專區瀏覽文章

我將app瀏覽文章的方式依照不同類型做分類(最上方的「全部」「食記」「購物」「交通」...)而瀏覽文章的方式分為:

  • 從上方選單進入該分類,針對該類別文章進行搜尋或直接選讀

  • 從首頁選單「最新好文」或「精選好文」選取文章閱讀

food.jpg

主頁​>食記>食記中選文

食記 prototype

主頁​>搜尋頁面>搜尋結果

outcome

​主頁的地圖及搜尋功能
  • 搜尋功能:位於下方,方便使用者快速的搜尋全站文章

  • ​地圖功能:沿用「背包地圖」的功能,方便使用者快速瀏覽附近景點

search.jpg

主頁​>搜尋頁面>搜尋結果

搜尋功能 prototype

map.jpg

主頁​>地圖功能

地圖功能 prototype

outcome

​分類下的搜尋及Filter功能

​從主頁進入到各個分類中(這裡以「食記」為例),設計了從分類搜尋與filter功能,方便使用者可以更精確的找到文章,快速抵達目標。

food_search_fliter.jpg

由專區快速

過濾(右上)/搜尋(右下)

食記>filter prototype

搜尋功能 prototype

filter功能 prototype

bottom of page