How We Built PAINTMYPROPERTY.COM In 10 Steps
Posted May 26th, 2008
Our Web Design Process
We get quite a few emails asking about our web design process. This article describes our process and uses a real example of a project we have just completed for our client PAINTMYPROPERTY.COM.
PaintMyProperty are a family run business in Hertfordshire, they complete all types of building work and specialise in restoration and protection of exterior walls.
Step One: Client Worksheet
The first step in our process is to get the client to complete our Project Worksheet. It’s a small document with some initial questions about their company, their current website (if they have one) and what they are looking for in their new website. We learn a lot from this document and it gives the client the chance to define their vision for the project.
Step Two: Current Website Analysis
If the client has a current website we will visit and complete a Website Analysis Report where we note what we like about the current site and what we believe needs improving. PMP did have an existing site; some of the comments we made were;
“The first thing I noticed was that it’s not immediately obvious what your company actually does”
“The ‘ring now for a free quote’ box does not stand out enough. It needs to be highlighted to make it more prominent as I assume the main purpose of the site is to get users to call for a quote.”
“The before and after examples are very poorly presented. They are a vital tool in selling your service.”
Step Three: Client Discussions
Once completed we compare with what the client had to say about their existing site. We will then discuss both sets of results with the client, sometimes face to face, on this occasion over the phone as we are 300 miles apart!
Following those discussion we email the client a project specification document which explains what the project will include, how much it will cost and approximate time milestones. We also send an invoice for 50% of the cost of the project.
Step Four: Planning (Use paper!)
We begin planning every website on paper. The first task is to gather all of the content from the client and group it into relevant sections. One of the main problems with the previous PMP site was poor page names and badly organised content. We believe that it’s vital to spend time getting this right at the start of a project. The clients previous site had a number of irrelevant pages including a recruitment form, which was never used, and a whole page linked from the main navigation about a type of paint. We suggested that these pages are removed and replaced with a page called ‘What We Do’ which clearly identifies the service they provide and a page for Customer Testimonials as we believe that they add huge value to this kind of business.
Step Five: Sketch Layout Ideas (Still no computer!)
Once we have page names and the content for each page we begin to sketch ideas for site layout. Before we focus on the design of the site we include the most important features, which are navigation and branding. We decided to go for horizontal navigation directly underneath the logo and contact information. We also decided to go for a 2 column layout with a large column for the main content and a smaller sidebar for additional information and links. The layout was completed with a small footer.
Step Six: Logo Design & Colour Scheme
Once the planning was complete we needed to design a logo and come up with a colour scheme. We wanted a logo that directly represented the company name and decided to go for a house being painted by 2 men. We chose green as it has strong emotional correspondence with safety and suggests stability, which we felt was important as PMPs customers would be trusting them with their homes. The client was unsure about using green when we suggested it but luckily they loved the finished logo. The orange/brown colour is a complementary colour picked using colour theory and a colour wheel.
Step Seven: Build the website (HTML & CSS)
When the logo was complete we began to work on the website. We no longer create mockups in Photoshop and start building the site directly with HTML & CSS. We code all of our sites by hand using Coda for the Mac.
We decided to use a black header to add contrast to the logo, to keep the main content area fresh and clean by using a white background and a toned down version of the green from the logo for the footer. The navigation bar would be the same orange/brown as from the logo. From the previous sites log file we determined that there was a high number of visitors still using 800×600 screen resolutions. This is unusual and we usually design sites at 1024×768 but we did not want to alienate existing visitors so we designed the site at 800×600.
Step Eight: Content Population
The sidebar of each page would contain links to other areas of the site or highlight important information such as the areas PMP cover or their free quote offer. We also decided to feature a different quote from the client testimonials on each page in the sidebar and on pages other than the home page to have a small before and after example of a job PMP has completed with a link to the gallery.
Gallery
The Gallery was one of the most important areas of the redesign. For a business like Paintmyproperty the best way to sell their business is by showing real examples. Some of the before and after pictures show an amazing transformation in the properties they have worked on. The designer of the previous site had completely missed this. We organized the gallery into 2 main sections, Commercial and Residential and then into smaller subsections such as Renovation and Decorating. We featured 3 photographs for most properties, before, during and after shots. We felt it was important that the photos were displayed next to each other to show the progression so we kept them as small thumbnails; you can click on the thumbnails to view a larger photo in more detail and also skip forwards and backwards between the large photos.
Self-Cleaning Paint!
PaintMyProperty has recently begun using a self-cleaning paint. As well as being an exciting new product, it has also been featured on Grand Designs (A Channel 4 show in the UK) and there is a bit of a buzz around it on internet forums dedicated to home improvements. To capitalise on this interest we created a page dedicated to the product which is search engine optimised to attract visitors interested in the product to the site. The page also features embedded YouTube video of Kevin McCloud demonstrating the product on Grand Designs.
Step Nine: Testing & Client Approval
Once all of the pages were complete and the content populated we uploaded to a test site for the client to view and approve. We test in a variety of different web browsers and operating systems. The client makes a few alterations and suggestions which we happily implement.
Step Ten: Going LIVE
Once the client is 100% happy we transfer the site to their original domain http://www.paintmyproperty.com . We send an invoice for the remaining 50% of the fee along with information about using our website statistics packages and accessing the included email addresses.
We hope that you have found this insight into our web design process interesting, we realise that it will vary from the way other web designers work and would be interested in your comments.
Dot Design
27.05.08
Steve, this is refreshing to see sketches/workings from a website designer as I know a lot of them don’t work this way. Sketching is a must and helps the ideas process. Self cleaning paint, I must get some of that. Cheers, Gareth.
admin
27.05.08
Thanks for the comment Gareth.
I can’t imagine not sketching first, particularly now I don’t usually do Photoshop comps, I wouldn’t know where to start if I sat down in front of blank HTML & CSS files with no ideas!
Oh, it’s Shaun btw ;)
Leave a Reply