Trenvo -Nomad Africa Tours Website

Nomad Africa Tours Website

Nomad Africa Tours has been one of Africa’s largest adventure tour operators for over 16 years. We set out to overhaul their website, and to turn it into their central content repository. On top of that, we would open up Nomad’s booking system for third parties to view availability and even make direct bookings.

Bookings meet eCommerce

Nomad sells tours to direct clients, as well as through a big network of travel agents world wide. Both groups are served by online availability and web bookings as much as the direct clients. Their reservation system allowed us full access to availability data through a specialized API, but had until then only been used by the people of Nomad, who have an intimate understanding of the complicated truck schedules and booking logic. Our challenge was to package this information and calculate availability for the ‘end products’ that an unwitting visitor could understand. Booking online needed to be as simple as purchasing through a ‘normal’ eCommerce website.

When we ourselves started to grasp the way Nomad’s tours are built up, we created a system that, invisible to the user, represented Nomad’s complex structures. This system would spit out the required data (like departure dates and availability) on demand.

We packaged the required data and linked them to tours that we created as products in WooCommerce. WooCommerce is our ecommerce back-end, that takes care of processing payments and provides an interface for managing orders.

Website Dashboard for Tour Company

The content challenge

For every tour they do, Nomad gives out tour dossiers that detail the itinerary and give information on the countries and highlights the tour goes through. The accuracy of this document is paramount. Before their new website, Nomad would recreate every single dossier when the smallest detail of a destination or itinerary day changed. For a single change, this could easily amount to changing 10-20 dossiers.

Since we had already abstracted the structure of Nomad’s tours, we could use our system to create a ‘generator’ for all Nomad’s content. Entering the content as separate modules would be a huge job the first time. But after this, maintenance becomes a breeze, saving the company valuable time.

We trained Nomad’s staff to create every highlight, location and itinerary day as individual post and to link them (using Scribu’s Posts2Posts) in such a way that the website could generate the correct itineraries and dossiers when needed.

Now, when Nomad has a change in a single location, they have to change that information in just a single

The content challenge
Tour Finder Website Design

Tour Finder

 

One of Nomad’s main requirements for the website was a quick way to search for tours, using sensible parametric search filters that would apply to direct clients as well as agents. With this, the Tour Finder was born. We broke down the tours into 11 searchable attributes, plus a free form search field that autocompletes both tour names and highlights. The Tour Finder is now by far the most used page on the website.

 

The Look and Feel

 

We contracted Created by Danielle, our affiliated design company, to design and help conceptualize the website’s user experience (UX). (see CbyD’s website for details on designing the website)

To graphically display Nomad’s tours, we created our own mapping library based on Leaflet. The site can generate a map with the route and highlights based on all posts that make up the tour. To ensure visual consistency, we created our own map for Nomad using MapBox‘s TileMill.

With Advanced Custom Fields we added a plethora of custom fields for every type of post (days, highlights, countries, tours, etc.). These pull through to the front end in their allocated spots in the design, ensuring consistency in the layout.

To create the actual page templates, we used Timber, our new favourite WordPress project out there. Timber completely abstracts the logic from the representational template files. Go to the website and check it out.

Performance

With all the above, the Nomad website became a heavy on the server. To prevent the website to become sluggish, we implemented clever caching techniques for every aspect of the content generation.

Because the Nomad website is high in traffic and has at least a handful of visitors online at any time, we could be royal about setting schedules for the cache to be invalidated and rebuilt. Every visitor helps the website release something from cache and refetch it from the database, while still getting the rest directly from the cache.

To prevent pages and tours that aren’t as frequently accessed to spike in page load time, we set up one of our own servers to periodically request them using a prototype of our upcoming CacheGlove service.

To speed up image-heavy pages, we force most of our images through an Imagick script that forces JPGs to be progressive and of exactly the size needed in the template. All our images are then cached on MaxCDN Entreprise.

On top of that, we (heavily) modified the excellent Hammy plugin to make sure images are only loaded when they are scrolled into view.

Responsive Challenges

We built our templates with Zurb Foundation, which made creating the layout mobile-first easy enough. The dashboard layout was born as the solution to the responsive challenge (see CbyD) and made sure big screens always get all information at a glance, as well as the visual satisfaction of Nomad’s spectacular imagery. Small screens get the image and most important information in a single scroll.

Because the website is so image rich, we got a huge performance gain by making sure that different screen sizes only load the image size they are actually displaying. For example, a mobile device now only loads a 480px wide header image, instead of the default 1600px desktop image!

Trenvo Responsive Websites
Responsive Website Reviews

Reviews

We opted to use Yotpo for tour reviews and testimonials. Yotpo is a review system is straight-forward to embeds in any eCommerce website and takes over much of the headache for you. Among other things, it sends out an email after a specified period after a period requesting a client review. Our catch was that we would have people booking their December tours in January, as well as people booking their last minute for only next week. So X days after purchase is not valid.

To overcome this, the website sends orders to Yotpo not when somebody makes a booking, but when (the system thinks) the client is due home. This is also a perfect occasion for Nomad to welcome their clients back home and build up customer loyalty.

Reception

We launched the website in stages, starting without any eCommerce functionalities – so without web bookings and online payments. We were only displaying availability. This was the first time Nomad’s internals would be so exposed, causing quite a stir in the company. When Nomad had checked all systems for accuracy and they were confident the system could take over, we enabled web bookings.

Now, every day bookings are being made and paid directly on the Nomad website, saving Nomad heaps of time.

 

 

Get a quote for your website today