How to successfully redesign a WordPress website

Launched a few years ago, your website is starting to show its age. You're convinced of it: It needs a good coat of paint. 

Its content is outdated. The mobile display is poor. The pages load too slowly. Worse still: the traffic generated from Google is dwindling.

No doubt about it: a WordPress website redesign It's necessary! Yes, but here's the thing. You know that this technical operation can be very dangerous if it's not carried out correctly. 

This article is here to help you. By the end of reading it, you will know everything. Steps to follow for a successful career makeover without damaging your existing site. 

And thanks to our comprehensive tutorial, suitable for both beginners and more experienced users, you will haveconcrete examples of what to do AND what not to do during a redesign.

What is a WordPress website redesign?

A WordPress website redesign is a technical operation aimed at improving and modernizing a website with two main objectives: 

1. Adapting to the needs of your users.
2. To meet your objectives : to make more sales on your online store, to present your services more clearly, to get more quote requests, to encourage the downloading of a white paper, to boost subscriptions to your newsletter etc. 

Initiating a redesign process can allow you to take action on several levels: 

• modify the user interface (UI) for improved ergonomics and clarity in navigation; 
• improve performances (page loading speed) to make the user experience (UX) more enjoyable;
• optimize natural referencing (SEO) to get more visits and maximize traffic to your pages; 
• update your content to reflect the changes that have occurred in your core business; 
• integrate new features.

Depending on your expectations, technical skills, available time and budget, you can take charge of one or more of the aspects presented above. 

The question remains: how to manage all of this simultaneously? Find out how in the following sections. 

Phase 1: What are the steps to follow before a redesign?

Foreword The various steps for redesigning a WordPress site presented below constitute a kind of ideal framework to follow. Consider them a comprehensive roadmap that can nevertheless be adapted. For example, you won't need to create mockups, wireframes, or integrate a new design if you "simply" want to improve your website's SEO. Be flexible and agile, and adapt the methods presented in this article to your specific context. 

Define the objectives of the WordPress website redesign

The importance of auditing the existing situation 

First, it is essential to identify Why you want to carry out a WordPress website redesignThis will allow you to determine if this operation is necessary and justified. 

For this, we recommend that youevaluate your existing site via a WordPress auditYou will identify roadblocks and areas for improvement.

To help you, focus primarily on the "basic" building blocks of a professional and high-performing WordPress site, asking yourself questions on several levels: 

