台灣近年來因為新冠肺炎邊境管制的關係,掀起了一波國內露營風潮,露營是不能出國又想有度假感的最佳選擇,尤其新興的豪華露營Glamping更是一位難求。
今天要介紹的作品就是在疫情之下,因應此波露營熱而誕生出的新產品-「Gogo Camping去露營」。
關於 Gogo Camping 去露營
誕生於疫情之下的B2B2C營地、營友媒合平台。
由Gogo Camping去露營提供營地主一個可以自行上架營區、營位資訊的平台,使用者可以透過精準的搜尋功能,快速找到適合自己的營地,並利用流程清晰的金流系統,用手機即可結帳無障礙,給使用者一趟說走就走的露營之旅。
我們的提案
夏木樂引進國外「Sprint」會議模式,讓每個提案初期都能以最有效率的方式,發展出最放肆、天馬行空的想法,並尊重每位提案人的意見,最後再從中進行收斂,進而整理出最適合也最具創意的提案企劃。
首先我們參考訂房網界標竿「Airbnb」與「Booking.com」,讓夥伴們列舉出他們的優點,例如清晰的美式簡約風格、日曆介面、關鍵字搜索快速、提示清楚且明顯等。接著,一位常常露營的夥伴H也提出,台灣現在的露營訂房市場其實已有許多選擇,但普遍都有網站版順暢、行動版卡當的問題,尤其是結帳與日期頁面,於是我們決定從「行動優先」的角度出發,以大的按鍵、圖片組合出畫面。
中間的過程-部落格先行
這也是夏木樂提案中當重要的一環,夥伴H表示不論是在找營地、租借營具或購買營具時,常出現需要在四五家網站找好資料才能進行對比的情形,於是我們也在提案中加入「經營露營部落格」的想法,由此可以讓營友們快速對比資訊,也可以做出與其他品牌的差異化,其中,又因去露營是一個從無到有的網站,因此我們在網站製作時就決定讓「部落格」功能先於官網其他功能更新、上線,讓寫手可以先上文章,爭取SEO經營的時間。
最後呈現出來的樣子
進階篩選器與地圖搜尋
第二階段的搜尋器優化中,一般訂房網站能做到的「關鍵字」搜尋自然不可少,露營客群相較一般飯店客群,因為需要租借裝備的緣故,又更在意海拔、山景、包帳、可否帶寵物等需求,因此我們在篩選器上,也為了營友們特製了「海拔」、「包帳」等選項作為進階篩選條件,讓網站更貼近營友真實需求。
![](https://miro.medium.com/v2/resize:fit:592/1*SbfLP68hG6G1DC5rl1CT_Q.png)
![](https://miro.medium.com/v2/resize:fit:827/1*50OxkA6tTkACMXeY-NF06A.png)
行動優先設計
由夥伴H所提出的「優化行動版」需求,是我們這次決定做行動優先設計的初衷,從大字、大卡片、大按鍵、左右邊留白到單行式資訊呈現,都是為了提高行動版網站易讀性,同時我們也做了以Line為帳號密碼的快速登入系統,讓你再也不會為了帳號密碼而苦惱。
庫存管理功能
身為B2B2C網站,不只對顧客貼心,對營地主的需求更要上心,在營位上架時,因不同營位、不同日期有不同價位與數量等問題,讓上架與定價變成一個棘手的問題,夏木樂為此製作了價位x日期表格,可以針對每個營位、不同日期輕鬆調整庫存與定價,營地主上架更省心。
總結
感謝Gogo Camping去露營對夏木樂的信任,讓我們再次合作,從0到有的把B2B2C網站生出來。
此次案例分享中不斷提及「行動優先」的設計概念,是近幾年蓬勃發展的新網頁設計思維,也是本次計劃的重中之重,如果你對行動優先網站的概念有興趣,歡迎點擊以下文章延伸閱讀:
【去露營】Gogo Camping|專為露營愛好者打造的露營訂房平台
B2B2C露營訂房小幫手
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/bb36733c6f548d28687e3b70.png)
01
overview
誕生於疫情之下的B2B2C營地、營友媒合平台
台灣近年來因為新冠肺炎邊境管制的關係,掀起了一波國內露營風潮,露營是不能出國又想有度假感的最佳選擇,尤其新興的豪華露營Glamping更是一位難求。
而「Gogo Camping去露營」就是在疫情之下,因應此波露營熱而誕生出的新產品一。
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/e3710738475a220e01a03c9c.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/3d0e03cb478a8329d99e6c00.png)
客戶的需求與網站規劃
希望解決愛露營的人們以及營地主,不論是在經營上、訂房上所遇到的問題。
由「Gogo Camping去露營」提供營地主一個可以自行上架營區、營位資訊的平台,也讓使用者可以透過精準的搜尋功能,快速找到適合自己的營地。並利用流程清晰的金流系統,用手機即可結帳無障礙,給使用者一趟說走就走的露營之旅。
1. 營地主上架管理營區、營位資訊
2. 精準搜尋,快速找到適合的營地
3. 支持多種付款方式,保障交易安全
02
FEATURES
風格制定
夏木樂引進國外「Sprint」會議模式,讓每個提案初期都能以最有效率的方式,發展出最放肆、天馬行空的想法,並尊重每位提案人的意見,最後再從中進行收斂,進而整理出最適合也最具創意的提案企劃。
首先我們參考訂房網界標竿「Airbnb」與「Booking.com」,讓夥伴們列舉出他們的優點,例如清晰的美式簡約風格、日曆介面、關鍵字搜索快速、提示清楚且明顯等。
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/a846d0373cae983db1631978.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/fd8df37d456cfc016b9162e8.png)
進階篩選器與地圖搜尋
一般訂房網站能做到的「關鍵字」搜尋自然不可少,露營客群相較一般飯店客群,因為需要租借裝備的緣故,又更在意海拔、山景、包帳、可否帶寵物等需求,因此我們在篩選器上,也為了營友們特製了「海拔」、「包帳」等選項作為進階篩選條件,讓網站更貼近營友真實需求。
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/cc5a836996336b1c3e471913.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/11ded856a99b386d1fe46883.png)
行動優先設計
從大字、大卡片、大按鍵、左右邊留白到單行式資訊呈現,都是為了提高行動版網站易讀性,同時我們也做了以Line為帳號密碼的快速登入系統,讓你再也不會為了帳號密碼而苦惱。
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/70bd8cccddd23944a425dd30.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/8b0cc35298301861f785e024.png)
庫存管理功能
身為B2B2C網站,不只對顧客貼心,對營地主的需求更要上心,在營位上架時,因不同營位、不同日期有不同價位與數量等問題,讓上架與定價變成一個棘手的問題,夏木樂為此製作了價位x日期表格,可以針對每個營位、不同日期輕鬆調整庫存與定價,營地主上架更省心。
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/4048a1e0d55744a818cc5c24.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/b246d481033cfbfafa7aea02.png)
部落格經營
這也是夏木樂提案中當重要的一環,夥伴H表示不論是在找營地、租借營具或購買營具時,常出現需要在四五家網站找好資料才能進行對比的情形,於是我們也在提案中加入「經營露營部落格」的想法,由此可以讓營友們快速對比資訊,也可以做出與其他品牌的差異化,其中,又因去露營是一個從無到有的網站,因此我們在網站製作時就決定讓「部落格」功能先於官網其他功能更新、上線,讓寫手可以先上文章,爭取SEO經營的時間。
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/c857ed9bc1bf3a2321bb6712.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/bfa86a41b09ceb4e9d919654.png)
03
DESIGN
設計規範 UI GUIDE
色彩計畫
設計團隊針對去露營網頁視覺設計上設定的色調,為強調自然、山野的主題,因此以明亮的藍綠色作為網站的主色,搭配無彩色作為輔色,讓整體呈現清新現代的調性。
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/82159ddb8a75642e15c3fc07.png)
介面元素
結合網站主題的 Icon 設計
輔助資訊呈現的icon,我們選擇使用露營車、山、帳篷等元素,背景也使用等高線圖形作為裝飾,讓充滿心思的小細節也緊扣主題。
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/abaac38b503e2e4986d6862b.png)
04
Illustration
插畫設計
去露營在設計需求上加入了少量的插畫元素,設計團隊為去露營挑選適合的現代風格素材插畫,並重新調整了插圖的色彩計畫、造型設計、與畫面構圖調整,讓插畫保有一致性、與網站更契合。
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/7d83f6a6efd713999f9934b9.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/362c0f1df5cf36462876887a.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/8b1233504e2c08d0cc5205fa.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/7477f8a5aaff3e7de8cb05f0.png)
05
REVIEW
更多頁面
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/00cad46b45765c48e2c4802f.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/3e3ab2ee1acca4cac71ec716.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/19075538796bf4632dc76f6b.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/6bc72bb144f2272458212128.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/b8d694c0e42234e2ef227f61.png)