Branding & E-commerce Web Design for Filters Direct

Filters Direct approached us to revamp their branding and to also replatform them from Wix to a custom Woocommerce website, allowing them to take their online sales to the next level.

Web Design For Air Filter Company
Branding
Bespoke Design
Wordpress Development
Maintenance & SEO

Overview

Branding & E-commerce replatforming from Wix to Woocommerce

Filters Direct had initially set up their own e-commerce website on the Wix platform to kick-start their business. Whilst this had worked well initially, the air filtration business was now in need of a solution that wouldn’t hold them back by offering more in the way of functionality and by also allowing the ability for a completely custom look and feel.

Filters Direct also saw this as the perfect time to modernise their branding to give them a distinctive visual style that sets them apart from their competitors in the air filtration space.

Branding

Establishing how Filters Direct should present itself as a brand was the first step. In order to set their brand apart from others in their industry, we chose a unique, impactful, yet calm colour palette, which the client quickly jumped on board with. We coupled this will a simplistic icon representing three air filters stacked on top of one another, with a modern typeface for the company name and web address.

Design

With the new branding finalised it was time to move onto the website design. After a detailed planning stage producing wireframe layouts for the main pages of the new e-commerce website, we produced the following design concept for the new homepage of Filters Direct’s e-commerce website.

The shop was the main consideration for this project, so we started by producing a design for the category archive pages. These would display the products that live within each of the main shop categories.

Next we looked at the product pages themselves. With some key areas of new functionality (like ‘estimated shipping lead times’ and ‘buy more and save’ options) it was important to get clear on how these new additions would be presented on the product pages.

Optimising product pages for Google (SEO) is a key consideration for any e-commerce project, so we made sure to include a tabbed area towards the bottom of the page that could include detailed descriptive information about the product in question, delivery information and also an overview of Filters Direct as a company. Having these text areas would give us lots of freedom moving forward, allowing us to optimise every one of Filters Direct’s products to help them rank highly on Google.

Designing the basket page came next. Whilst primarily a functional page, it was still important to mock this page up to ensure all the required information about lead times, discounted prices and shipping would be displayed to the customer in an easy to read way. We also opted to keep the icon bar showing the reasons to trust/use Filters Direct on the basket to help people feel confident proceeding with their purchase.

Finally (for the e-commerce aspect of the project), the Checkout page was next to design. We felt keeping the icon bar showing the reasons to trust/use Filters Direct along the top of the page was important and we opted to display the checkout field itself in one single column as we’ve found with other e-commerce projects this helps limit distraction and ultimately leads to more sales.

With the e-commerce aspects covered we proceeded to mock up the new blog area. This would become crucial for Filters Direct’s SEO efforts, allowing us to easily create and post new content.

The individual blog post template was next to design and formed a crucial part of our SEO strategy for Filters Direct.

As well as being able to easily create and format well optimised blog posts we also included the ability for Filters Direct to feature ‘related products’ within blog posts, with the goal of helping channel traffic into the shop area of the website.

To complete the designs we produced a look and feel for a “content page”. Simply put, a page that would house any type of content Filters Direct required now or in the future.

Mobile Responsive

As with all our web projects, the way the site adjusted when viewed on mobile devices was considered right from the outset to ensure the best user experience. Here’s a quick look at how various parts of the e-commerce website adjust when viewed on smaller devices.

WooCommerce Development

Once the designs were agreed upon by Filters Direct we then proceeded to build out the website on WordPress, using WooCommerce for the shop aspects.

Custom coding the website allowed us to optimise the website for speed, security and also ensure that it would be built on a great foundation for high organic Google rankings.

Testimonial

“Incredibly happy with the work authenticstyle has carried out and always a pleasure to deal with.”

James Sherlock
Managing Director