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.
There were many goals set out for the new booking engine, but our primary focus was
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!
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.
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.
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!
As more becomes available, we can iterate and build onto the framework we've developed making a more powerful and flexible search.
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 sections (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.
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.