Olympic Holidays

Making holiday bookings quicker, easier and less confusing

Image for Olympic Holidays

Streamlining holiday bookings

We've worked closely with Olympic Holidays for 10 years on a range of projects but recently undertook one of the biggest overhauls of the booking system the site has ever had.

The old booking system had become slow and the design and content cluttered so the time had come for a complete ground up design update and rebuild.

We made the recommendation early to park the old build of the website and instead of trying to painfully update several years worth of code.

Our initial research and experience with the codebase led us quickly to the decision that a full rebuild from scratch would yield the best results. It would also be quicker, cheaper and give us a more robust codebase to work on moving forward.

Project goals

There were many goals set out for the new booking engine, but our primary focus was

  1. Make dramatic improvements in performance to reduce the 22 second search time
  2. Create a new responsive HTML & CSS front-end to improve multi-device conversions
  3. Lay the groundwork for a full website design and build overhaul
  4. Improve the tools, testing and deployment process to reduce errors in code and releases
  5. Increase completed bookings conversion rate and drive up average booking values

In addition to the wide reaching changes required, the new booking engine needed to launch prior to an agreed date because at that point.

New 2016 holidays would not be available in the old system so any delay would lead to searches for 2016 holidays bringing back no results!

Designing a better booking system

Visually, the old website was tired, cluttered and often confusing - so many elements were trying to compete with each other nothing was easy to scan and use.

Our design process remains relatively simple as it has been tried and tested over many years. It's flexible and while it does change from project to project we find that the guiding principles are a good basis to work from

– Content auditing and Information Architecture

Nothing stays on a page "because it's always been there". It's all got to fight to belong.

– Sketching ideas on paper

It is quick, low commitment and cheap and a perfect way to outline where your content might display.

– Wireframing and mid-quality Photoshop visuals

Normally we prefer to avoid sending out lots of Photoshop visuals. It's easy to get caught up in the minutiae of colour shades or text sizes when the content layout is wrong but sometimes project stakeholders need to see a "snapshot".

– Testing and iteration

Piecing together prototypes and putting them in front of users quickly helps you build a map of what is needed on a page to help a successful search and booking. We tested our design iterations with small groups of people in person, over email and using Twitter and Facebook to poll results to specific questions about layout or content.

Project design snippets

Project design snippets
Creating a styleguide
Project design snippets
Project design snippets
Project design snippets
Project design snippets
Project design snippets
Project

ReactJS - Rocket powered search speeds

We focused on building the fastest feeling website we could.

The old site struggled from slow queries to the booking system which dictated what could be done by the user on the site, it really was in need of speed!

Atcore, the booking system provider had available to us a blazingly quick search system called Atcache which transformed what we could allow the user to do with the site.

Modifying searches on the fly, filtering, instant updates of availability and sorting are now all possible we just needed a templating language that would allow us to make the most of these new found query speeds.

We settled on Facebook’s ReactJS system for the templating. 

It was a joy to work with, very capable and had long lifespan due to the backing from Facebook.

Best of all it allowed us to make a very fast templating system to maximise the speed gains that the Atcache allowed to really give the site the feel of speed.

Interaction times between the new and old site are not perfect comparisons as the two under lying booking systems work so differently however some numbers speak volumes

Thanks to ReactJS, we've been able to slash search result load times from 22 seconds to mere milliseconds and add live, in-page filtering.

Launching a minimum viable product

The project will always be iterated and improved on based on testing and features becoming available so it was important to not have a big reveal where everything waited until it was all "finished".

It was vital to build the back end alongside the front but when not every feature is yet available from 3rd parties, it's difficult to integrate it all and your designs and product must allow for the unknown as best it can but also accept that you can't have it all up front!

MVP stage 1Early build - Search results have been expanded as more content and features have become available in the feed.

As more becomes available, we can iterate and build onto the framework we've developed making a more powerful and flexible search.

Results view iterationsIterated build with many more features and options available to users.

Agile project management at scale

For most projects, we tend to use a reasonably small scale Trello workflow but for a project of this size just the technical and design specifications needed a higher level of management.

We still use Trello though. Just scaled up!

As we take a Kanban approach to our projects, we set up one master board which broke down the the project into more manageable divs (Design, Development, Search, API integration etc) and in each column would be a vast selection of smaller jobs with story points allocated to them which enables us to use Scrum for Trello to control the flow of jobs.

Trello master board

Results

We've built an incredibly solid codebase that we continue to develop new features on top of along with completely overhauling the test and release process to reduce deployment errors.

On top of that, we've improved the load speed of the booking search and checkout pages by more than 20 seconds in some cases at the same time as making the booking engine fully responsive.

Further reading and resources

Featured Work

Olympic Holidays

Design, ReactJS, Development

Cutting Edge Knives

Design, eCommerce, Umbraco

Selby College

Design, Development, Umbraco

Nu-Way

Design, Development, Umbraco

Hillsong Church

Front End Development, Umbraco, eCommerce

This is Pete

Talk to us.

Have questions? We're happy to answer anything you throw at us from queries about basic functionality and design to complicated interactions. Our job is to come up with solutions to help your business. Pete is always ready to chat on +44 (0)1484 643 078 or if you prefer, send him a note instead.