A construction and interior design firm’s WordPress website design

A website that needed to sell, not just tell

When this client found me, they had a website that they could not update  – not without paying a hefty fee for even the smallest changes. Their old site design was also dated, and honestly, not doing a good job of telling their story. Their needs were specific and detailed. I spent quite a while doing research for them to formulate the initial quote, with a plan for how content would be displayed, and how it would function in a WordPress environment.

When we got started, I visited their office for a discovery session. I was amazed by how friendly and warm the people were at this company. I had no idea, based on their old site, that they were this welcoming. I felt that ‘warmth’ was something that needed to come through on a new site. Who wouldn’t want to spend months working with such a friendly, fun-loving team? On a renovation, no less! Did I mention there was an office dog?

After spending 2-3 hours going through a discovery questionnaire, I was able to make a plan for them that I believed would meet the needs they communicated to me. On my end, I also planned for up-to-date coding standards that would be viable for the modern web. SEO, site load time, content input and all the necessary components were considered far before a designer got involved. This is a critical step in any website project management process, in my opinion.

Going through their old site, I found a video that had been ‘hidden away’ for some reason. It was a very welcoming, friendly introduction to their company, interviewing their owner. Given their amazing personality was something I felt could be better presented, I insisted we take the video out of ‘hiding,’ and put it in a prominent spot on their homepage.

The client had a strong desire for large imagery, which was understandable, given the visual nature of what they do. However, I did push hard against my typical ‘no slider’ rule. Many stats and studies point against using a slider.  Plus it would slow down the site speed. While tempting, I wanted to ensure the company (and any client of mine!) would not be copying competitors who used sliders, just for the sake of copying. The aim, to me, was to be better, and to excel. Conversion goals and ‘making the sale’ are important – and typically the goal of any website to begin with. So, we came to a compromise and used a large static image at the top of the homepage, along with a strong message, using a tinted overlay. This area would use a call to action, and include relevant SEO keywords.

I was told that their PDF download of a renovation checklist was often clicked on, on their old site. So, I suggested they give the user what they clearly wanted. Why not put that renovation checklist on the home page too? If anything, it could help sell their service. Otherwise, it would do little harm (given it would be such a small part of the home page).

At the bottom of every page we included two important things to help the client ‘make the sale.’ One was the option to include a testimonial, using WordPress custom fields. This would spread testimonials throughout the site, instead of having them all on one page (though both ideas would be a fine strategy). The other was a ‘Request a consultation’ bar. In addition to the top menu having a “consultation” button in bright, noticeable yellow, we also wanted to reinforce the consultation on every page footer. This was because getting the customer ‘in the door,’ would be what ultimately helps the client make sales. In other words, conversion strategy – the goal of the site – was always considered, from the start.

To add a ‘theme’ using the client’s branding desires, we went beyond just using the company colours. Instead, we aimed to give the site an ‘uplifted,’ and totally customized feel. We did this by including a marble background that would subtly add texture and interest to the design. It would also really say, “renovation.” We also included details of blueprints in backgrounds and dividing lines (horizontal rules). This would create visual interest on pages as the client inputted content in sections. And, even the bullets on list styles were considered, and customized to use the client’s logo. It’s the little details that count, and that make a great design, in my opinion. The goal with web design is to not be distracting, but to include small details for a person to notice.

The portfolio section of the website was a huge part of this project. We not only had to make it effective design-wise, but also had to ensure it would act as a digital sales tool for the company. This involved taking what would traditionally be information embedded into a PDF flyer, and then publishing it as ‘live’ content on a website.

To do this, we identified a limited set of categories for their case studies. Icons were made to indicate each category. The tags taxonomy was used to intersect content in the portfolio area (which was set up as a custom post type in WordPress).

We then used WordPress custom fields to help organize the individual portfolio items into predefined templates. This would keep information and design consistent. It would also help the client update their site without needing to know much code, for a complex layout. But – no drag-and-drop builders were needed in this easy-to-use method, saving the site from performance problems later.

We had to keep portfolio page templates flexible, since not all portfolio items would need every component we built for them. So, as a failsafe, we made sure that if content was not entered into a custom field, it would not show up. That would not affect the design professionalism by otherwise creating a ‘blank space’ on the page.

A ‘before and after’ gallery was also researched, and implemented in a customized design within the portfolio area. This would help display the effectiveness of the renovation and construction work this client did. They also had a ‘regular’ gallery. They would be able to display plenty of images to demonstrate their work, in a purposeful, contextual way (i.e. without needing a slider on the home page!).

The way the portfolio was set up, the sales team at this company would be able to send links of past projects to new leads, showing them the work they do. Potential customers would also be able to navigate the portfolio based on renovation features they were looking for.

The client was extra diligent to manage images on the site, which gives the site an ultra professional look. They carefully sized and compressed images according to specifications I had given them. And, they took the time to follow step-by-step instructions I gave when training them to use the site. I have to say, it makes the site so much better when such care is taken by the client.

Web development features:

• WordPress Genesis framework custom design, templating and development.
• SEO foundations built into the site, its strategy and design, from inception.
• Custom post type and custom fields implementation for a portfolio section on the site (made from scratch, did not use a plugin). Included a custom archive template design and coding.
• Responsive design and web development.
• High resolution imagery to ensure the site would appear crisp across devices and screens.
• Content strategy, layout and planning advice.
• ‘Team’ section with plugin implementation.
• Before and After gallery plugin implementation.
• Jquery lightbox implementation for portfolio galleries.
• Typography design and accent colour integration for calls-to-action.
• Custom ‘blueprint’ background vector graphic and horizontal rule design.
• Above-footer widget area for a call to action.
• WordPress custom field to display testimonials on any page.

Accolades from the client:

Joyce is an absolute pleasure to work with. She is an expert and professional in every facet of her business. What really impresses me about Joyce is her ability not only to develop a top notch product, but also to continuously educate throughout the process. When it comes to WordPress, I know ‘just enough to be annoying’, but she took my meticulous inquires in stride and answered every one in a way that not only convinced me that I had made the right choice in hiring her for the development, but also that I had found a true asset to my network, as my confidence in her is affirmed through our working together.

Joyce was hired to develop the WordPress site that TQ Construction has recently launched, and I could not be happier in my decision. She managed to achieve a design that I am pleased with both in function and in fashion, of which you typically sacrifice one or the other unless you are doing excessive proprietary coding. The purpose of a website is to ‘work for you’, and Joyce managed to keep that top of mind for me, without sacrificing the layout that I wanted.

I did my homework to find the capabilities I needed in a developer, but upon interviewing Joyce I found her to be personable, articulate and savvy. Her detailed approach brought me complete peace of mind. I highly recommend her for your web design and development needs.

Roz Screeton

Marketing Manager, TQ Construction Ltd

Other work done for this client

This client has hired me for ongoing maintenance and other tasks for their site.