Fairfield House: Transforming Top Windemere B&B's Online Presence

Fairfield House and Their Previous Website

Fairfield House is a charming B&B based in Bowness-on-Windermere, sitting only 5 minutes from Bowness Pier, the busiest pier on the Lake District’s largest lake. It’s fantastically positioned, has a charming garden and terrace for guests to use freely, and serves a cracking breakfast - the Fairfield consistently ranks in the top 10 B&Bs in Bowness based on TripAdvisor reviews - if not first.

Why Was a New Website Necessary?

Despite this glowing reputation, Fairfield House’s website wasn’t all that up to scratch (that is before we got a hold of it). A majority of the Fairfield's bookings came from 3rd party booking sites, as is the norm with B&Bs and Hotels, which is due to the fact that sites such as Booking.com have fantastic online visibility, and very easy to navigate websites letting users quickly make decisions and compare between different locations.

This issue is not easily solved, but more importantly, it’s not actually even the issue that the owner wanted solved with this website refurbishment. I mention this issue because its difficulty in solving is diminished by adhering to simple steps in website development, despite the gains from its solution being significant. We’ll come back to this.

In reality, the purpose of this website refurbishment was simply to update the visuals, and provide a more comprehensive snapshot of what the Fairfield has to offer as a B&B, and consolidate the rather dated, messy branding the previous developers had created.

As can be seen from the above, the previous website was rather bland, and not particularly intuitive when it comes to cohesive branding, and ease of readability. There were several issues we found with this site.

For example - the previous, by no means small-company felt the need to include gaudy TripAdvisor and Facebook embeds (of which Facebook’s was not even functional) directly adjacent to each other is a mystery.

Their use of annoying, site-wide Recaptcha widgets and Cookie settings links on every single page, despite the Cookie settings seemingly not functioning, and ReCapthcha largely breaking European GDPR, with no ways to opt out, is equally perplexing, and likely illegal.

The three separate shades of blue for navbars, footers, and main content blocks adds further to the confusion, but alas, complaining about the previous website is out of the scope of this piece, for it no longer exists! Regardless, previous holistic evidence of the site’s poor performance can be seen below.

To highlight what is unique about our business model briefly, we would like to outline that the low quality stats above are a direct cause of the business practices we specifically avoid. The previous site was a WordPress site which was badly designed. This causes the subpar performance for mobile. Additionally, the owner noted that bad English was prevalent throughout the site upon its initial delivery, which is a clear sign of cheap outsourcing. We never outsource our quotes. See our core development pillars here.

We may be biassed in our complaints of the previous site, but the scores above are an objective, bias-free representation of the poor performance of said site using our SiteSpeed Ranker and Evaluator, which is powered by Google. And you're not likely to be ranking well on Google if they’re saying your site is bad! Improvement of these scores are essential in stopping customers from bouncing, increasing engagement, and ensuring your website is accessible as possible. We have great experience in maxing out these scores.

In short, the previous website was slow, dated, disorganised, in some places broken, and in more places, a bit flagrantly in breach of the law. So in our opinion, it was high time for a refurbishment.

How Can We Improve The Site?

Most hospitality-based companies underinvest in their websites or entirely forgo one, relying on booking services entirely to grant them publicity - while cheap in development costs (there are none), in the long-term this provides a very lucrative cash cow to these booking sites, that take a significant portion of hotel’s income for simply having good quality pictures of them online, and ranking first on Google.

This is a major issue, because, surprisingly, almost half of consumers prefer to book hotels through their own websites, instead of using comparison sites. So really, hotels and B&Bs that either don’t have a website, or have a website who’s poor performance routinely turns users away, are losing out on a lot of money for no good reason at all.

Alongside ranking high on Google, and having user-submitted pretty pictures of popular B&Bs, big websites also present all of the information they know that their customers need on their potential holiday accommodation as quickly as possible. By taking a few pages out of these big website’s books, we can demonstrate how smaller companies can reclaim some of that lost revenue by using their own websites to book people in, reducing the proportion of booking which are levy to the high fees that these large hotel comparison sites charge.

While dethroning the big bosses of booking from their search-term throne is not practically possible - not for a search term like “best BnBs in Windermere” - there are certainly ways in which websites can be optimised to be competitive against the incumbent comparison sites; this will have an even greater effect against competing independent BnBs in the online space.

The first step is getting noticed - potential customers won’t arrive on your site if they’ve never heard about you. Websites can be optimised so that Google places you higher to solve this issue.

The second step is keeping users engaged - make websites that load fast, don’t overload the user with annoying popups, don’t make ugly websites, and don’t frustrate the user with unintuitive site structure - all these rules were violated by the previous site.

The third step is ensuring the content the user both wants, and needs to see, is made visible. Carefully considering what information, and when to show it, is essential to not only keeping the user interested, but also slowly but surely educating them fully on your business proposition. If you provide a good proposition, then you’ll stay a solid contender. Your website is an automated salesman, and given the cost of developing and hosting a website, it’s usually a cheap one at that.

What Did We Do?

We won’t bore you with every single thing we did to this website - this writeup will be long enough already. However, if you are considering our services, we do want you to have a good idea of the expertise we employ - so we’ll let you in on some of the more interesting explanations of how simple changes, and following on from hospitality industry leaders, can help overhaul your website in ways more intuitively than you might have first though.

Spacing and Digestibility

