“Website rebuild” — Two short words that can send any business owner into a spiralling pit of despair.
But it doesn’t have to be that way.
Rebuilding your website improves user experience and can turn your site into a powerful sales machine. In a similar vein, a poorly designed website will hurt your sales and user experience.
With the right planning and research in place, you can make your website rebuild a roaring success for both your customers and your business.
Before you rip your current site apart and start from fresh, you’ll need a solid website redesign strategy. Luckily for you, we’re here to help!
By following this website rebuild checklist, you can make your site redesign project a smooth-sailing and results-generating process.
How to know it’s time for a website rebuild?
Does updating your website fill you with fear?
Are people visiting your website, only to drop off into the abyss?
Has your brand changed direction, focus or branding since your website was first created?
Or maybe, your developers get lost in a sea of coding issues anytime they try to make one simple change to your site?
If any of the above scenarios sound familiar, it’s probably time to redesign your website.
Businesses change. As such, so should our websites. And, as your website changes and grows, it’s important to make sure that it still works functionally for everyone who uses it — that includes everyone from your website visitors and customers to your content managers, web developers and marketers.
If there’s a misalignment between growth and performance, there’s going to be a misalignment between expected conversions and actual conversions gained.
Rebuilding your website could be your ticket to closing more sales.
In short, if your site is outdated, broken or not performing as expected, it’s probably time for a rebuild.
So, let’s look at the must-do actions that should be on your website rebuild checklist if you want to maximise your ROI.
12 Step website rebuild checklist
We know a thing or two about rebuilding websites. And in this article, I’m packaging up all of the Skyward team’s knowledge into a 12-step website rebuild checklist.
Follow this step-by-step process and you’ll be able to build a website that hits your goals, makes your customers smile, and is optimised for success.
Step 1: Identify your goals
Understanding the goals behind your website redesign is crucial.
Rebuilding your website is about so much more than just making it look pretty. It also needs to perform well.
By establishing the reasons behind your site redesign, you can make sure your rebuild checks all of the right boxes.
If you want your website to attract more visitors, then you need to build a website that is well-positioned for organic search visibility.
Alternatively, let’s say your goal is to convert visitors into customers. In this case, your website rebuild should prioritise the user journey, feature conversion landing pages, and be tailored towards closing more sales.
Identifying your goals means your content writers, designer and website developers can work together to make your new site rebuild exceeds the requirements of that goal.
Step 2: Audit your website
Once you have your goal in mind, you need to audit your current site performance and build.
Check how your site currently performs against your goal and other key performance indicators such as site speed, search engine optimisation (SEO), user experience (UX), and content quality.
Google Lighthouse is a great, free tool for getting a high level understanding of how you’re doing.
Auditing the performance of your current web build is crucial for understanding what is and isn’t working on your site right now. This will let you gain a better insight into which pages or site elements are having the biggest impact on your website performance.
From this audit, you’ll know which pages can remain the same and which pages, or elements, need updating or scrapping and starting afresh.
If you’re not sure where to start when it comes to strategically carrying out an audit for your website, we can help! Our amazing Skyward team will perform a full site audit that uncovers core issues and identifies opportunities for closing the gap between your current performance and your goals.
Step 3: Understand the user journey
Before diving into your redesign, you need to understand how users interact with your current site.
This user journey analysis should happen as part of your audit. But, it’s so important, I thought it deserved a mention of its own!
I really can’t stress enough how critical it is that you understand your user journey. You need to know what steps people take to get from A to B on your site. This includes having a solid grasp on the entry points, the page they visit after that initial touchpoint, and the drop-off points that stop users from reaching their end-goal.
When analysing the user journey, you’ll also want to know which pages are the top convertors. You can then flag these as being your benchmark pages to help you figure out exactly what makes these pages top convertors — and how can you get all other pages to the same level or higher?
Don’t forget to also investigate frustration points for users. Heatmaps are a great way to record user behaviour and see what journey stages are causing frustration. You can then use this data to eradicate those pesky frustration factors from your new web design.
Other factors to consider when reviewing the user journey include:
What are users searching for on your site?
Which keywords attract users to your site?
On which pages do website users spend most of their time?
Do your current users match your target audience profile?
Take everything you’ve learnt from the user journey analysis and use it to inform the interface of your website rebuild. Everything from page paths, the navigation menu, your key landing pages and content, to new on-site features and tools can all be optimised with a little bit of user journey research.
Step 4: Seek inspiration and analyse competitors
A flower might not think about competing with the flower next to it — but you sure should.
Analysing competitor performance is fundamental for seeing where you currently stand in the marketplace and what you can do better to take the crown.
I’m not saying scrutinise your competitors websites and then copy them — Do NOT do this. Copying the work of someone else is a race to the bottom, not the top.
Instead, use competitor analysis as a way to see what other people in your industry do well or where there may be gaps that you can fill.
Audit the competition by looking at their:
Organic performance - Check how many keywords they rank for, what estimated monthly traffic do they receive, how many backlinks they have, and other SEO factors
Website performance - Conduct a Google Lighthouse audit to review their Lighthouse score and see how well they perform across each of the metrics
Content performance - Review their website content to see what content they currently produce, and whether there are any gaps in your content strategy
UX performance - Analyse the UX performance of their website by looking at the user journey and the usability of web pages and features
Once you’re done, you should be able to clearly determine how your site fares against other players in your industry. You’ll know what competitive advantages your competitors have, and where they’re falling short.
Everything you’ve learnt here can then be used to make sure you design a site that blows the competition out of the water by prioritising UX and site performance.
Step 5: Choose the right website building approach for your needs
Sure, you already have a website. But when did you last check that it does everything you need?
Doing a website rebuild is the perfect time to audit your current website platform and check if it still satisfies your business needs.
When building a website, you typically have three approaches to choose from:
No-code websites - examples of no-code website platforms include Webflow, Wordpress (usually), and Squarespace
Traditional websites - examples of traditional website platforms include Wordpress and Drupal
Headless websites - examples of headless websites include Next, Gatsby or Nuxt sometimes paired with Prismic, Sanity, Contentful.
Each of these options come with advantages and disadvantages.
No-code website builders offer the easiest way to build a simple website using visual website editor platforms. However, these no-code platforms tend to be highly restrictive, meaning you’re often limited to the core functionality that comes with the platform.
Traditional CMS platforms, such as Wordpress and Drupal, are easy to use and well-integrated with other apps. However, they often lack room for creativity and customising these platforms can be expensive and complex. If you’re using a traditional CMS, now might be the perfect time to make the switch to headless.
By switching to the headless approach to building websites, you can leverage an easy-to-use platform while also gaining improved customisation and water-tight security. Headless websites are extremely flexible, allowing you to build a site that is a true reflection of your brand.
If you’re a forward-thinking organisation looking to make waves in your industry, using Jamstack technologies might be just the solution for you. Jamstack sites provide a ton of benefits, so you can tap into faster site speeds, improved stability and security, easier maintenance, cheaper running costs, and increased scalability, among other things.
So, use this time to evaluate your platforms and see whether or not you could benefit from a new platform.
Step 6: Map out the navigation
Remember how I asked you to review your user journey earlier?
Well, we’re now going to take those user journey learnings and use them to map out the requirements for your site navigation.
Your website navigation serves a purpose. That purpose is to help your users find the information they are looking for.
So, you need to make sure your site is easy to navigate. It shouldn’t be like looking for the lost city of Atlantis.
When mapping out your site navigation, it helps to lay it out visually. You can use an online app, like Creately, to visualise your sitemap or you can get creative and draw it by hand.
The homepage should be the starting point of your sitemap. All of your most important pages should be linked to from your homepage.
From here, you’ll then want to create links between the pages underneath the homepage and related subpages. Web pages should be categorised and grouped together based on topic similarity. This helps ensure easy site navigation and a smooth-sailing user flow.
Any internal pages linked to within your site should also link back to the main category page. You’re essentially creating a logical spider web of internal links that help users get from A to B — and back to A again in case they want to traverse to C.
User journeys are wiggly so your site map needs to be as easy to use as humanly possible. Organise your site navigation logically so web visitors can find what they are looking for.
Your sitemap isn’t just beneficial for your website users. It will also make it easier for Google to crawl your site for SEO.
An SEO-friendly site navigation understands that less is more. Don’t overwhelm users with too many drop-down menus or subcategories. Keep it simple. If you do have a lot of content, you could use a mega menu to help streamline site content.
Cross-linking related pages together will also help strengthen the SEO potential of those particular pages by letting Google know they are related. When naming your navigation items, use the search terms your users would typically use when referring to these topics.
Step 7: Rewrite your content
At Skyward, we always recommend rewriting your content before you even touch the design.
Your design should fit the website content, not the other way around. By writing your content first, you can make sure that your website copy and design work together seamlessly.
When writing copy for your website, don’t be afraid to show off some personality. The days of boring, stuffy corporate websites are behind us — trust me. So, get creative and show off that sassy, funny, or charming personality of yours!
Remember to stick to the same tone of voice throughout your site, though. Continuity is key so develop brand guidelines to keep that tone of voice consistent from one page to the next.
While your tone of voice should be consistent across all your pages, your intent shouldn’t. When rewriting your website copy, tailor the intent to each individual page.
For example, if you’re a product-based business, your product pages will have a commercial intent. Content for these pages will be focused on encouraging users to add the item to their basket and move to the next stage of the checkout process. So, the intent behind these pages will differ from FAQ pages where you’re helping visitors solve a problem.
Tailoring intent helps you to better address your user’s problems and needs. You need to write copy that’s strategic, not just pretty-sounding.
Step 8: Redesign your site
Finally — it’s the time you’ve been waiting for! You can dive into redesigning your site.
This is where your website redesign really starts to take shape.
By this point, you should already have everything you need to visualise how your new site will look and perform. Use all of the research and information gained at the previous stages of this step-by-step guide to map out your website rebuild.
Remember to take into consideration your intended goals and audience for your website. Then design your website to these requirements.
While rebuilding your website, you should also pay close attention to the current site performance and any key issues that were highlighted during the initial site audit. Don’t forget to review that user journey too. Be constantly referring back to the user journey, you can ensure your new site design puts UX at the forefront.
Start your website redesign by creating a wireframe before you write any code. This wireframe lets you see all of the website features and functions.
Free from the distraction of colours, text and animations, wireframing lets you play around with the presentation of your new site. It’s a powerful tool for gaining a clear insight into page structure, website layout, functionality and user flow.
You can use your wireframe to test different interfaces and features based on how people interact with your site. You might play around with different button positions or menu layouts based on user flow.
Seeking feedback from stakeholders at the design stage is crucial. Wireframing your site rebuild and seeking feedback means you can catch problems before any coding takes place. In turn, you’ll cut down on revision time and enhance performance once the new site is live.
Step 9: Use a staging platform
Before you start on the web development stage of the website rebuild, you should set up a temporary URL or staging platform where you can test your new site design.
A staging site lets you experiment with your website content, functionality and design without interfering with the live website. This means your current website can stay up and running while you work on the rebuild in the background.
Using a staging platform is key for minimising website downtime. When you build your site in a staging environment, you can then instantly deploy the finalised design to your live site.
Another benefit of using a staging site is that you can test if the new site design is working as intended before going live. This will help eliminate any potential bugs or issues. Because nobody wants to launch their new website, only for it to be riddled with bugs and tech issues. Ugh.
Step 10: Build your site
Now that your design is approved and you’ve set up a staging platform, it’s time to see the new design come together.
You can now code the new site, turning those wireframes into reality. Remember to use the staging platform so you don’t disrupt your current site performance or user experience.
Web development is complex. So, we always recommend building automated testing into any web development project. The testing phase lets you verify that everything is working as it should as you go, and protects you from missing errors that pop-up as changes are made in the future.
Some tests you might want to run include cross-browser functionality, accessibility, and responsiveness. You can also set up lighthouse to automatically run on every deploy to ensure you’re getting the best performance every time. Putting your redesign through tests means you’re ruling out any potential problems before the site goes live. So, don’t forget that all-important testing stage.
Step 11: Optimise your site as you go
Whatever you do, don’t forget to optimise your website rebuild.
Once you have finalised your website redesign, take time to optimise your new site across UX, SEO and performance. These optimisations make sure your website is performing at its full potential.
Site optimisation is an ongoing process. It’s not just a one-and-done activity. As new technologies emerge, the way people interact with websites is constantly changing.
Optimising your site for organic search will strengthen the ability for your website to show up in search engine result pages for your targeted search terms. Activities you may want to consider when improving the SEO of your site may include keyword optimisation, voice search, meta-data and local search. Site speed and responsiveness are also crucial factors that impact SEO.
User experience optimisation is focused on making sure your site offers users the best possible experience. Tactics for improving user experience include providing engaging content, having a strategic layout, removing any annoying or distracting elements, and making your site easy to use.
Remember, site optimisation is an iterative process. You’ll want to keep creating, testing, and optimising for as long as your site is alive.
Step 12: Launch your site
You’ve done your research, mapped out your design, written the code, tested it works, optimised it for success. What next?
It’s launch time!
After auditing, planning, designing and developing your new site design, you’re ready to go live. Make sure you have sign off from stakeholders and that you have access to everything you need to deploy the new site design.
You can go down a few different routes when deploying your site. At Skyward, we’re big fans of Netlify & Vercel for hostimg our sites. It creates a frictionless experience that makes the deployment process quick and easy.
Once launched, do another sense-check to make sure everything is working properly. Make sure all your automated tests are passing too.
Post-launch, keep up to speed with site updates and continue investing in the maintenance and performance of your website.
Oh, and if you’re planning to deploy a new site… try to avoid fridays.
Revive your website with a redesign
Every website redesign is unique. But this 12-step guide should give you a good insight into the foundations of any rebuild project.
Follow these steps and you’ll be one (or should I say 12) steps closer to achieving your goals as an online business. You’ll improve user flow, cinch more sales, and reduce friction by taking time to invest in a well-designed website.
But keep in mind that any good website isn’t done once it’s launched. There are always improvements to be made, as technology advances or as you refine your audience it’s important to keep tweaking and updating your website over time to achieve the best results.
If you’re ready to uncover the full potential of your website, we can help. From conducting an initial website audit to managing your website rebuild project from start to finish, we’re here to be your web development heroes.
Get in touch to see how we can help you build a website that’s geared towards success.