March 31, 2020

How to redesign your website: A step by step guide

This is the first in a series of articles we are will be writing to help you understand the process behind redesigning your website. Our aim is to show you in simple terms where to start and what the key ingredients are to a successful website design. We will be peaking beneath some of our live projects to give you a glimpse of the sort of challenges you may face and some of the solutions we came up with for our clients.

We are starting with a recent website for Newcastle based specialist flooring company Renwick Flooring.

Website Redesign

Renwick Flooring, based in Newcastle, approached us to design and develop a brand new website for them. Like many of our clients, their current website no longer reflected the kind of services they were providing. The majority of their work is now coming from Care Homes in Newcastle and around the North East so they wanted their website to showcase this as a priority and this would enable them to be seen as a specialist in the area. The other priority was the site didn’t work on mobile devices so making the new website mobile friendly was a big part of the thinking behind a full redesign.

Brand

It’s a good idea when starting a website redesign not just look at the digital side but also to collect any printed material where the brand has been applied. This will ensure your business messaging and look and feel is consistent both on and offline. Is there anything that you have produced in printed form that would work well digitally too? We got our hands on a few brochures from Renwick and we noticed they used their logo reversed out in white on top of a strong navy. The logo typeface was also used much more across the printed materials for titles and body copy and this instantly strengthens the brand. A gold accent colour was also applied where needed to draw emphasis to certain sections and this would work equally as well online for things like calls to actions and links.

Hero

The hero section of a homepage is usually a large image or video with a strapline on top. With Renwick, they wanted to showcase the work they do with care homes in Newcastle so we decided to use a simple gallery that showed 3-4 images and cycled every few seconds. This is all content managed via WordPress so Renwick can easily change this for newer projects in the future to keep this area fresh and up to date.

Navigation

The navigation of any site is so important to allow your users to move around the website quickly and easily and find what out the information they need fast. Renwicks previous navigation was pretty basic so there wasn’t much that needed changing but we still thought about how we could make it even more simple and easy to use. We started by removing the blog section as this hadn’t been used and was just causing frustration. We also removed the residential page and added a new page for Care Homes that gave Renwick a full section of the site just to talk about their expertise in that area. We also made more of the About and Gallery pages, improving the design and layouts.

Content

When redesigning your website, it’s always a good time to revisit all content that is on the website. It gives you an opportunity to really condense long pages down into smaller chunks that are easier to read and also remove old, outdated material. With Renwick, the content was very minimal and so we had the opposite job that we usually have in that we had to help them write some more content. We used their printed materials as a base and also thought about SEO when rewriting the content for the new website. We wanted to make sure that keywords customers would be entering in to Google to find Renwick were scattered throughout the content and would help with their rankings as well as providing the customer with enough information on exactly what services Renwick provide.

Photography

As well as text content, improving the photography on your website is super important to sell to customers the quality of your product and service. Where possible it is a very good idea to get bespoke photography shot especially for your business as it will allow you to have full control over the look and feel and ultimately work best. With Renwick, a photo shoot wasn’t possible – especially due to the coronavirus outbreak – so we were provided with a range of imagery that they had previously used in their printed material. We discarded any images that were of low quality as that would not provide a very good impression of the company to the customer. Luckily there was plenty of nice shots to use. We made use of the high quality images on the heroes throughout the website as well as for supporting bits of content. We also added the full set of images to a Gallery page where the user could click the thumbnails to view the images larger.

Testimonials

Testimonials or reviews from customers are a great thing to showcase on your website. It’s usually a good idea to have some control over these and avoid pulling in reviews from an external source unless you are confident that no bad reviews will show up. Collecting testimonials is usually a pretty simple process and we find it is best done shortly after finishing a successful project as the client is most likely going to give you a good review once their project is all complete and they are happy with the finished outcome. We created a simple testimonials section for Renwick to showcase their comments from customers and this is fully controlled in WordPress so they can easily select the right testimonials depending on what page they would like it to appear.

Calls to action

Calls to action or CTA are links and buttons on your website that perform a function. This could be to move to another page, to open a photo gallery or to submit a form. When redesigning your website, it’s good to think of some of the main CTA you want your customers to take. For Renwick, the main thing we wanted the customer to do is book a free quotation. To direct them to that page, the contact page, we added a prominent button in the top right corner of the screen and by making the header ‘sticky’, it meant that the button was always visible no matter where the customer is on the site. It’s a good idea like we did to style these types of CTA slightly differently to other items nearby. So with our button for example, we added a simple gold border around it which filled in gold when you hovered. Hover effects are a great way to provide emphasis to certain links and tempt the customer to click.