Plumbing company website
DC Heating and Plumbing wanted their current website ‘sprucing up’ and made to work on mobile. For various reasons it wasn’t possible to work on the existing website so I built another one.
There wasn’t a demand for big changes so I copied the old website, making changes where they were needed. There were plenty, but it was a process of evolution not revolution. All the content is from the old website.
Changes made with 2 aims
- Make the website easier for visitors to use
- Promote the company’s services better
These aren’t unrelated. A website that is organised and easy to use reflects well on the company. Visitors are also more likely to see content that the company wants them to see.
Changing the design of the website to match these aims means the website is likely to look more ‘professional’. This is a vague description I use too much but, for this post, it will have to do. You know what I mean.
I reorganised both the structure of the entire website and the layout of individual pages:
- Removed unnecessary features
- Promoted more important content and information
- Grouped related items together
- Added context
- Repeated important info
I made some changes to the look of the website:
- Simplified the page layout
- Made the pages easier to read
If you’re interested, here’s a bit more detail on each of these points:
Removing unnecessary features
Everything on a website – text, photos, graphics – should have a reason for being there. It should be useful to visitors or be part of creating the right look for the website. There were a few things that weren’t doing this so I removed them.
Removing unnecessary features reduces ‘noise’ on the website, making it easier to focus visitors’ attention on things you want them to see. At best, visitors are going to ignore anything they don’t find relevant anyway.
Reorganising information
Information has different levels of importance for different visitors. It may also need to be revealed in a particular order (a visitor will want to know that a business can do the work they want doing before filling in a contact form, for example).
You could say website design is about organising and presenting information so that it satisfies the needs of different visitors and the business itself most effectively. I moved information around so that it better satisfied those needs (the ‘Our services’ list for example. See below).
Removing unnecessary pages
I removed a couple of pages – the contact page (with contact form) and the company’s services page (which was just a list of links to each of the services the company offers) – and placed the contents on the front page. This puts this important information directly in front of visitors to the front page.
Contact form
As I’ve placed contact information in the header and footer of every page there’s no need to ‘hide’ it on a separate page.
The contact form is on the front page as a ‘call to action’ (something you want website visitors to do). It’s there, ready to fill in – potential customers don’t have to decide to look for it. And they can see that it’s a simple, quick-to-fill form (I simplified the original form so now it only has 3 boxes).
‘Our services’
The company’s services are listed, as emphasised links, at the top of the front page. It’s important that visitors know what services are available as soon as they arrive at the front page.
Removing pages meant fewer links on the website’s navigation bar, making that more focused and tidier. It also means content doesn’t have to be ‘hidden’ behind a menu button (or ‘hamburger’ icon)1 when it appears on a phone, as it would if there were too many links to display neatly.
Customer reviews
The customer reviews page still exists but I’ve added 3 customer reviews to the front page (all the reviews can be seen on the reviews page). This puts more positive information in front of the visitor straight away, works as a taster for the reviews page and it might be enough in itself to persuade some visitors to contact the company.
Prioritising information
I moved the phone numbers, which were lurking in various places in the page text, to the header (and made them unmissable) and footer (header and footer are present on every page).
I also added the address, which is important for a company that mainly operates locally, to the header.
Grouping related items
It’s easier to find something if it’s grouped with similar items. I added a footer to every page which groups together all the business information (contact details, credit card info, small print).
The header is a group of the most important company information.
Adding context
I added captions to photos on content pages and descriptions to the ‘latest work’ photo galleries.
On the original website’s ‘latest work’ page, visitors were faced with a screen full of unexplained photos of plumbing and bathroom work. I suspect most visitors would have little idea what the photos were telling them.
Adding descriptions gives the company a great opportunity to explain and promote their work.2
Repeating important information
Phone numbers and address appear in the header and the footer (saves visitors the effort of scrolling back to the top of the page on mobile) and at the foot of the text on all ‘services’ pages. Phone numbers can now be dialled by clicking them.
The header and footer appear on every page (visitors might not arrive at the front page; they don’t have far to look for the phone number).
Simplifying, tidying page layout
The website is now, mostly, 1 column. The front page has 2 column and 3 column sections which become 1 column on mobile.
Photos are now always centred with empty space either side. This looks so much neater (given that the photos are different formats and sizes) than them being plonked in the middle of the text. The text is also easier to follow. Previously, the text moved around depending on the position of the photos.
Improving readability
New typeface, larger text, more space between lines, spaces between paragraphs, distinct headers to divide text blocks.
Black text on white on ‘services’ pages. I was tempted to go black on white everywhere, because I prefer it, but my client liked the existing colour scheme. I justify it on the ‘services’ pages because these contain larger blocks of text (and white on black is easier to read – see 3000 years of written documents) and it distinguishes these pages from the rest of the website.
Other design changes.
I toned down the backgrounds with shades of grey (probably could have gone a bit lighter on the header) and texture. Total black is a hard colour and is more suitable for the infinite void than a website.
I made the client reviews distinctive by displaying them (wherever they’re used) in a box of back text on white, in italics, with a large quotation mark next to them.
If your website wants a spruce up or you want some advice on how to spruce it up yourself get in touch.
- There’s some discussion about this on the webs. Opinion seems to be that it’s more helpful if visitors can see what pages are on a website without having to press a button.
- I suggested that each ‘case study’ should be a separate page with photos, descriptions and customer review all in one place. This tells a story that visitors can relate to and understand. It promotes the business directly and allows it to explain its work. It also means a search engine listing for each page. As each case study is likely to be quite specific or contain specific information it’s more likely to have less competition on search engines than more general pages. This means it will appear higher in the search list and will therefore bring more visitors to the website.