It doesn’t matter if you’ve got a rockstar team of designers and developers working on your new website launch. Mistakes can still happen.

As a designer who has worked on north of a hundred website projects, I have had my fair share of website launch blunders.

There’s nothing worse than designing an amazing looking website only to find that things have gone awry in production. 

Here are 4 things you can do to ensure your new website launch goes smoothly.👇 

(For a TLDR website launch checklist, scroll to the bottom of the page)

‍

‍

1️⃣ Do a first pass test (QA testing)

When a website development reaches its first build milestone, it needs to be tested by the internal project team. 

You’ll invariably find bugs and things that don’t look quite right that will need to be rectified before the website sees the light of day. This is no fault of the development team – website bugs are just the nature of the beast.

In web and software development, this is commonly referred to as ‘quality assurance testing (QA testing)’. 

What do you look for in QA testing?

‍

Functionality

The most important part of QA testing is making sure it works. 

When testing functionality, it helps to think about what is the main task(s) that you expect your website visitors to take. You’ll want to test everything in relation to those tasks. 

For example, 

Is it a website to generate leads? Test all the buttons, links and forms that the website visitor may interact with in order to submit their website lead. 

Is it an ecommerce website? Test all the interactions involved with making a purchase, creating an account or submitting a ticket to customer support. 

‍

Styling

When you conduct QA testing with styling in mind, you want to make sure that the website build matches up with the intended design, and that the website appears consistent across different browsers and devices.

Programs like BrowserStack are great for QA testing as they allow you to perform cross browser and device testing from a single browser. 

Testing styling is important to make sure the new website stays on-brand. It also helps to avoid potential usability issues caused by inconsistent styling. Like an important button that’s using a disabled state rather than an active state.

Edge cases

When testing for edge cases, you’ll want to consider the tasks and scenarios that are less common for website visitors, but are still possible to perform. It’s about leaving no stone unturned. 

For example, a website visitor wants to purchase an item with a discount code that is no longer valid. What should they see in order to direct them along the right path? 

‍

💡 Here’s a tip

A quick and simple way to document QA testing feedback is to use a program like BugHerd, which allows you pin website feedback directly onto elements on a webpage and capture all the context around that feedback for your web developer.

‍

‍

‍

2️⃣ Content plan

‍

Get the content into the new website. And have a clear plan on how to do it. This isn’t a step that you want to approach in an ad-hoc manner.

A common practice from digital agencies is to create a ‘content plan’ with the use of a spreadsheet, which should cover the following:

• An overview of the website’s pages 
• The text fields and media assets required for each of these pages 
• Any constraints for the content, such as text character limits, image dimensions and video file sizes
• Where the content is coming from (i.e. will it be ported over from an existing website or is it new content that needs to be created?)
• Who is responsible (e.g. the client or the agency?)

There are more sophisticated ways to approach a content plan than a spreadsheet, such as the use of content-planning programs like GatherContent.

‍

💡 Worth noting...

While migrating the content requires the existence of the new website build (or at least, a staging environment for it), content planning does not. We recommend you to start your content plan much earlier in the web development process!

‍

💡 Also worth noting...

Sometimes when redesigning an existing website, some pages won’t make the cut. There are various reasons why that may be the case, such as wanting to recreate an existing piece of content or wanting to change the URL of an existing page. To avoid users seeing a 404 error page for these legacy pages, it’s helpful to perform 301 redirects, which will send users to another URL.

‍

‍

‍

3️⃣ New website launch SEO performance check

‍

If I had a time machine to teach my younger self how to launch a website successfully, I would absolutely stress the importance of SEO. 

The last thing you want to do is launch a new website and have the performance go backwards. 

Here are a few things you can do as part of a new website SEO performance check:

• Test on mobile for layout & speed.
  Use a tool like Page Speed Insights to assess your website’s performance and get recommendations on how to improve or troubleshoot issues. As a general rule of thumb, any performance score below 80 should be worked on. 
• Minify all media assets.
  Use tools such as tinypng.com (for JPEGS and PNG files) and vecta.io/nano (for SVG files) to compress image file sizes and improve page speed.
• Ensure all images have descriptive alt text.
  For accessibility purposes. 
• Ensure the presence of main keywords are upheld.
  Oftentimes with new website launches, new messaging comes with it. And that’s where a webpage’s keywords are at risk.
  New messaging is okay, provided the main keywords of your website’s SEO strategy are given adequate coverage. It would be a mistake to create messaging purely from a traditional marketing point of view and without the main keywords in mind.
  The best bet is to include the main keywords in the website’s meta title, description, slug and the main heading. 

‍

By no means is this intended to be an exhaustive list for optimising SEO. But it’s a good bang-for-buck starting point. For a more comprehensive guide on SEO, try Google’s SEO Starter Guide.

‍

‍

‍

4️⃣ Get your stakeholders approval (UAT)

‍

The final step is to test the new website with your clients or stakeholders to make sure that they have verified that the website works and are happy to move it to a production environment (i.e. where the live website will exist). 

This is commonly referred to as User Acceptance Testing (UAT). 

In general, clients and stakeholders will gravitate to a cursory check of the website and give feedback if the issue is conspicuous enough. 

If you want a more thorough review from your client or stakeholder, it helps to provide explicit instructions on what to look out for during UAT.

Consider asking your client or stakeholder to proofread the website. It’s often the case that final content isn’t ready to review on the website in the early QA testing stage, and so UAT is the perfect stage to cast a safety net on grammatical errors.

‍

💡 Here's a tip

Clients and stakeholders don’t always articulate website issues in the same way that internal web development teams do. Again, this is where a program like BugHerd comes in handy, which allows you to take a screenshot of the website issue along with all the other important information. Visual feedback is like the common tongue between developers and non-technical people.

‍

‍

‍

‍

... Step 5️⃣ ?

‍

Ship it, knowing that you and your team did the due diligence to ensure the new website launches successfully! 🚀

‍

‍

Summary: The TLDR website launch checklist

1. QA testing 

Test the following:

• Functionality
• Styling across different browsers and devices
• Edge cases

2. Content plan

• Create a content plan to outline content required for each page, content constraints, source and responsibility
• Implement content into new website

3. Performance check

• Test on mobile for layout & speed
• Minify all media assets  
• Ensure all images have descriptive alt text
• Ensure the presence of main keywords are upheld

4. User Acceptance Testing

• Request proof reading from client (recommended)
• Get approval from client or stakeholder to move to production

5. Deploy

• Move website to production environment

‍