UX and UI design for a leading London plumbers

Project Overview

LTP plumbing are a leading London trades service, with over 20 full-time employees covering the West side of the capital. They wanted me to design a responsive, intuitive website to represent their business.

The Discovery Phase

As we had limited time and resources during the initial research phase, I focussed on utilising data that was already available to inform my design decisions. Fortunately their previous site had Google analytics linked to it, and the visitor data was invaluable for the redesign. In particular we realised that certain service pages were searched for and visited frequently, and we ensured these services were prominently displayed on the home page.

We also realised that visitors often just wanted a quote, or contact information - but on the old design they had to visit a separate contact page to email or find a number. Therefore the hero area of the home page was dedicated as a form area where visitors could quickly request a call back and communicate their needs. The main navigation was also designed to ensure users could quickly contact the firm.

Some of the notes from our first interview sessions, as we began to break insights down into
key categories.

Conceptual Design

Throughout the project I worked closely with the client to ensure we designed the site they needed. Before any design began we created a basic sitemap showing what pages we would need for the site. Each page on the map was then turned into a wireframe, where we laid out the information architecture for the key pages and mapped out the core structure of the site. You can see the sitemap and one of the wireframes below.

A basic sitemap I worked through with the client before we began to design wireframes and mockups
After the discovery phase, I fed the findings into a set of basic wireframes. Here I designed the information architecture of the site, and pages ensuring that the most important information was prominently displayed.

Detailed Design

The final mockups were created in Sketch. Each page was turned into a hi-fi mockup ready for handover to a front end developer to create a bespoke wordpress theme.

During the final detailed design stage I focussed on creating a bold, responsive design that would look clear and legible irrespective of the device being used. I created a bold colour palette for the site that was in-line with the company's brand and identity. Even though the site structure was relatively simple, I wanted to ensure the site was easy to use and navigate. Important information was emphasised through bold typography, rich imagery and clear navigation.

Some of the final mockups - the site use a simple, minimalistic style and simple, bold colour palette.

The Results

The client was really happy with the deliverables, and is currently waiting for development to finish. The site should be live by the end of May, and we plan on some follow up usability testing with the live site as soon as possible.

Copyright Sam Fortune 2018