Countrywide (PLC) is a leading supplier of products and services to the rural community. In 2013, Ford Fuel Oils acquired their oil business.

The Problem

Once Ford Fuel Oils had acquired Countrywide’s oil business, they needed a product marketing website that would enable customers to pay their bills, get instant quotes and learn more about the products and services that Countrywide offered.

Anchored to the above, we needed to pay special attention to the website’s performance. Sometimes you can run faster than the internet connections in rural UK.

Solution Design

To help customers make sense of the various products on offer, we decided to break the website into three key areas:

Screenshot of the Countrywide website header

  1. Heating your home — for domestic products
  2. Agriculture — for farm products
  3. Commercial — for business products

A Responsive Layout

A growing number of Countrywide’s customers were reaching the website with their smart phones and tablets.

We designed a fully responsive interface that was optimised for the device connecting to it.

Screenshot of the Countrywide website on mobile devices

To help customers (broad demographics!) navigate easily, we developed a sign-post pattern that offered-up large, tappable areas for users to move around the website.

Screenshot of the Countrywide website on desktop devices

Screenshot of the Countrywide website on desktop devices

Doubling-down on Performance

Since the majority of Countrywide’s customers lived in rural areas with slow internet connections, we spent a lot of time and energy developing ways to minimise the payload and optimise the website’s performance.

We decided to do three key things:

  1. Use Google’s Page Speed module to assess the customers’ connection speed, serving-up optimised images based on that result. Faster connections = better quality; slower connections = lower quality images.
  2. In tandem with the above, we used RESS, Responsive Design + Server Side Components to send specific templates to specific devices. For example, our header design for smaller devices (such as mobile phones) was different to how we laid out on larger devices (such as desktops). So instead of sending the same templates to both, we used RESS to send only the relevant template. Sketch of the RESS workflow
  3. Lastly, we used the popular Lazy Loader plugin which defers the initialisation of images until they are needed. Most importantly though, users on slow connections would have the (essential) page content loaded almost instantly, while (complementary) imagery is downloaded subsequently. More about how we made this work responsively here.


UPDATE: As of January, 2015 has now been moved over to — Ford Fuel Oils — the parent company’s website.

  • The website performed extremely well on slow connections.
  • In just 18months the website accounted for ~30% of new business, while a staggering 42% of customers switched to paying their bills online.
  • The workshops and training helped 4 employees of the firm get a good handle on the content management system we implemented. This resulted in current content, consistent news updates and better communication with customers.