Introducing The New Xpand Website

Detailing the process that we went through when creating our new website.

Mariah Young

Process and Planning

Designing by data

We always tell our clients how important it is to design by data, so we made sure to practice what we preach. We carried out a full assessment of all of the data we could gather on our previous website usage from Google Analytics and Search Console. We used our findings to dictate what we wanted the new website to be. For example, we found that we were spending a lot of time creating blogs, but that they weren’t actually getting a lot of traffic. We decided that our time would be better spent creating downloadable resources and e-books, and promoting our content more.

We also found that we had a lot of traffic to the case study parent page, but that the actual case studies themselves weren’t getting so much traction. Because of this, we made sure to include the highlight from the case studies on the parent page, so that potential clients can see the results of our work without having to click into the case study.

Sales Funnels

Sales funnels were a big consideration for us when it came to designing the website. We’ve done a lot of research into sales funnels and wanted to put our knowledge into practice. We knew we wanted to create valuable content that could be downloaded from the website, and which would allow us to get potential clients into our sales funnel. Because of this, we made sure there were lots of opportunities within the design to promote our downloadable content.

Calls to action

We also carefully considered calls to action on the site. There is a lot of research into the psychology of calls to action – such as which button colour is the most effective, and how the copy should be written – and we wanted to make use of that. We also made sure to pair the copywriting with the actions, in order to guide and assist the user into ultimately making a decision. Calls to action are present around the site, and all point to our desired actions – one of which is contacting us, and the other is downloading a resource.

calls to action

In the end, we had held several very thorough planning sessions for our new website. We mapped the whole thing out on our whiteboard wall and planned the user journey and calls to action with the help of different coloured post-it notes. Once we’d completed the planning and created a sitemap, we were able to start on the SEO and content creation.

Content and keyword research

Keyword planning

Once we had planned out the website, we got started on the keyword research. This involves using Google Keyword Planner to pull out a list of key terms related to the business. You can then use the data associated with those terms to identify which ones you want your website to rank for.

Once we’d allocated key terms to every page on the website, we set about writing attention-grabbing, SEO-friendly H1 tags, page titles, and meta-descriptions. These are all important elements that Google looks at when deciding on ranking for different search terms, so it’s important to get it right.

Then we needed to write the copy for the website. First of all, we conducted a full content audit so we could decide which content to carry over to the new site. Using Google Analytics data, we identified weak pages and made a decision to improve some or remove them completely. Anything that couldn’t be updated or offered little value to our audience was removed. Then we could get started with re-writing the content we were carrying over.

Previously, the copy was quite child-like, probably over-expressive, and not really professional enough for our desired target audience. It also had a LOT of puns! We knew it needed to change, so we sat down and brainstormed how we wanted Xpand’s tone of voice to be, in line with our brand guidelines and with our target audience in mind.

brainstorm

We came up with the following parameters (although these don’t apply to blog posts! We think it’s important to be much more conversational in tone when writing a blog.)

  • Sparing use of abbreviations like don’t and won’t – use the full version like will not and do not.
  • Keep copy factual and be able to substantiate any claim with data
  • We don’t use industry jargon. For example, rather than saying “rank in the top position in the SERPs”, we say: “get to the top of Google”.
  • Use simple language
  • No puns or fluff
  • Straight and to the point
  • Keep it results oriented. Everything we do is about getting you results, and the copy should reflect that.

We re-wrote the whole website in line with our new tone of voice, and we think it really helps to position us as experts in our field, who know what we’re talking about and more importantly, know how to help you grow your business.

Design

Once we had the copy, we were able to start the design. Web design is constantly changing and evolving, and although our previous site was only three years old, it had started to look dated as technology and software evolved. Pair that with the fact that we had all new members of staff, and we just didn’t feel that the old website reflected Xpand at all. With new people come new ideas and fresh ways of thinking, and we wanted to reflect that in the new site.

Photography

Photography was carefully considered for the website. Photography is often underestimated when it comes to web design; however, professionally taken photos can take a site to the next level. We wanted to create transparency with our new site so that users could see exactly who we are and what we’re about. We wanted it to be people focused, to give our website a friendly, personal feel, while also showing off our office space.

