Branding & Web Design for Air Filtration Company

With the slogan “big enough to deliver, small enough to care” Southern Filters is a customer focused UK air filter manufacturer and distributor based in Dorset.

They came to us after after working with a PR company who recommended that their brand and website had become outdated and needed to be refreshed.

1) Branding

The first step was to refresh the tired brand (which was basically just a word mark – see the image below).

existing-branding

Southern Filters needed something more memorable, modern and colourful, so our first step was to explore some ideas on paper.

logo-branding-sketches

We experimented with a few initial ‘marks’ (the icon to accompany the wording) and typefaces, presenting some initial ideas to the client.

identify-designs-southern-filters2

Southern Filters picked option #2, but deliberated a little over the way in which the wording was set. In the example above we had the company name in lowercase and we had modified the typeface to make it unique, removing sections of the “e”‘s. They felt simplicity was best, so we opted for uppercase and went with the typeface as is.

Here’s the final logo.

final-southern-filters-logo2

2) Wireframes

After agreeing a sitemap and general structure with Southern Filters our next step was to begin producing wireframes for the key pages of the website.

The main objective of the site was to provide information on the company and its products in an intelligent, aesthetically pleasing way. To get users to pick up the phone and make contact with Southern Filters if they’re interested in the company’s services. We didn’t want visitors to get bogged down in potentially dull air filter related text and highly technical information. Pages needed to have impact, build intrigue and, above all, sell a company that is friendly, approachable, trustworthy and competent within their specialised field.

With the main conversion goal of wanting visitors to pick up the phone and give Southern Filters a call; we would try to strip each page back to the bare essentials. Safe in the knowledge that the company was hiring a professional photographer to create high quality images of their products we wanted to put forward a page layout that gave these photos a platform on which to be showcased.

Homepage wireframe

Here’s a quick look at the homepage layout we proposed:

homepage

Opting for an open, full-width layout; large image blocks would form the base of the site. A scrolling banner with a nice animation would showcase the company itself and it’s core values, followed by a section dedicated to featured products. Shown further down the page would be a small blurb about the company, a map showing it’s location (important for appealing to local businesses & clients) as well as testimonials to demonstrate trustworthiness.

Next we proposed an area dedicated to the company’s primary service offerings, and finally case studies; making best use of this form of blogging would not only help the company rank higher for specifically targeted key phrases in search engines like Google, but also provide new visitors new avenues to stumble across the website. Meaning those finding the website online wouldn’t necessarily land on the homepage, but perhaps instead a case study.

Again, with simplicity being the ultimate sophistication, we opted for a stripped back, minimal but functional footer area. Less is more!

Individual product page wireframe

One of the more challenging pages to get right would prove to be the individual product pages. This is one of the few areas of the site where we decided we would show greater in-depth technical information for those who wanted to either learn more, or had some existing knowledge of the products themselves & their needs as a potential customer.

product-indv

Whilst this page was not e-commerce in a traditional sense, and wasn’t intended to allow visitors to make purchases, calculate shipping etc, it was conceived with the objective of motivating visitors to once again pick up the phone, make first contact and simply enquire with an enquiry form that pops up on the page.

One important aspect of this page was the idea to hide and show various pieces of more technical information in an accordion like structure. This would allow the page to remain condensed and not scare visitors off when faced with vast amounts of text.

3) Design

After agreeing upon the wireframes the next step in the process was for us to start producing designs and to create a look and feel.

As is often the case, the logo we had created helped form the basis of, and directly inform, many of the visual elements on the website.

To avoid clashes, it had to inspire choices such as what typography to use for headings, which would in-turn influence paragraph fonts. The colour scheme of the website also needed to be in harmony with the company branding.

Homepage design

Here’s a quick look at the homepage design we presented:

home

One of the most instantly recognisable visual elements on the homepage is the imagery that overlaps the boundaries of each section in which it is contained. We felt that this (as well as having a much wider full screen layout for the website) would be something unique, stepping away from the more conventional, old fashioned narrow websites that many of Southern Filters competitors have.

Individual product page design

product-indv-sf-dorset

This was a crucial page to get right as it needed to show a range of technical information and make it easy to get in touch with Southern Filters. We achieved this by keeping the main focus on the product image at the top with a short description, and then having a clear call to action box in blue below this. As you move down the page you can then access the technical information about this particular product. The hierarchy of this page was critical to get right.

Mobile designs

As with every web design project we work on, we also wireframe and design how the key pages will adjust for mobile devices. This is crucial so we can ensure the best possible experience for users on mobile devices.

Here’s a quick look at how we saw the homepage going responsive on a mobile device.

home-mobile

4) Development

Southern Filters signed off on the design concepts quickly, and it was on to development.

The website was built on WordPress, as this platform provides all the necessary functionality to allow Southern Filters an extremely high level of control over ALL of the content on their site. This eliminates any ongoing costs as they can make changes themselves without involving us.

Content management examples

The screenshot below shows the homepage edit screen, where you can see the main banner images, text and link text all editable. We believe it’s vital to give clients the tools to successfully manage the website themselves.

sf-wordpress-1

Southern Filters even have the ability to add and edit all the testimonials as they appear throughout the website.

sf-wordpress-2

Perhaps most importantly they now have full control of the various details and features of each individual product as they appear throughout the website. This editing is also intelligent in the sense that editing a detail in one place will effect it’s various representations on all pages on which it appears.

You can see from the screenshot below that each product has clearly defined tabs to allow product details and technical information to be edited. It also allows Southern Filters to select associated testimonials for this product and select similar products that should display at the bottom of the page.

cms-editing-products

Parting thoughts…

This was a perfect project to work on as we were able to refresh Southern Filters’ brand as well as their website, and they put total faith and trust in us to deliver. Special thanks to Claire from Southern Filters who communicated the company’s thoughts and ideas clearly and promptly, helping us complete the project very quickly. Working together we were able to create a website and brand that we are both extremely happy with! View the website

Subscribe to our newsletter

Get access to all our guides and resources

We will never treat your email address badly. We’ll love and cherish it and treat it right.

Would you like to be notified each time we post new digital media?