For hospitality websites, branding is incredibly important. Other than load speed, it’s one of the first things that potential customers consciously process, and their opinion of your branding helps inform all other decisions they make about your company. Different brands work better for different consumers. As developers, it’s usually not our choice to change the brand of a company, neither is it typically in our interest. But the methodology in presenting the brand is important for all consumers, regardless of their preferences, and it is in this area most of our branding work lies.

There are various rules in design that indicate good and bad interfaces, and the previous website broke many of them. Inconsistent sizing and spacing in text is one example: you might have skimmed over this article whilst reading it - imagine how much more difficult that would have been without our consistently sized headers.

Text size demonstrates an order of importance for different sections of content, guiding users where to look. If the guidance is wrong, the website will confuse users, often leading them to leave before they’ve found the information they wanted - or the information you wanted them to have.

The importance of text sizing is coupled with spacing - the amount of space around text, images and other content denotes its status, and gives the user's eyes room to read. This was a big problem with the previous website, with greatly inconsistent spacing, leading the focus on the website to jump around pages, instead of smoothly following the flow of the content.

An example of this can be seen above, where the “Get in Touch” call to action, vertically flanked by the navbar and footer, can be directly compared between the before and after. Where odd spacing in the websites navbar and footer previously existed, there is now a consistent document flow, with appropriate padding, text sizing, and revised content organisation all assisting in users quickly finding the content they need.

Small, But Effective Branding Changes

Back to our original point of branding. Although we previously mentioned that we usually cannot change the actual branding of a website itself, as we don’t want to change the vision of the owner for their company, this website was an exception. Given its previously drab, monochromatic colour scheme, and the owner’s brief stating that the website felt a bit generic, we decided to consolidate, adjust, and redesign the branding of the site to better reflect the BnB, giving it a modern and refined presentation.

This involved the removal of so called “default colours”, and the introduction of a secondary colour to provide contrast between areas of the site, making long content more digestible, and allowing for a greater sense of importance for content that needs attention drawn to it - for example, in the comparison above, despite how small the image is, your eyes will immediately be drawn to the 2 “Book Now” buttons. That’s exactly what you want as a hospitality website.

Showing What Users Need - Fast

One of the most important areas of website design is telling visitors information, fast. The awesome thing about this is that typically what you need them to know, is what they want to know. Imagine you were having a conversation with your potential customers - if they want to know if your hotel has free parking, you wouldn’t start telling them about the breakfast.

In a conversation, you have the advantage of knowing what they’re asking you, which is probably the reason you’d answer “yes, we have free and private parking round the back” rather than “did you know we also offer complementary tea refills”? With a website you don’t have this advantage. As such, you must guess what your customers want to know about first, and provide this information as soon as possible, in a manner which is accessible.

Studies show that B&B customers often value location as the most important factor in booking a B&B. In addition, as expected, the quality of food, service, and furnishings are runners up, but what motivates customers greatly in deciding on a B&B is simply if it looks like a place they’d like to go - it seems obvious, but the conclusion of this is that it’s incredibly important to shower your potential customers with visual content of your offering.

The fruits of this research can be seen throughout the big booking websites design - booking.com and TripAdvisor plaster their websites with sleek and comprehensive images. Although we already had a solid idea before this research about what we wanted the new online presence for Fairfield to look like, we let this research guide us heavily in organising our content, in a similar way to how the major industry players have organised theirs. Below are some direct comparisons between the old and new website.

The main improvement shown in this comparison is the change in approach of presenting images to the user. The old website used a “slit” image, taking up a full width, but not full height portion of the screen, to show the B&B. Taking a different approach, we decided to go the whole hog, and bathe the entire screen in a flush image showing off both the historical Georgian architecture of the building, paired with the Fairfield’s fantastic garden.

How the image is presented is important also - for some unfathomable reason, the website developers themselves have decided to put a grey filter over the image - we know this because we can examine the source image using specialised web tools. You can view the original image below - the brightness does make it a bit difficult to work with web-wise, but greying it out instead of using a different image is like carrying coals to Newcastle.

We decided to instead darken the top and bottom of the image, allowing the navbar and promotional content below to be contrasted against the image, while the bright centre of the image allows the B&B itself to shine. The original website (which can be viewed in full here) did not have much more content on this page, whereas we pivot straight to the positive attributes of the B&B.

Employing our previously mentioned research, we display the incredibly convenient and idyllic location of the B&B demonstrating in verifiable terms how short of a walk it is to Englands biggest lake, followed by a snapshot of the quality of the Fairfield’s furnishings, and then, off-page, a preview of the fantastic breakfast offered every morning. Each section possesses a relevant button, allowing users to intuitively explore the sections they wish to.

The most stark differences in terms of redesign on the website can be found in the “Rooms” page - as previously mentioned, sites like Booking.com provide standardised interfaces to best inform users on features and amenities each B&B possesses. We integrated our own colour coded and concise tag system to allow users to quickly absorb information about each room, and choose which option was best for them. This is an area the previous site fell well short in.

Whilst the previous website used massive amounts of space for each room, necessitating long scrolling to absorb information, and even more scrolling and memory-use to compare rooms against each other, we have minimised space wastage with our implementation. Rooms each take up far less space, with vastly reduced whitespace. They are comfortably positioned inside of their own boxes, taking up a smaller, more visually manageable section of the page. Whilst maintaining the original room descriptions, we have also added key feature highlights for each room, allowing the website to quickly and effectively convey all the important information a user would need to know.

We’ve only covered 3 major design changes here, but as you can imagine, we could talk for hours on this subject. The real star of the show for these changes is how we have adjust the objective scores this site achieves on our in-house SiteSpeed Ranking checker.