The Website Redesign of HakaTours.com

It is with absolute joy that I point you in the direction of the brand new version of hakatours.com, released finally at the end of last month. The revealing of the website was highly anticipated by all of us involved (three major earthquakes had provided extensive set backs) and there are still a few small bugs being fixed, but I can say regardless that I am incredibly proud of the final product.

I cannot write this post before mentioning the true geniuses, the guys who were behind the revamp – Left Click. I would recommend this design company to anyone wanting a great website (and a decent cup of coffee during meetings). Amongst other things, they showed a great focus on user experience and first class design – both which I believe to be essential to any website’s success. So a great deal of what I will talk about below is their work.

When we sat down last year, we decided that the main objectives of the new site were to abolish the ridiculously difficult Zen Cart management system, create a personalised booking system exclusively for the company, provide excellent usability, and altogether bring the brand into the correct decade. Thus, of course, leading to increased conversion rate, great SEO, and better ROI.

Anyway I just want to quickly summarise some of the key features of the redesign.

haka tours site searchExclusive Booking System

The booking engine for HakaTours.com was probably the most ambitious portion of the project. After all, the business model for the company means that isn’t just a simple case of adding a tour to a basket and paying for it. There are 7 adventure tours, 2 snow tours and 7 rugby tours. Each tour has numerous optional add-ons in the form of activities, plus upgrades, extra accommodation and particular activity packs. The system had to successfully know which add-ons are permitted with which tours, locations and dates. It needed to find out which participant wanted to skydive and whether they would like to jump from 12,000ft or 15,000ft. Would the customer like to pay it all off now, or in chunks? Add-ons could still be chosen up until 1 month before departure… and it goes on.

adventure tours designUser Experience

From research we knew that tour members on average would visit the site around 10 times before booking – choosing an adventure tour is obviously not an decision people take lightly. So it is even more important that all the information they need is easily found. Key pages include further information on the right hand side in the form of “Fast Facts”, Crew Featurette and reviews panels – hopefully reducing the need to head for the FAQs page.

Tour pages themselves are designed with tabs to break up information without leaving or reloading the page. Itineraries automatically swap around when a different departure location is chosen. Activities and image galleries pop up as lightboxes rather than annoying new windows. Altogether the site is a pleasanter navigation experience!

Share Design for Haka SiteSocial Media

Social media is a big thing to Haka Tours and so unsurprisingly there is some integrated into the site. Embedded YouTube videos can be found on a number of pages. The footer itself has share buttons for Facebook and Twitter, above four links to the company’s Twitter, Facebook, Skype and YouTube accounts. There are also due to be Facebook “Like” buttons positioned around the tour pages themselves, in addition to links to an independent review site where Haka features incredibly well.

CMS and Framework

I am biased as I personally hated our previous site’s Zen Cart system – but the new site’s CMS is ridiculously easy to use in comparison. Left Click chose to build upon Ruby on Rails, an increasingly popular web framework originally extracted from the Basecamp Project Management system. A great many developers like to debate the differences between using Rails instead of PHP and other programming languages (although it is important to note Rails is a framework using Ruby which is the language). However I am not going to approach this debate as I am far from knowledgeable enough at this time.

The site already uses HTML5 and CSS3 coding.

Design for Haka ToursBranding

The tour operator’s brand has evolved over the last 4 years – drawing on a lot of black which no other similar business had done before (ironic given many NZ sports teams colours). As black is quite an extreme colour on the web (someone suggested connotations of adult websites if I recall correctly!), a dark brown dominates the header and footer of the new site.

Speaking of the header and footer, check out the cool figures in the background – surfing, snowboarding and bungy jumping!

Haka’s kiwi mascot / logo has of course been kept but remains aloof – we weren’t keen to go down the route of making him into some cheesy character with a name and personality. But he does pop up a lot amongst the various panels and title images.

On the other hand, the images used have become a lot more personal. Whilst working for Haka Tours I was a great believer of abolishing as many generic photographs as possible, and replacing them with ones that our guides and tour members had taken themselves. This happened with our brochure and now with the website. It helps endorse the belief that you are in fact a legitimate company with real people!

Lastly, the typography is kept simple with two contrasting fonts – our signature Shortcut and Helvetica Neue. Of course any main headings are kept as text and not images (SEO and all that).

Leave a Reply

Your email address will not be published. Required fields are marked *