• the structure and the web designIs the navigation intuitive? Is the ergonomics well thought out? Does the web design reflect your brand image? Is it adapted to your graphic charter?
• the performanceDo your pages load quickly? Use a tool like Google Insights PageSpeed to find out. 
• SEO strategyIs the traffic generated on your site meeting your expectations? Has it been declining for several months? Is the website optimized for search engines? Do you use tools such as... Google Analytics and Google Search Console to analyze your traffic and identify blockages. 
• Security. Your CMS Is WordPress protected against viruses, malware, and other security vulnerabilities? Have you implemented best practices in this area?
• the contentsDo your pages accurately reflect the evolution of your business? If you have a blog, do your articles meet the search intent and needs of your users?
• fonctionnalitiesDo you want to add new options (creatingan online store with WooCommerce(e.g., transition to multilingualism)? Are the ones already present on your site still in working order?

Also consider the time and budget

Depending on what you discover, you will be able to more easily define your aspirations, which you can then list in a collaborative work tool such as Google Docs, Google Sheets, Trello ou Asana.

For example, if you feel that your site is not receiving enough monthly visits, which is negatively impacting your conversions, the main objective of your WordPress site redesign will be to improve the SEO strategy.

At the same time, don't forget to consider the budget you want to allocate to your redesign. For example, the operation will be more expensive if you hire a professional than if you do it yourself.

Also consider including the costs of different tools, such as WordPress or a page builder like Divi Builder or Elementor, if you want to create a new web design.  

Finally Link your objectives to the time factorWhat is your availability to carry out this project, and above all, what is the timeframe within which you can complete it?

Our tip For even greater clarity, set objectives with SMART indicators (specific, measurable, achievable, relevant, and time-bound). In the context of a redesign whose main objective is to improve organic search engine optimization (SEO), a SMART objective could be: "I want to increase organic traffic to my blog by 30% during the first half of this year." 

Create the new structure of your site

The tree structure

Once you have defined your objectives, tackle an essential element of WordPress site redesign: the structure of your website.

The latter refers to how your content is organized, categorized, and linked together.

This "skeleton," organized in the form of a diagram, allows, in particular: 

• to improve the user experienceby allowing your visitors to easily find what they are looking for through smooth and ergonomic navigation;
• to improve SEOThis is achieved through a hierarchical structure organized around well-defined themes. This makes it easier for search engines like Google to explore and index the site.

To design an effective site map, base your work on your previously defined objectives. Then, consider your target audience to meet their needs and solve their problems.

To do this, create a persona – a fictional representation of your ideal customer – usinga dedicated tool like this one. 

Finally study what your competitors are offering and take inspiration from what works well for them to apply it in your own way on your own WP site. 

Regarding the tools to use to shape your tree structure, we recommend using dedicated software such as GlooMaps (free), MindMeister (freemium), or DYNO Mapper (paid). 

Wireframes and mockups for your WordPress website redesign

Next, move on to the step of graphically representing your tree structure. This will allow you to visualize how your site will look web with varying degrees of detail. 

In order, we first recommend that you design wireframesThese are functional and schematic sketches showing the different structural elements of a page.

They allow you to represent the user interface (UI) in a clearer and more detailed way than with your tree structure.

You can design your wireframes with online tools like mockflow (free), or Balsamiq (paid).

If needed, it is possible to integrate your design into mockups using a tool like Figma (freemium) Sketch (paid) or Adobe XD (paid).
This step will be essential if you wish to carry out a complete graphic redesign of your website. In this case, consider redefining or designing a graphic charter. 

If you only want to tweak certain visual elements of an existing theme, you can skip this mockup stage. It's up to you. 

Pro tip In addition to the tools you'll need to work on your website's design, consider the technical solutions you'll use on your redesigned site. If you're changing themes, opt for a fast, lightweight, and scalable one. Astra ou GeneratePressAlso consider the plugins you need (for example, consult our selection of the best security extensions).  

Develop a redirection plan

When redesigning your WordPress site, there's a good chance that changes will occur in your URL structure. This will be the case, for example, if: 

• you delete pages; 
• you create new pages; 
• you modify the URL of certain pages, categories or tags; 
• you are switching to HTTPS etc.

In order to maintain your current traffic and avoid the occurrence of 404 errors that will penalize your SEO efforts and user experience, creating a redirection plan is essential.

To create it, use a standard Excel file divided into three columns. List the following:

• URLs subject to change (old URLs); 
• the new URLs (those that will be present on the redesigned site);
• Redirections to performA 301 redirect, for example, helps avoid a 404 error, while transferring the popularity of your old pages to the new ones. 

Pro tip : If you have a small site (showcase, blog) with a few dozen URLs, you can proceed manually. For larger sites, such as a large e-commerce site, opt for a complete audit using dedicated tools like Screaming Frog, Semrush ou Ahrefs. 

Create a specifications document

If you ever undertake a WordPress website redesign project for a client, we recommend compiling most of the steps we just presented in specifications. 

This is a written document that presents the major elements related to a project to create or redesign a WordPress site.

It details, in particular, the needs, constraints, ideas, concepts, and goals of the individual or company wishing to design or redesign a website. To learn how to set it up, Consult our dedicated guide on the subject..  

Now that your WordPress site redesign project is well defined, see how to technically launch the operations. 

Phase 2: Launching your WordPress website redesign 

Define and implement the appropriate work environment

The first piece of advice we can give you is to avoid at all costs – except for very minor adjustments – working on your live site. 

This way, you protect yourself against the possibility of encountering bugs and other malfunctions that could make your site unavailable and negatively impact your brand image. 

To gain peace of mind and work serenely, two main options are available to you:  

1. Redesign your WordPress site locallyThat is, on your machine. For this, use a tool like WAMP, Local News ou DevKinsta.
2. Use a development environmentYou can either work on a subdomain or subdirectory created in your hosting provider's administration interface, or set up a staging environment using an extension like WP StagingEg.

Pro tip : If you are a beginner WordPress user or resistant to technology, starting with a local working environment is a good compromise. 

As for the actions to be taken, it will all depend on what you want to do: 

• either start from scratch and create a new siteIn this case, you will need to install WordPress, configure it, and set up your theme and plugins. This article summarizes what you need to do. ;
• either copy an existing site and modify it depending on the intentions you defined earlier. To copy your site from the online environment to the local machine, use a plugin such as All-in-One WP Migration ou Duplicator. 

Pro tip Before performing any technical operations, back up your website (files + database)! In case of a problem, you can restore it with a single click. You can usea WordPress backup plugin like UpdraftPlus, or a complete maintenance solution like WP Umbrella. 

Integrate the design, content, and features

Once your work environment is ready, the range of actions to be taken will depend, once again, on your initial objectives.

While it's impossible to detail every possible scenario here, here are a few general cases that can guide you when it's time to take action: 

• implement the design created on your mockups at the site level of the site to be redesigned. If you are working with the WordPress site editor (Gutenberg)For example, you will need to create blocks and other page templates. The logic will be essentially the same with a page builder;
• add the features of your choice : contact form, search bar, pop-up windows, e-commerce store, GDPR compliance etc. To do this, configure and test the appropriate plugins;
• integrate and/or modify your contentWhether it's on your strategic pages or your blog, we're thinking of text, of course, but also images and videos. Be mindful of their file size! Optimize your images, for example, using a plugin like Imagify.  
• Implement SEO best practices (meta tags, optimized URLs, XML sitemap, robots.txt file, etc.). For this, use a dedicated extension like Yoast SEO, Rank Math ou SEOPress.

Pro tip Before creating new content or modifying existing text on the website being redesigned, develop an SEO strategy. For example, consider the keywords you want your target audience to be found for using dedicated tools such as Semrush, Ahrefs, or Google's Keyword Planner. 

You're nearing the end of this tedious WordPress site redesign process. Even if everything seems to be going smoothly, it's wise to take a few more precautions before officially publishing your new site online. That's the focus of the final section of this article. 

Phase 3: Publishing the redesign in 4 steps 

Move your test site to pre-production (and test it)

To begin this third phase of the WordPress site redesign, move your test site to a pre-production environment (also called staging).

In this case, you switch the site you have just redesigned locally – for example – to an online server (at your trusted hosting provider) which has the same characteristics as the one your site will have once in production.

Only you and your client will have access, not your visitors. You'll be able to test and ensure everything works correctly before the final launch. 

Here are the steps to follow to create a pre-production environment: 

• back up your production site (files + database); 
• create a pre-production environment by configuring either a subdomain (e.g., staging.yoursite.fr) or a subdirectory (e.g., yoursite.fr/staging);  
• clone your site to the staging environment either manually, or using one of the migration extensions mentioned previously; 
• test your siteIn IT jargon, this is called acceptance testing. Check that all the site's functionalities work correctly (buttons, links, forms, menu, plugins, etc.). Take this opportunity to check that your site displays correctly on the main browsers and on different screen sizes (responsive design).

Put your site into maintenance mode 

Have you performed the usual checks? It's time to put your old site into maintenance mode, just before moving from pre-production to production. 

Putting your site into maintenance mode has several advantages:

• you do not degrade the user experience of your visitors, since your site will be unavailable during the transition (from pre-production to production);
• you communicate transparently with your target, informing them that a maintenance operation is in progress for a certain period of time;
• if errors or bugs occurNo one will know (except you) if your site is under maintenance. This prevents you from damaging your brand image. 

What solutions are there for switching to maintenance mode during a WordPress site redesign?

To put your site into maintenance mode, you can: 

• use a dedicated pluginé as in SeedProd ou Maintenance ; 
• use a maintenance page template suggested by your favorite theme or page builder; 
• add a piece of code in your .htaccess file, or in the functions.php file of your child theme; 
• Enable WordPress maintenance mode on the administration interface provided by your hosting provider, such as cPanel.

Deploy the new website online

This time, everything is good. You can (finally) migrate your website online by following these steps: 

• save your siteWe keep repeating ourselves on this point, but you can never be too careful;
• Send the pre-production site to the production environment. Are you an experienced technician? You can do it manually if you're confident in your abilities. To avoid mistakes and speed things up even further, consider using a plugin like All-in-One WP Migration or Duplicator. 
• reactivate your third-party extensions and tools, such as your caching, security and traffic analysis plugins like Google Analytics; 
• Redirect all URLs contained in your redirection planTo perform a 301 redirect (the most common type), use either the plugin Redirection, or from your favorite SEO extension (Rank Math, for example, offers this option for free); 
• re-test your website Using the advice given previously, check that everything is configured correctly and test everything!

Pro tip Some migration plugins limit the size of files you can migrate. If you have a website with significant resources, you may be limited by their free version. In this case, upgrade to their premium version or seek assistance from a professional. an expert like WP Maintenance to migrate manually.
And if possible, don't launch your website on weekends or the day before a weekend. If something goes wrong, you'll be in trouble…

Keep track of your WordPress website redesign

Once your WordPress website redesign is live, remember to perform some essential post-launch actions: 

• monitor the performance of your site, especially in the days and hours following the redesign. Quickly fix any bugs or problems identified; 
• pay attention to your users' feedback, which can alert you to any potential malfunctions;
• monitor your site's performance (loading speed, SEO traffic, conversions etc); 
• make sure regular maintenance of your WordPress siteBack up your site frequently and update it as soon as possible (plugins, themes and WordPress Core); 
• communicate about the redesign of your WordPress site via your preferred channels: newsletter, social networks, etc.; 
• Check that you have achieved your pre-redesign objectives.Then adjust your strategy based on your results.

Summary

Thanks to a WordPress website redesign, you will modernize and optimize your website.

This technical and time-consuming operation involves in-depth analysis, careful planning, and agile deployment to ensure a smooth transition to an improved and high-performing site.

In this article, you have discovered all the steps to follow to successfully carry out an effective and professional redesign before, during and after its launch. 

As you had chance to see, adherence to best practices and strong technical skills are necessary to avoid breaking your site and losing all your current traffic. 

You wish to be advised and supported by a recognized agency specializing in WordPress website redesign ? 

As specialists in the field, WP Maintenance will offer you a tailor-made solution that will meet your needs with speed, professionalism and efficiency.