Backpacker Deals - A responsive website for travel and adventure deals
“
Deals on tours and activities, from the first search to the bookings calendar.
Backpacker Deals
Responsive website, 2014
About the project
Backpacker Deals is a Melbourne company that sells tours, activities and adventure trips at a discount, from skydiving and kayaking to multi-day tours of Australia and New Zealand. In 2014 we redesigned its website for desktop, tablet and phone: the home page, the offers listing, a Why Book With Us page and the account area where travelers check their bookings.
Project
Backpacker Deals Website
Industry
Travel and Tourism
Location
Melbourne, Australia
Date
2014
“
Client Request
Backpacker Deals asked us to redesign its deals website so it works on desktop, tablet and phone.
Backpacker Deals
Website redesign, 2014
Design Pillars
Core UX Principles
The home page opens with one question, Where do you want to go, over a full-width adventure photo.
Five colored tiles under the search explain why to book here, from the best price to verified operators.
Offer cards show the place, the duration and the price, with buttons to save a deal or view it.
Traveler Needs
What a Traveler Checks Before Booking
Where Can I Go?
Filters for country and city, activity, travel type and price range narrow the offers.
Can I Trust This Site?
A Why Book With Us page covers safe payment, the guarantee, expert help and cancelling up to 48 hours before.
Where Are My Bookings?
The account area shows bookings on a calendar, with pending vouchers and their expiry dates.
The Challenge
Problem Statement
The Main Goal: Make Deals Easy to Find on Any Screen
The old site listed deals in one long column of photos, prices and buttons. The new design had to put search and the reasons to book first, show offers in a grid that is easy to scan and work the same way on tablets and phones.
“
Kickstart your adventure.
Home Page Headline
Plexable, 2014
Our Approach
Solution
A Responsive Deals Website
Designs for the home page, the offers listing, the Why Book With Us page and the bookings area, each at desktop, tablet and phone size. It is an example of our Ecommerce Website Design work.
01 - Home Page
A photo hero with search, five reasons to book, popular deals, partners and a newsletter sign-up.
02 - Offers and Filters
A listing for each destination with four filters and cards for the place, the duration and the price.
03 - Account and Bookings
A menu for details, purchases, vouchers and notifications, and a calendar that shows each booking.
Before & After
The Blueprint & Evolution
The Old Site to the New Design
The new home page was running on backpackerdeals.com by March 2015.
Before: the Backpacker Deals home page in September 2014.
After: our design on the live site in March 2015.
Design
Key Features
Why Book With Us
Six cards with icons explain the selection, safe payment, the guarantee, expert help, verified operators and cancelling up to 48 hours before.
Bookings Calendar
Travelers switch between a calendar and a list, filter by activity and country, and see the vouchers they still have to use.
Design System
Visual Identity
Typography
A clean sans for the interface and a brush script for the Kickstart your adventure headline.
Color Palette
A charcoal header and footer, a coral search button and five bright tile colors, one for each reason to book.
UI Logic
On the phone the five tiles become a list with icons, and the top bar keeps sign-up, login and search one tap away.
Impact
The Design on the Live Site
Results for Backpacker Deals
By March 2015 backpackerdeals.com was running our home page design, with the search hero, the five reasons to book and the popular deals.
Backpacker Deals
Result
By the Numbers
4 Page Types
Home, offers listing, Why Book With Us and bookings.
3 Screen Sizes
Desktop, tablet and phone layouts for each page.
6 Reasons to Book
Each with its own icon on the Why Book With Us page.
Process
Two Home Page Versions
From Rafting to Skydiving
Our first home page in October 2014 opened on a rafting photo, with the reasons to book as a row of small icons. The final version in November moved the reasons into five large colored tiles and opened on a skydive. You can see some of the results below.
Final Showcase
The Backpacker Deals Website
