Building a Simple and Effective Content Structure

Clarke projects are a national construction and engineering company who specialise in the design and build of a wide range of properties from residential through to listed buildings.

They came to us for a refresh of their existing website, which previously used a splash page for the layout and design. This technique was popular a number of years ago but is now seen as an obstruction for users visiting a website because it puts a barrier in-between them and the content. It was clear that the design, and just as importantly, the structure, needed a modern re-think.

We started this project, as we always do, with a kick-off meeting. This gives us a clear idea of the business requirements that will inform the changes to the website. We soon determined that the team at Clarke Projects wanted to retain the simplicity of the existing site due to the diversity of properties their business worked on; one minute they may be working on initial artwork plans, the next they could be working with traditional crafts on a grade 1 listed building.

They felt they could best demonstrate the range of things they do through their news and case studies. This would allow the work and past projects to do the talking instead of having numerous content pages for each property service. We generally like to stress the importance of keeping content concise, because a user’s time spent on a website is often measured in seconds. Therefore, from all angles, the new content would need to be lightweight.

From this first meeting we also identified new features they required, namely, image sliders, enquiry forms and news feeds. We knew that this set of features would integrate well with their simplified content, and from here we produced the sitemap for the Clarke Projects site, to enable us to get all the required pages in place.

As you can see from the sitemap the structure of the site was kept lightweight; the services were integrated into one page and you can see how the case studies and news pages have space to grow and contain multiple content pages.

The next stage was planning and wireframing for the new site. This is referred to as Information Architecture (IA), the blueprints for a website.

To draw attention to the case studies we needed to add a clear call to action. One of the three feature boxes on the homepage was dedicated to a featured case study.

Starting the project with these initial wireframes provided the client with a clear indication of the site structure which acted as a guideline during the content creation phase. This guide shows where headings and sub-headings are needed, what images are required and what space is available for text content.

On completion of the IA we presented these wireframes to the client. Upon sign-off we then began to focus solely on the design during the following project stage without concern that the site’s content is going to drastically change, (this can cause delays in a project as making changes during the design stage takes much longer compared to the low fidelity graphics used in the IA).

Once the project was moved into the design stage we continued to focus on the clean simple approach that was taken with the IA.

We used Clarke Project’s corporate blue colour and instead of using this as the prominent theme we used it as an accent colour, complementing it with shades of grey to create a modern look that allowed the content to clearly speak for itself. This set a professional and welcoming tone.

From viewing the design (below) you can see the work we carried out at the IA stage was vitally important for the success of the project. The wireframes and sitemap work as a framework for the design, build and content creation stages. It’s easy to see that this worked very well on the Clarke Projects website as the content, design, and site structure all work in harmony.