Case study: Oliver Wardill Services

---

The process

Starting from scratch

I designed and built the first iteration of Oliver Wardill’s website in 2014. However, by now it had become outdated and Wardill’s business had expanded its suite of services. I suggested it would be quicker and simpler to redesign and build the website from scratch with this in mind, and we progressed from there.

My client also advised that his customers were cross-platform users that communicated with him using phones, laptops and (primarily) tablets. Therefore, I needed to ensure the redesign was fully responsive and optimized for each of these devices.

Domain research

My client did not have a preference for the website’s design so I had full freedom to come up with my own. I started out by researching what comparable business websites looked like, as well as the content they were using to self-advertise, and created a visual library to refer back to. This greatly inspired the structure and design of Wardill’s website as I wanted it to look familiar and professional for prospective clients seeking similar services online.

User flow

Once I had a general idea of what the website needed to look like and say, I then considered its structure:

How should the website be broken down into web pages? What would prospects seeking landscaping, plumbing or heating services need to see?

I found that comparable business websites featured the standard ‘About’ and ‘Contact’ pages, as well as detailed breakdowns of the services they offer. Some also featured blogs, project galleries, their qualifications and client reviews. I decided to incorporate all of the above, except a blog, since my client would be unable to administer one.

I then considered the customer journey – how a prospect goes from needing a tradesperson to booking their services. This would influence how I order the web pages, the content they feature, and how I use calls-to-action (CTA) throughout the site. As this is a fairly small project, I spoke to six colleagues and homeowners in Wardill’s target age group who had sought a landscaper, plumber or gas engineer in the past to get a general idea of the process:

I found that when a prospect is faced with a need (e.g. a smashed fence, burst pipe, etc.) they would first consult family and friends for recommendations (research). Then they would contact their preferred tradesperson for a quote or to arrange a site visit (enquiry and booking). If the prospect was new to an area and starting from scratch, they would look up local tradespeople online (research), see if they offer the service they are looking for (research), check reviews (research), then make contact for a quote or site visit (enquiry and booking).

These steps helped me identify and organise web pages to create the sitemap.

Sitemap

As the landing page for the website, I wanted the homepage to give online visitors a quick introduction to Oliver Wardill Services: What the business is all about, where it operates and how to contact the company.

I opted to incorporate the full user flow on this page by including a short Services, Gallery and Testimonials section with links to each respective page for further information, and a contact CTA at the end of the homepage to encourage engagement. I also organised the main navigation so the Services, Gallery, Testimonials, and About pages appear in that order to reflect the user flow. Social links would be assigned to the footer since my client was only semi-active on social media and did not regularly update his Facebook page.

Design

Colour scheme

My client wanted a blue colour scheme for his website, so before I started pencilling designs, I established a colour palette with blue as the accent colour. This palette evolved over time as my designs developed.

Wireframe

I designed the website from scratch in Figma to streamline my development process, and to create a model that would give the client a realistic idea of how their website could look and behave once live. I began with wireframes to establish how the web pages could be laid out and this acted as a skeleton for the final design.

Prototype

The homepage design was finalised with this prototype, but I did not recreate the other web pages since I am the sole designer/developer and the wireframes gave me enough visuals and styling information to work from.

To benefit older users, I ensured the minimum font-size was large (16px) and line-spacing ample (1.8) to increase readability. Buttons were large with adequate padding for better clickability on smaller screens, and would be easily identifiable by their colour, shape or when paired with specific icons. Text and visual elements were distinguishable by their contrasting colour, and the content was kept concise to give users enough information without overwhelming them.

I shared the prototype with my client and once given the green light, started work on the real thing.

Code

I have extensive experience with the WordPress CMS, so this formed the backend of the website and I used Local WP as my offline development tool. The design and structure of the website was created with HTML and CSS. Animations were coded in CSS and jQuery, and some functionality built-in with Javascript. The rest of the website was coded in PHP. I also colour-corrected 42 photos of Wardill’s work from the albums he provided to use for the website’s gallery and online presence.

The structure of the website on mobile devices evolved during the development process. I also relied upon feedback from friends, family and colleagues to ensure the website displayed and functioned correctly across different browsers and devices.

Problems and solutions

A key issue I faced during development was the contact form. On the old version of Wardill’s website I used a plugin to power the form. However, this time I wanted to add a Captcha to filter out spam, which was difficult, and sending an automated email to confirm form submission was not a feature. As a result, I opted to code the form from scratch so I could have full control of its functionality going forward.

Optimization and SEO

To ensure online visitors have a positive experience navigating owardillservices.co.uk, I streamlined the frontend and backend to boost its loading speeds. This involved adding caching functionality to the backend, amending code, merging scripts and stylesheets, and compressing files with minifying tools or batch image editing.

I also added Oliver Wardill Services, along with a link to the website, on Google and on recognised, no-cost tradesmen aggregators like Freeindex to affordably boost its SEO. Its open graph tags are set to make link previews more enticing when shared. Its web pages are interlinked to encourage visitors to navigate through the site and stay longer. And the website is accessible: All images have ALT descriptions, its colour scheme has high contrast and ARIA attributes are well-used throughout to ensure disabled or visually-impaired visitors can navigate the website with ease.

Epilogue

I have integrated Google Analytics and Google Search Console on the backend so I can monitor how online visitors are accessing and navigating the website. I hope to eventually use this data to tweak and enhance the website’s structure and content to boost its SEO and overall engagement.

Meanwhile, I encouraged Oliver Wardill to prompt his customers to post Google reviews of his business as often as possible. Until recently, he did not have reviews posted anywhere online and according to this report, 77% of consumers read reviews when researching local businesses, with Google being the most popular platform. Traceable, verifiable online reviews, in contrast to the written testimonials on his website, would boost Wardill’s online presence and give his website greater reach. And I have since integrated his Google reviews with the homepage so they cannot be missed.