We knew it was important to plan ahead, to make sure we got plenty of shots in different scenarios, so we thought about the types of shots we would need for each page and came up with a list for the photographer to work from. We wanted to show the company culture, so we made sure to get shots of us working, but also relaxing and socialising. What do you think of our shots?

In the end, we went through seven iterations of our new design. Overall, the feel we wanted from the design and the copy was a more grown up, mature website that appealed to a professional audience and positioned us as experts in our field.

Development

Future proofing

Once we were happy with the design, we got stuck into the development. One of the problems we’d had with the old website was that several developers had worked on it over the years, and naturally, each developer has their own way of working. The result of this though was messy code and more time being spent making amends. We wanted to make sure the new website was easy for future developers to work on, and so we spent a lot of time correctly annotating the code.

code

It was also important that the website could easily be edited by the rest of the team, who don’t all have coding experience. We made sure that the content areas were all easily editable, allowing us all to upload and change content and pages as required.

Micro animations

We also placed a heavy focus on micro-animations. The design of the website is fairly simple and straightforward, so we wanted to use some micro-animations to give it a bit of swish! You can see an example on the home page, where the copy fades in as you start to scroll.

Load speed

Load speed was another factor that was important to us when creating our new website. We know that if a website is slow, it might not be able to rank well in search engines. One of the key things we debated was the use of video on the homepage. Our old website featured a video about the company in the hero area, and while it did look good, videos often slow down the website load speed. We decided in the first instance to leave the video out, and later to conduct an A/B test so we can assess how much the use of video will affect the load speed.

SEO

After the website has been built, we needed to optimise it for search engines to make sure we continue to appear on the first page of Google. First, we identified all SEO issues with the old website, to make sure we could rectify them for the new one. We discovered a few problems with the old website, such as:

  • Missing H1 tags and meta descriptions
  • Duplicate H1 tags
  • Broken links in older blog posts
  • Poorly constructed URLs containing special characters and underscores

None of these is particularly catastrophic, but when it comes to SEO there are many factors that we can’t actually control. The website is one area that we do have control over, so having a technically sound website with all of these elements in place provides a good foundation to rank for competitive terms.

We also wanted to make use of Schema Markup – code that provides search engines with additional information about the content on a page. There’s a whole library of code that can be added to a website, all of which will help search engines to pick up your website. Schema wasn’t used as thoroughly as it could have been on our old website, so we’ve made sure to implement it on the new one.

Finally, we underwent the task of mapping all redirects from the old website and making sure all of the previous redirects were re-written. This was a pretty huge job, as we were working with over 10 years worth of content! However, we didn’t want any chains or loops or broken links, so it was worth putting the time in to make sure that every piece of content was properly redirected.

Testing

 Once the website was built and ready to go live, we underwent the same rigorous testing process that we do with all of our websites. We carried out thorough testing of the site and all of the functionality, making sure every button and transition worked correctly. We also tested the frontend for any errors, checked that the back end worked as needed, and took benchmarks to test the new site against the old site.

We also added some additional functionality before going live – we wanted to start promoting our downloadable content and launch our email automation. This meant we needed to set up some email journeys in our email marketing software and integrate it with the website. This was a last minute addition, and we had to work quickly to get it done before our live date! We managed to get it all up and running in plenty of time though.

automation

All that was left to do was a final proofread, and then it was time to go live!

It doesn’t stop there…

After we set any website live, we carry out thorough post live checks. This is just to make sure that it’s all working as it should, and fix any bugs.

We’re also planning to carry out some A/B testing, to make sure the website is as good as it can be. We’ll be testing video/no video, specific wording in the calls to action, and the positioning of the calls to action. By carrying out these tests, we can assess two different options and see which returns the best result. We’ll then implement and run with the winner.

It’s also important that we continue to analyse the data. We keep track of our Google Analytics, to make sure everything is working as it should and we’re getting solid traffic and good rankings. We also use software called Lucky Orange, which allows us to watch how users interact with the site. This can often highlight errors, and also lets us see how users move through the different pages and what they click.

We regularly review our data, and we’re keeping a close eye out to make sure our website is working to help us achieve our business goals. Up to now though, we’re pretty happy!

What do you think of our new site?