Let me start by saying, the end result has been a huge success!
Developing a website that manages bookings for holidays is not as easy as it first seems.
There are plenty of plugins on the market already, but finding one to do exactly what you want, give the design flexibility to its front end interface and be user friendly was always going to be a big ask.
Developing a front end to the site that could deliver large amounts of content, some of which was crucial technical info was another big issue considering we were not given full content at the outset, then add to that the need to have super hi impact photography – and lot’s of it.
All in all this was a very very time consuming project, that had many ups and downs, but from adversity came triumph.
Taking the call
In the beginning was a spark, well more a cataclysmic bang. The previous developer was looking to move the site over to someone else to look after, but add to that the fact the website was over 10 years old and the Joomla framework was a long way out of date.
It really was time to make this site come alive and it had to happen before the old site totally died on the client and closed down his means of advertising and bookings.
A Brief is just brief or is it?
When we work through a brief, it is post to an exploratory conversation. That’s where we all sit down and chat about the overall idea, the clients wishes and dreams. We’re getting a feel for the client, the job and what we may need to put forwards to produce a successful outcome.
An exploration can be quite a substantial piece of work depending on the complexity of the project but inversely it can be a very simple task. That said, it is absolutely crucial that we understand the full story and this must come before we start to consider a solution.
Fortunately for me, I am a lifelong windsurfer, so understanding the concept of the Windwise project was very easy. To display exceptional imagery to show off the lifestyle brand to its finest, whilst making a site that the client could manage.
Let’s get some details written down
Having sat down and understood the dreams of the client, it was time to formalise those ideas and thoughts.
This part of the project is more detailed and the aim is to gather the general processes from a viewer landing on a page to making a purchase or reading a blog. It’s a rough cut understanding which I would build on during the proposal preparation.
Preparing the first phase proposal then adapting
It’s nice to think that you create a proposal and that’s it, but this is rarely the case. Certainly, with this project, the initial proposed ideas and even down to the designs, soon faded as new ideas regularly came about and developed. This had never happened before, so seeing the project workload increase is always a worry and you need to be realistic in what you’re offering, you’ve charged, your own value and the expectations.
Based on this it was clear the job needed to be adjusted and this became an ongoing thing which would allow for adjusting budgets and timelines.
It’s not often you get this for smaller sites and is more seen on much larger projects using Agile project management methods, which will see fast iterations of ideas being tested then killed off and evolved.
Just remember to love your developer – he develops the site or system and has to keep thinking ahead, to try and pre-empt what you may look to build in later. In this instance I built a clever little framework, that allowed me to create much faster changes that were global to many elements.
Designs and layouts
A good friend of mine produced the skeletal frameworks, and created the colour scheme on brand, font choices and general feel of a few of the pages.
On first glance you feel elated that you have something solid to work from, but with all complex page layouts, it is rarely simple.
Hero areas
Simple on the outlook, but highly complicated in practice.
Firstly we needed to agree on heights. This became quite complicated as the client would compare the site to others, so in the end I created some variable value and different height options that could be turn on and off depending on where the hero layout was e.g on what page / section.
We then had to wade through a few changing font options and as you can see the middle line is different to line 1 and line 2, but with hawk eyes it was noticed that each line therefore had different leading/line heights, so once again I had to make centralised controls for hero fonts, so IF the fontface changed again, it would be easy across the whole site to apply one change.
And then you have lazy loading issues pertaining to images in the upper fold of your page and as we know, WordPress tries to force lazy load up on you, even when it has a negative effect.
Image quality
As many of you know by now, page load is important in keeping a viewer interested. If something takes forever to load, you’ve got a chance of losing a customer.
With this site, the image quality was of paramount important as I ended up doing an untold number of tests using different images sizes for full width, half width, quality etc options/ Whilst I really wanted to simply use webp, it turned out that the clients Lightroom wouldn’t export webp and he was not willing to use any other conversion software, so I needed to make the best of the tools we had and optimise where possible.
Icons play a big part
As with all UX, icons play a major part and need to be clear, concise and on brand. The icons for this site were produced, then converted to SVG files, so they can easily be scaled on the pages without distortion and absolutely minimal page load impact.
The other thing to note is the use of simple icons on areas such as the bulleted lists. We took a part of the logo i.e the circle and used that to simulate a bullet point, once again keeping on brand.
Staying on brand is so important and needs be be flowing throughout the site and then into the social channels, literature and print media. It becomes an identifiable element that leaves an imprint in the mind of the consumer, which is worth its weight in gold when it comes to referrals, repurchasing etc.
A custom booking plugin for exact features and improved performance
Finding a booking plugin that would allow the flexibility of an exact feature set, the ability to customise the layout and be adaptable was proving really hard, so I decided to build a plugin based on the woocommerce framework. It allowed me to consider the seo of the holiday pages, the options to pay deposits, receive balance payment requests and much more.
Using a page builder and then some proper tweaks
Page builders have been an amazing invention for web design, but they can be problematic for lesser experienced web developers who just go with the flow and don’t think about streamlining the built in features and developing an easier to use admin area for the person who is left editing the site content.
When I develop on these systems I try and build a basic framework first using classes and simple block controls that can be easily added to elements on the page.
This way of working allow me to make major changes to the entire site in just one place and I’m not so reliant on features of the page builder that may become deprecated or change later on.
It’s funny, as much as you try the client always finds something that isn’t logical and that occurred on this job. It’s such a simple thing and took very little time to edit, but for the customer it was a major plus to their workflow.
Can you design a page without content?
The image above shows one of the tabs within a holiday page. Producing these pages required content or at least an understanding of what content was going to be forthcoming.
With so much content and important info, it was absolutely critical to get things in the right order so the user goes on a journey reading it.
Even things like font sizes, heading sizes/weights etc had to be edited as more content was offered up and began changing.
What I have created is a user journey that leads the reader down the page, through the tabs and finally onto the booking area.
Detailing flight info
This is just one small part of the overall pages for a single holiday, but I had to map it out into a readable format that worked on desktops and mobile, retaining the logical order of content. Check it out on your phone Canaries Tenerife – Windwise Windsurfing Holidays and Clinics
A big part of this job was handling the large amounts of written content and structuring it, so it made sense to a reader and got the message across. Have a read of our article about Content Hierarchy and Structuring.
Making structures that can be used in many places
Everything I made is controlled by my own css and not by elementor, aside of colours and a few font styles.
Structural elements like the divider titles that break up pages, the margins and spacing within boxes or how overlaying text lines up is all managed by my own code and one small change would allow me to create site wide changes.
You can see on the blog sample below how the elements are used and constant. What this does is make it easy for a reader to learn the site structure, but also makes it easier for the site admin to manage content.
Iterations at speed
Even though we had basic page designs, the structure changed massively as did the inner page structures, once content became forthcoming.
Having built the site and structures with this in I was able to make fast changes that filtered site wide, so this made life easier.
If I had gone the route of simply using the built in elementor features, I would have spent a lot longer making changes or adjustments.
SERPS
It’s always tricky when playing with budgets and hoping you can pour everything into a job but all resources end up in parts of the job and other areas have to be thinned out.
This was not so much the case here, but I did have to lose some parts of the job and focus efforts in things like SEO.
With a structured use of Headings and Meta data, I gave advice on the content, but ultimately the client produced it themselves, with input from me to address certain areas that google would not like or have any added value.
In time, the Blogs/News area will populate and with the natural reading style, it will show itself as an authority in what is a fairly niche market.
Unfortunately, due to the technical reasons on the previous site, there was a length of time when no site was present and there was no way to pull out the old content, so a great deal of info has been lost. A fresh start is an understatement.
Sign up for a Consultation
To Summarise
The job was a tough one with so much going on and backing up, but the end result has really shone through.
I’ve been making adjustments since launch and minor improvements, whilst supporting the site owner so they learn to maintain the quality of the pages and keep it looking great.
Next step is SEO and an ongoing strategy to develop the pages within the SERPs.
p.s if any developer or design agency tells you everything always run smoothly and its all wonderful then I call BS… It’s not how perfect the journey is, but the end result IMO.
