We recently launched a new website for a brand that immediately saw an increase in organic SEO traffic. And how did we do it?
- We optimised the site for SEO.
- We optimised the site for user experience by thinking about the customer journey.
If you’re planning to design a new website, or relaunch an existing site, there couldn’t be a better time to set the right foundations and launch your brand at a higher level. In this blog, I’m going to go through the website design SEO process from start to finish, including the design, and the development and optimisation of a site for search (SEO) from the ground up.
Note, if you don’t have an existing site, you can skip the first two steps.
Step 1: Trim the fat
If you’re going to spend all this time and money designing a new site, then this is a great opportunity to clean up the house and take across only what’s needed. Filter out pages that don’t add value to ensure that only the best content makes it to the new site.
Here are some key considerations when you’re thinking about trimming content down:
- Google Analytics: this invaluable tool lets you see what pages users like to visit and spend time on, and will be ones to keep. Content that has a high exit rate could indicate that something needs improving, or cutting from the site.
- Backlinks: If pages are getting links from other sites, that’s a good sign of strong content and are definitely worth retaining to protect the domain authority for SEO.
- High ranking pages: Content that is actually ranking in search engines are going to be high value pages worth keeping.
Step 2: Run a technical SEO analysis
To help Google crawl your website, and basically love your brand, Google needs to be able to go through the site quickly and easily. And that’s where technical SEO optimisation comes into the picture.
Just to clarify, this step is not about technically optimising the existing website, as that’s a waste of time. We are simply identifying technical SEO issues that should be considered and resolved as part of the migration to the new site.
For instance, 404 pages, redirect loops or site architectural limitations that could be holding your organic performance back need to be reviewed and corrected as part of the new site development. Most of what you find during this stage should feed into the development stage.
Step 3: Keyword research
Imagine you’re building a gym. One of the first questions you’re going to be asking yourself is: what should my gym include? Now, let’s say we did some market research and found that most people in your town who are looking for a new gym love to go to group classes like Yoga, Zumba or Spinning classes. Knowing this information up front is very important as it’ll shape how the gym is designed and built.
In the same sense, keyword research is essentially researching what your market is searching for in search engines so you can define how the website should be laid out and how the pages should interact with each other in a relevant way for users. If you skip this step you could end up building something for yourself, not your audience.
Step 4: Define the site architecture
As mentioned in the previous step, keyword research can help define the architecture of the site. This is a crucial step, as it really begins laying out the foundation and content across the site. Things like a blog need to be included in the site architecture. And if you want a look book or separate educational or training area, then they need to be planning in here.
As you go through this exercise you will begin to notice holes, or a confusing user experience. A general rule of thumb to consider is if the website doesn’t work for users, it’s not going to work for Google.
Since you’re designing a brand new site, this step can also be used to define how many pages require a unique design, to keep design costs low and efforts efficient. In other words, it’s advisable to work out which pages can use the same template design. For instance, service or product pages should be able to follow the same design style if they contain similar information. This is also better from a user experience point of view, as they know what to expect as they navigate around the site.
Step 5: Page information structure
In this step, you need to take the list of unique template designs and define three things:
- What information do we want to present on the page?
- What does this page need to rank in Google for that keyword?
- How do we want to arrange the information on the page
Before we get into these, it’s important to keep the audience in mind, as it’s all about giving them the information they need, in the most convenient and efficient way possible. If you can get your customers involved in this process, even better.
For example, when it came to rebranding our agency, Bubbl and building our new home page, we wanted to take people through a journey around what, why and how we are helping brands online. We also took our customers’ feedback on board during the process.
Here’s some examples of what information you can include on a page:
- The problem you’re solving
- The solution you’re offering
- Stories of customers you have helped in the past
- Testimonials
- Calls-to-actions to make it as easy as possible for users to take the next step with you
- Email or messenger opt-in forms
- Standard FAQs customers ask
Next, it’s time to consider what the page needs for SEO in order to rank and get found for that keyword. First of all, you need to ensure this page has the right information to rank for that keyword. For example, if users are searching online for website design SEO tips, and my content mostly talks about how to build a website using WordPress, this isn’t a good fit for the user, and therefore Google.
We need to understand what the user’s and Google’s expectations are for a particular search term, and build content around that. You can do this by looking at what other sites ranking for this term on page 1 of Google include and integrating this into the information layout.
Now that you know what information the page requires, it’s time to lay this out. How you lay this information out on the page really depends on the industry and audience, but as long as you take them through a logical journey you will be on the right track.
Step 6: Define your tone of voice
As Elmore Leonoard said, “If it sounds like writing, I rewrite it.”
This is the difference between copy written in a specific style and tone of voice and copy that is not. You need to figure out your brand’s style and tone of voice. For example, my style is simple, non-technical, conversational and personal. You’ll notice that style on my blog, which is easy for me to continue with as it’s close to how I speak.
For bigger brands, this is going to be a little bit tougher to do. But it’s also a great occasion to get your team behind a project and share their views and examples of copy and language they feel is authentic to the brand. When we’re working with larger brands, we love to run workshops and interviews with staff, to really get to know them and how they like to talk to customers. You could also get your customers involved and find out what they like about your communication.
There’s so many things you can do here to help shape your online voice, all of which come together to produce a tone of voice guide and copy sample that you and your team can refer to for all content going forward.
Step 7: Write your story with quality copywriting
Once the layout of each page has been established and the tone of voice has been defined, you can begin writing the message. If the message or story is unclear, it’s virtually impossible to think about design, especially if the site is to have authentic meaning.
Copy that draws emotions and engagement takes time and experience, so don’t rush this process, because it’s one of the most important steps in designing a website. Once happy with the first draft, go back and make sure the copy is optimised for the target keyword. This is going to take some competitor research but is definitely well worth it. This is a good time to write SEO meta titles and descriptions too, so they are ready to add when the site is developed.
Copywriting is an iterative process, don’t aim for perfection – the message and copy can be adjusted if needed during the design process.
Step 8: Website Design
With the research done, architecture established, pages laid out and the copy and overall message in place, it not only gives designers a head start, but massively increases chances of success in launching a new website.
When developing the design of the site, there’s a few tried and tested tips to create outstanding design.
- Create a Pinterest board and add clippings of things you like and want your brand to represent.
- Find websites with interesting designs and concepts to draw inspiration.
- Utilise design sites like Behance and Muzli for inspiration.
- Get your team involved and share opinions and ideas. This will help you to get the most creative solution.
- Maintain an open communication channel during the design process. Take small steps in the beginning, get feedback early and then go faster as the overall look and feel becomes more solid and established.
As each page is designed, don’t forget to review and improve the copy to make sure it fits the page and the key message still has impact.
Step 9: Website Development for Users and Marketing
Before developing your website on your chosen platform, it’s important to cover any SEO and content management system specifications to ensure your site development doesn’t ignore the work you’ve put in up until now.
When it comes to SEO, sites should be built in a way that allows Google to crawl and easily find the most important pages. Using the technical SEO analysis can facilitate this, and ensure that the findings are taken into account before the site is developed.
It’s also important to consider the architecture diagram at this stage to concisely layout the pages, as it shows how they are connected. It can also be measured against any technical limitations with the chosen platform. For example, Magento is built in such a way that a product cannot appear under two different categories unless it is duplicated, which could impact SEO if not managed properly.
Step 10: Redirect Plan
When replacing an existing website and making architectural changes a redirect plan should be put in place to tell users and search engines how to get to the new version of a page.
Not redirecting a website correctly is one of the biggest reasons behind large organic traffic falls when businesses decide to build a new site. For example, we were working with a client recently who migrated their website to a new platform, and within a few months had lost 90% of their organic traffic. They were originally getting 30,000 visitors per month, which then went down to just over 3,000. This drop had a major impact on online sales and was largely due to the fact they had no redirect plan in place.
Step 11: Testing the site on a staging server
Every new website should be fully tested in a staging server or test environment before it is released publicly.
Here’s a few things to include in these tests:
- Buttons functionality
- Email forms work
- Redirect plan has been implemented
- UX of the page
- Accurate, correct copy
- SEO meta titles and descriptions
- Website speed
- Robots.txt and sitemap files creation
Get at least 3 different people checking and testing the site, ideally people who haven’t been heavily involved from the beginning, as they will see the site in a totally different way.
Step 12: Go Live and Test
After all the steps have been taken to research, design, develop and test a site, it’s ready to launch.
As soon as the website goes live, it’s worth testing everything that was tested during the pre go live test to check that nothing has broken during the migration.