UI/UX 設計 — KKday Travel Monster 關於一隻熊仔的誕生事記

Harry Chuang
KKday Tech Blog
Published in
6 min readFeb 11, 2019

--

KKday旅行攻略這個專案,大約始於2017年的3月,一直到最近總算有了自已的品牌Travel Monster,這之間也過了近2年的時間。這篇文章並不會詳細描述設計或是使用者體驗的細節,其一是因為這一直是一個MVP專案所以還在不斷試錯,其二就是說不完 XD

話說從頭

2017年初離開上一間公司後,開始了浪人設計師的生活,就在那時候接下了KKday旅行攻略這個APP界面設計專案,有趣的是,這是KKday的首支APP。

KKday的主產品是旅行商品電商平台,另外也經營旅遊部落格,分享世界各地的旅行攻略相關文章,而這支APP在初期所分擔的主要任務就是旅行攻略的部份。

初期簡易的視覺定調

在開始設計一個APP時,習慣簡單將產品的輪廓大概描繪出來,像是大概的圖像風格、插圖風格、色調以及字體…等,簡單的視覺規劃有助於讓自已不要偏離設計的走向。

第1版的界面功能規劃相當單純,城市攻略文章、文章蒐藏和文章編輯。
提供喜歡自由行的使用者不同城市的旅遊攻略文章,讓使用者可以蒐集相關的文章,編輯文章內容,記下使用者自已所需要的旅遊攻略重點。

Version 1.0

這個APP並非KKday的主產品,所以開發人員的配置上相對規模也比較小,所以從初期到現在都是以MVP的模式在進行開發,然後不斷試錯,相關功能也隨著時間慢慢擴展。

記事本其實和當初的設計有些落差,所以使用體驗上會比較不順,這點期待之後會有所改善~

剛推出第1版時~城市和文章都不多,所以首頁在第1版是以城市列表為主。後續因應城市的增加以及文章的增加,所以到了第2版,增加了搜尋及問答的功能。其中的問答功能可以讓使用者詢問旅行相關的問題,讓旅人之間可以彼此交流。

另外首頁也進行改版並導入了動態模板,設計出4–6種不同的視覺模版,透過後台可以讓維護人員控制APP首頁所要顯示的內容區塊,在不同的季節和時期可以呈現更多元的旅遊主題內容給使用者。

Version 2.0

從第1版到第2版的一年多的期間,這支APP其實並沒有一個主要的名稱,原因在於KKday希望這支APP可以自已獨立出自已的品牌,但也因為還在測試反應的階段,因此一直沒有一個很正式的名稱,所以當獲選App Store的主打推薦時,也頗尷尬,因為不太確定它的正式品牌名字為何。

App sotre 主打推薦

KKday Travel Monster

登登~於是到了第3版,也就是去年的六月初左右,KKday總算決定讓它獨立出道,也有了它自已的名字 Travel Monster! 因為是獨立的品牌,所以色系自然要來個翻轉,黃色從原本的輔色大膽轉變成為主色~正式跳脫KKday的視覺印象。

KKday希望能有個吉祥物來輔佐這個新品牌,於是我也幫忙推薦認識的設計師來協助,很幸運的~從幾位人選中終於找到了一個很棒的設計師簡V來參與設計全新的Logo以及吉祥物設計。

第3版的吉祥物及Logo By 插畫家簡V

最初的設計並沒有如今的小白熊熱氣球的形象,而是從插畫師的手稿中慢慢找出一些不錯的元素,像是象徵旅行的熱氣球並與熊做結合,於是就成了目前所見的小白熊熱氣球。

新的品牌視覺大概完成於去年的六月,但因為當時專案的工程師正忙於新功能的開發,加上當時在新加坡的工作也很忙錄,因此大概又過了半年的時間,才正式完成第3版的界面改版。

可能因為看久了KKday原本的主色系,所以這樣大剌剌的新色系,讓大家都有耳目一新的感覺,再加上吉祥物本身很討喜,讓這整個APP的能量又一次重新填滿 :D

Version 3.0

第3版除了運用新的色彩外,也增加了像是文章類型的Filter功能、問答區塊…等的頁面調整和改版。這個版本更加強調了問答的功能,讓使用者在進入城市的內容頁後,就可以查覺到問答區塊,另外Filter的功能也解決了一些熱門城市文章或是影片因為數量過多而不容易瀏覽的問題。

這整個專案最大的功臣是PM雪莉大大,內容從0到1的用心規劃,一步步讓這個app走向獨立品牌,然後積極地讓它上了App Store的推薦,可以猜想整個過程的應該充滿了血淚史 XD

另外值得一提的趣事是~在第2版的時候,因為和Skyscanner合作,所以當初設計了機票購買相關的界面和流程。

但分析人員發現,其實使用者是非常懶於訂票這件事的,所以取消了訂票的功能並改為在文章下方直接提供機票資訊的卡片,吸引使用者直接購票。

後記

所幸工程師都很強大地在年前把主要的內容開發完畢並且順利上架更新~

這個專案一直是以MVP的模式持續開發中,雖然開發規模不如主APP那樣完善,但因為還在初期階段,所以需要一直不斷地試錯,然後調整和增加不同的功能。所以還有許許多多的功能待改善、待規劃以及待開發中,就敬請期待這隻小怪獸慢慢成長並且持續茁壯吧 :D

KKday Travel Monster iOS APP下載連結
https://apple.co/2RYGN5u

--

--