Websites are changing at an exponential rate.
And website owners in 2022 can no longer afford to keep their sites looking the same for months or years on end; but how do you redesign a website so that it’s actually worth the investment of time and money?
This article will show you EXACTLY how to redesign your website, including how to build a plan with your business goals at the forefront of your website strategy, manage the web design process, translate the mockups into a fully functional website, and avoid some common pitfalls I’ve personally fallen into in my 10+ years redesigning websites for businesses and entrepreneurs.
I’ve refined this process to help me redesign websites that get hundreds of thousands of monthly visitors, and generate thousands of dollars each day for the business that own them.
But it’s also the exact same process I follow when I’m redesigning even the smallest, simplest of sites; that way I know without a shadow of a doubt that the redesign will be successful, not based on my opinion, but based on real conversion data and metrics we can (and will) measure.
What Is A Website Redesign?
A website redesign is a process that aims at improving a website’s user experience, primarily by re-evaluating the existing navigation, layouts, content, and technology stack.
During your redesign, the goal should be to improve conversions, optimize speed and technical performance, and make sure your website is fully responsive on any device, screen size, browser, or operating system.
If done correctly, a successful website redesign can help you find new clients, generate more money online, and give you a way to market yourself AND your businesses 24 hours a day, 7 days a week, 365 days a year.
Websites typically have a front-end (what users see) and a back-end (the functionality and code), that need to be considered when planning any website redesign project.
More importantly, a website needs to support your business’s growth so that you have the ability to generate revenue with the help of online channels (like this blog) – after all a website that doesn’t make you money isn’t worth much.
So let’s look at the specific things you’ll need to consider when planning a website redesign.
- Your Business Objectives
What does your business need from your website?
- Analytics and Conversion Data
What data do we have to better understand our users?
- Traffic Acquisition Strategy
How are we going to get people to the website?
- Navigation Structure
How are people going to move around the website?
- Content Hubs & Spokes
How will you organize your content for ease of use and indexability?
- Marketing Funnels
What value can you give users to turn them into leads, and how will you nurture them until they’re ready to buy from you?
- Accessibility Issues
How will you ensure everyone can use your website, regardless of disability?
- Technical Performance
How will you make your website fast and make sure it’s up to current web standards?
- Overall Usability
How can you make your website as easy to use as possible?
- Monetization Strategy
How will your website make you money?
Like a car with a faulty engine, or a bike with a flat tire, a website without a solid strategy won’t get you (or your business) very far.
What are some of the benefits of website redesign?
An overhaul of your current website may seem scary, but it can have a huge impact on your business.
Here are some of the benefits to redesigning your website:
- Higher Conversions and More Qualified Leads
- Lower Bounce Rates and Exit Rates
- A more accurate representation of your brand online
- A better User Experience for potential customers
- More traffic from SEO and higher rankings in the SERPs
- Improved performance and faster page speeds
- An edge over competitors with dated websites
- A website that supports your business goals
Remember, your website is an important asset, so you need to keep it up-to-date so that it supports your business growth and rewards you with a constant stream of new customers.
Why should you redesign a website?
Here are some common situations where your website may be hurting your business, rather than helping it succeed:
- Your website does not accurately reflect your brand, it’s purpose, and the value you create for your customers
- The products or services on your website no longer reflect your current offering
- The customers you are selling to, and/or the problems they have, changed since the website was built
- Your sales team doesn’t use your website to provide prospects with relevant information or answer questions about your product or service
- Your website’s design looks dated, inconsistent, or just doesn’t appeal to your target customers
- Content on your website is old and hasn’t been updated in months (maybe even years!)
- The posts and pages on your website receive little to no traffic or conversions
- The website’s navigation is difficult to use and has way too many options
- It is unclear what action you want users to take when they land on your website
- Important pages have High Bounce/Exit Rates and a Low Average Session Duration
- The copyright year in the website footer is not the current year
- Your website takes a long time to load or is being penalized by Search Engines due to performance issues
- When looking at your top 5 direct competitors, your website is NOT one of the better looking ones
If you’ve got more than a couple of these issues on your website, you probably need to consider planning a website redesign.
Website Refresh vs Website Redesign
Maybe you only have 1 or 2 of the issues I described above – in that case you may want to consider a simple website refresh instead.
The difference between a refresh and a redesign is that a website redesign usually involves large changes to your website’s functionality and tech stack, in addition to the look and feel of the website.
A website refresh tends to includes smaller changes, like updating fonts, colors, and sometimes even themes – but the overall functionality and technology stack typically remain unchanged.
Still, there may be times where you need to redesign specific pages during a refresh to add new functionality, but a website redesign will usually include major changes from the outset, like changes to the navigation, footer, and other core templates and features.
Many times, this means building a custom theme rather than extending the existing one.
Unlike a website refresh, website redesigns are usually larger in scope because you’ll need to consider not just how the website looks, but also how it performs technically, with additional considerations like speed, accessibility, indexability, and 3rd-party integrations.
What you call it isn’t really important – what’s important is knowing how to make your website more effective so it can help you make more money.
Questions To Ask Before You Redesign Your Website
Before you start pushing pixels, it’s a good idea to start by doing some basic research to help you better identify problem areas and potential improvements for your website.
I usually send over a questionnaire with 35 questions about the brand, the business, it’s competitors, their customers, and their traffic, website, and marketing strategy to help guide me during the redesign project.
Some of the questions I ask before redesigning a website are:
- What kind of website do you have? (i.e. ecommerce, lead gen, affiliate, local, etc.)
- What need or business goals are you hoping to accomplish by optimizing your website?
- How does your business currently utilize your website? i.e. sales tool, online lead generation, event announcements, press releases, etc.
- How do you make money? What are your best selling services and products?
- What is your Unique Selling Proposition (USP)? What are the benefits customers can expect from working with you vs a competitor?
- Who are your most notable competitors? What do you like and dislike about each?
- Who is your target audience and what problem are you solving for them?
- How are you acquiring users? i.e. organic search, referrals, paid media, etc.
- How are you capturing new website visitors? i.e. email newsletter, popups, contact form, chatbot, etc.
- How are you converting website visitors into paying customers? Describe your online sales funnel in detail.
- How are you getting users to return to your website? i.e. E-mail or SMS Marketing, Retargeting on Social Media, etc.
- What are some of the challenges you’re having converting users into paying customers?
- What are the most valuable pages on your website? Why?
- When someone comes to your website, what is the ONE thing you want them to do?
- What questions or complaints do you receive about your website from prospects and customers?
- What tools do you use for online marketing? Please describe your marketing stack in detail.
- What (if any) free resources do you offer users on your website? (i.e. case studies, whitepapers, templates, blog posts, etc.)
- What (if any) gated resources do you offer users to capture their information on your website? (i.e. free e-book, webinar, checklist, etc.)
- What (if any) resources do you send to users who are interested in buying your products or services? (i.e. sales deck, catalogues, brochures, etc.)
🛠 Download a copy of my redesign questions here: https://forms.gle/kxe6SRobrjEQHYVU6
Knowing the answers to these questions will give you a lot more clarity before starting your website redesign so that you can set clear objectives, understand your customer’s personas, audit the existing website, identify areas for improvement, and build a project plan to tackle your redesign more effectively.
Generally, we recommend auditing your website’s UX before starting a large website redesign project – this way you can start your redesign with a list of exactly what needs to be fixed.
How to redesign an existing website
The best way to tackle a large website redesign is with a plan and a process.
This 15 step website redesign roadmap was built to help you take any website and transform it into a conversion-optimized money-making online business.
Without it, you’ll be making changes to your website based on what you THINK will work.
Take it from me, that’s the worst way to go about it.
Instead, I’m going to show you a step-by-step process we follow for every single one of the websites we redesign.
This website redesign process follows a data-driven approach to help you systematically identify, document, and improve your website by focusing on fixing the right things.
The things that will actually impact conversions and boost your ROI.
So what are the steps to redesign a website?
- Determine Business Objectives
- Research & Competitive Analysis
- Analyze the Current Website
- Document & Prioritize Improvements
- Sitemap & Content Planning
- Identify Templates to Redesign
- Design Website Wireframes
- Mood Boards & Stylescapes
- High-Fidelity Mockups & Prototype
- Build a Website Style Guide
- Export Website Assets
- Develop the Website
- Quality Assurance Testing
- Performance Optimization
1. Determine Business Objectives
First things first – you need to get clear on what your business needs, and how your website fits into that equation.
Are you trying to sell more products? Find more qualified leads? Whatever your goals are, they need to be the cornerstone of your website redesign strategy.
Once you’ve established your primary business objectives, it’s time to set up some KPIs.
Setting up Key Performance Indicators can tell you whether or not the website redesign actually helped your business grow.
So let’s say your primary goal is to generate more online sales through your website.
The KPIs you’d want to measure are probably:
- Conversion Rates
- Average Order Value
- Average Customer Lifetime Value
If redesigning your website is able to boost these KPIs, you know that your redesign efforts were time and money well spent.
On the flip side, if you don’t measure the impact a redesign has on your website, you’ll never really know if it was a worthwhile endeavor.
That’s why setting business goals and KPIs upfront is the best way to get your redesign project off to a good start.
2. Research & Competitive Analysis
Next, we’ll need to do a bit of research to learn more about who your customers are, how they use your website, and how it stacks up against some of your biggest competitors.
I like to break this phase down into three parts: quantitative, qualitative, and competitive analysis.
Quantitative Analysis for Websites
A quantitative analysis usually has to do with numerical data (something that can be quantified), and for our purposes means reviewing and analyzing available data to learn more about what users are actually doing on your website.
This may include reviewing data from tools like:
- Google Analytics & Search Console
- Shopify or WooCommerce
- SEMrush or Ahrefs
The goal with collecting and reviewing quantitative data from your website is to develop a better understanding of how people are using the site, allowing you to identify your top performing pages and posts, where in the world your users are visiting from, how long they’re browsing the website, what your best selling products are, and even what keywords your competitors are ranking for that you may be missing out on.
Qualitative Analysis for Websites
On the other hand, a qualitative analysis has less to do with numbers, and instead focuses on what we can observe about how your website is being used by visitors.
This may include reviewing results from:
- Heat Maps
- User Interviews
- Session Recordings
- Usability Testing
- Focus Groups
The goal with reviewing qualitative data is to better understand user behavior and how it relates to your website’s overall usability.
Combining insights from both our quantitative and qualitative analysis will give us a much better understanding of what the problem areas are on a website, and what needs to be done to fix them.
Competitive Analysis for Websites
Before you dive into any website to start making recommendations, make it a habit to check competitors and market leaders first.
Not because we want to copy them (we don’t), but because we need to establish a baseline for the industry, and see exactly where the current website fits in when compared to the rest of the market.
Think of it like looking at all of the houses in a neighborhood before you start investing time and money into fixing your own home. This way you’ll naturally see opportunities to outdo them (or learn from their mistakes), which will translate directly to more money when it comes time to sell.
You should assume that prospects are looking at 3-5 competitors to see which one stands out to them and best solves their specific problem.
Try listing 3-5 direct competitors and making a short list of pros and cons from your customer’s point-of-view while reviewing their website on both desktop and mobile devices.
It’s important not to focus too much on comparing these competitors to your current site yet – instead, you should be comparing them against each other and the overall needs your users have.
If you want to take it a step further, rank your competitors from “most likely to buy” to “least likely to buy” – whoever is #1 is going to be the website to beat.
3. Review the Current Website
Now that you’ve taken the time to set up clear business objectives and conduct some basic research, you’re ready to start analyzing your own website.
Generally, you should look at a website’s usability, performance, accessibility, and responsiveness to find problem areas and potential improvements.
You’ll also want to make a note of what technologies and integrations are used on the website. You should be able to answer what content management system the website uses, and what digital marketing tools are integrated with the website before moving on.
Let’s get started.
Your website needs to be user-friendly and easy to use, so it’s worth spending some time performing some basic usability testing.
To start, you’ll want to identify all of the most important posts and pages on your website.
You should already have this information from the research you completed earlier.
To make things easier, I prefer to group existing posts and pages into templates – you may have hundreds of blog posts or dozens of case studies, but they likely all have the same layout and components.
So instead of looking at each blog post or case study individually, you can just group them into a template – i.e. a blog post template and a case study template respectively.
While I still recommend reviewing high-traffic pages individually – grouping them into templates will make the process easier for larger websites. It will save you time and keep you from making the same redundant recommendations over and over again.
Next, you’ll want to review each page template one-by-one, on both mobile and desktop devices.
To do this, you’ll need to conduct a heuristic evaluation – a fancy UX term that means you’re going to manually review the current UI (user interface) to find and document any issues or opportunities for improvement.
This way you can start to generate ideas for improving your website – just make sure to write down each and every idea you have – we’ll sort and prioritize them all later.
What you use doesn’t matter (you can even use index cards or sticky notes if you want to go analogue) – what’s important is getting everything out of your head and into a tool we can use to organize and group similar suggestions.
Here are a few things that you should be looking for during your usability test:
- Company Information
- Clear Value Proposition
- Call-to-action (CTA) on every page
- Lead Magnet
- Social Proof
- Frequently Asked Questions
- SEO Friendly URL Structure
- No Broken Links or Errors
For best results, try to have at least 2-3 people conduct a usability test for your website.
This will give you a chance to look for common issues reported by the testers. If you can’t get anyone else on your team to help you audit your website’s usability, you can pay for testers using a tool like usertesting.com or just run the initial usability test yourself.
While many of the improvements for your website will likely come from your usability tests, the technical performance of your website is arguably just as important, especially if you’re paying for ads or ranking for high-volume keywords.
That’s why you should always test the performance of your website before it gets redesigned.
An easy way to do this is to use a tool like Page Speed Insights, GTMetrix, or Google’s Lighthouse Tool. They’re all free to use and will give you valuable information about the performance of your website and what you can do to improve it.
Check your website’s performance: https://web.dev/measure
If you see a suggestion, you can expand it to learn more about how to fix the issue. Google’s Lighthouse tool is smart enough to make platform specific recommendations, which is great because it’s free.
Most free performance testing tools will only allow you to test a single page at a time though. I recommend testing high-traffic pages individually, or at the very least testing 1 of each major page template.
Taking the time to check for performance optimizations will give you an opportunity to set up a benchmark for the website you’re about to redesign – it’s important that website performance does not worsen because of a redesign, or you’ll end up with lower rankings and fewer conversions.
If done correctly, a website redesign can be an excellent opportunity to improve a website’s speed, indexability, and overall performance so that you’re not just getting a website that looks better, but one that works better too.
Website accessibility guidelines (like WCAG and W3C) exist to protect people who may have trouble accessing websites and applications due to their impairments. For example, low vision may require someone to use a screen reader with text-to-speech functionality and a braille keyboard to access your website, rather than the standard monitor, mouse, and keyboard combo you’re probably used to.
Your website needs to be built so that ANYONE can use it, whether or not they have a disability or use assistive technology devices. For some countries like the U.S and Canada, certain types of websites have very strict guidelines when it comes to accessibility – requiring websites and applications to work equally for everyone.
💡 Tip: Research the specific laws and best practices for web accessibility in your own country.
Failure to comply with those guidelines may leave a business open to legal action, which can be very costly to deal with. That’s because there are laws protecting the civil rights of disabled persons for certain “necessary” services, like schools, parks, educational facilities, government buildings, and even businesses.
💡 Tip: Research the specific accessibility requirements for your kind of business. Based on the type of business you run, you may have more strict, or more relaxed accessibility standards.
That’s why before (and during) a website redesign it’s important to test for existing and potential accessibility issues. It will give you a chance to rectify them on your current website, and give you the opportunity to fix them during your website redesign.
Some things you’ll be able to fix during the design phase, like color contrast or font sizing issues.
Others you’ll need to fix during the development phase, like making sure your website can be navigated using only a keyboard, and that the semantic HTML has been optimized for screen readers.
⚙️ Paid Tool Recommendation: accessibe.com offers an automated web accessibility tool that will automatically make your website compliant. Price starts at $49/month
The easiest way to check for issues on a live website is to use Google’s Lighthouse tool and check the accessibility section of your report. Here you’ll see a list of exactly what needs to be improved and a few other things to check manually.
Test your website: https://web.dev/measure
Unfortunately, there are some things that will need to be tested by a human, so I recommend you read this guide from Google or work with a professional if you want to make sure your newly redesign website passes the accessibility standards in your country.
Your website may potentially be loaded on hundreds of different devices, all with their own operating system, browser, and screen size to optimize for.
But it can be overwhelming to even try to design and test for all of these sizes, mainly because there are new ones constantly being added with technology evolving at dizzying speeds.
That’s why your website needs to be fully responsive, adapting how content is displayed based on the type of device and the screen resolution so that it looks great no matter where it’s being viewed.
Responsive web design allows layouts to adapt to various screen sizes using media queries in the CSS stylesheet, and some basic responsiveness testing can help you figure out what parts of your website may need to be improved.
If you have an existing website, the best thing to do is look at any available analytics data to find what percentage of users are visiting on mobile vs desktop vs tablet devices. If you dig a little deeper, you should be able to find the most commonly used operating systems, browsers, and screen sizes as well.
💡 Paid Recommended Tool: browserstack.com allows you to test your website on virtual devices, allowing you to simulate various operating systems, browsers, and screen sizes.
Let the data dictate where you spend your time testing – if your resources are limited, prioritize testing screen sizes that are most commonly used to access your website first. If mobile devices make up a large majority of traffic make sure those screen sizes are prioritized during your responsiveness test.
Google Analytics can show you the most commonly used screen sizes when users visit a website. You can access this report by clicking on Audience > Technology > Devices and then selecting Screen Resolution as the primary dimension.
Here’s a video I made to show you how I use chrome dev tools to do some basic responsiveness testing based on data from Google Analytics reports.
4. Document & Prioritize Improvements
Now that you’ve completed your analysis of the current website, you should have a list of issues and optimizations that need to be documented and prioritized.
The best way to do this is to create a simple spreadsheet where each recommendation will live.
For each recommendation, you should include:
- A description of the task to be completed that resolves the issue
- The estimated impact it will have on conversions and on your business objectives
- The amount of effort you estimate it will take to complete the task
- The type of person who is needed to complete this task
Once you’ve built out the full list of tasks to complete for your website redesign, it’s time to organize them into buckets based on where they sit within the effort impact matrix.
An effort impact matrix is a way of organizing tasks into categories by the amount of effort it will take to complete them, as well as the estimated impact they will have on business objectives.
Using this matrix, you can then prioritize tasks by sorting them according to the following:
– Impact: the significance this change is expected to have on achieving your business goals
– Effort: The amount of effort required to complete the task
For each task, see where they sit on the graph and group them into one of the four following buckets:
- Quick Wins: High Impact, Low Effort
- Big Projects: High Impact, High Effort
- Minor Fixes: Low Impact, Low Effort
- Long-Term Considerations: Low Impact, High Effort
Your website redesign project will likely be made up of tasks categorized as “Big Projects”, whereas tasks from “Quick Wins” or “Minor Fixes” may be fixed immediately on your live website or delegated to the redesign project.
Any tasks that require a lot of effort and will have little impact on your business should be removed from your website redesign plan until the conditions in your business make it a more pressing problem to solve.
5. Sitemap & Content
Before you start pushing pixels it’s worth spending some time figuring out your new website’s ideal structure.
A website’s structure can be determined by the internal links and it’s hierarchy as it relates to the root (also known as the home page).
A good practice is to group similar content together, both within the navigation and using subfolders (i.e. portfolio pages may be grouped in a subfolder by adding /portfolio/ in the permalink structure, while blog posts about a similar topic may be grouped using categories).
You should also make note of what major content types and categories exist on the website. For larger sites with tons of content, you may even want to consider implementing a hub-and-spoke content model by creating pillar pages to house links to other related pages on your website.
Once you have a good idea of how content can be grouped, I recommend creating a sitemap diagram to illustrate your website’s information architecture. You can use a sitemap tool like slickplan.com, a diagram tool like lucidchart.com, or you can even do it inside of a spreadsheet or with pen and paper.
🛠 I like to use octopus.do to build out visual sitemaps quickly. Plus it’s free.
As long as you’re taking the time to plan out your website structure ahead of time, you’ll be in a much better position when it comes time to start designing.
That’s because your website’s Information Architecture (IA) will directly inform the User Interface (UI), so you should always start by building a website sitemap before any wireframes or mockups are done.
The way you structure your website will also impact your crawlability and indexability, which can significantly affect your ability to rank in search engines if it’s not considered during your redesign.
6. Identify Website Templates to Redesign
Once you’ve ironed out your sitemap you’re ready to start planning the layout of each major page template.
Notice I said template, not page. That’s because you don’t need to design each and every page individually – otherwise it would take FOREVER for larger websites with hundreds of unique posts and pages.
Instead, you need to identify unique templates by finding pages that have similar layouts, with patterns and components that are often repeated.
So for example, you may have a website with 100 blog posts, 10 services, 30 case studies, and a home and about page.
Instead of designing 140 pages one by one, we can instead break up the work into just a handful of templates:
- Home Page Template
- About Page Template
- Blog Post Template
- Service Template
- Case Study Template
- Default Page Template
- Utility Page Templates (404, Search Results, Author Archive, etc.)
Now that you’ve identified the templates that need to be designed, you can start creating low-fidelity wireframes.
7. Design Website Wireframes
You wouldn’t try to build a house without a blueprint, right?
Well, you definitely don’t want to try to redesign a website without first figuring out the User Experience.
That’s why the first version of your new website should be designed as grayscale wireframes.
These are typically designed in black and white so you can quickly block out where content and other media is going to live on the page without having to worry about making it look beautiful.
We will be purposefully stripping out the fonts, colors, and imagery in this step to help us focus on the layout, call-to-actions, functionality, and messaging of each page template.
Typically, designers like to design websites mobile-first, starting with the mobile design and then translating that into the desktop version.
While your mobile website is extremely important (since Google uses mobile-first indexing), you should take a look at your website’s analytics data to determine the device breakdown for your audience. If 90% of users are on desktop, start with a desktop-first approach instead.
Either way, your website needs to be fully responsive. In keeping with responsive design best practices, you should design (at the bare minimum) both the desktop and mobile versions of your website.
Once you’ve figured out the User Experience (UX) of each of the page templates you’ve identified, you can move on to integrating your brand guidelines on your new website layouts.
8. Mood Boards & Stylescapes
If you’re redesigning your website from the ground up, chances are you may be looking for a fresh new look and feel.
I recommend creating a mood board to help you nail down the new visual style of your website before you start designing the new User Interface (UI).
There are tons of different tools you can use for building a mood board, but I personally use milanote.com since it’s easy to collect and organize different kinds of references, like screenshots, videos, notes, and even comments if you’re working in a team.
Just collect screenshots of websites you (and/or the project stakeholders) might like and use that to figure out what direction to take with the design of your new website.
If you want to take things a step further, you should consider developing stylescapes.
A stylescape is a collection of brand assets (like fonts, colors, logos, imagery, iconography, etc.) that are combined to help explore a brand’s potential visual aesthetic and guide their marketing design.
It’s an especially helpful exercise if you’re rebranding or looking to push the current limits of your brand’s aesthetic.
Building a stylescape before designing the UI will help us define the characteristics that will make up our brand’s visual communication, and advise our designers on how to best represent our brand when designing our new website.
I recommend creating 2-3 stylescapes so you have a chance to explore a few different styles for your new website design before having to commit to any one direction.
9. High-Fidelity Mockups & Prototype
Once you’ve ironed out the UX for your website and established a direction for the design, you’re ready to start building the UI.
The most common way to do this is to create mockups of your new website, typically with a screen design tool like Figma or Adobe XD.
You’ll be applying brand assets to your grayscale wireframes such as logos, colors, fonts, images, and iconography to the wireframes you created.
These mockups will be handed off to whoever is developing your website, so you’ll want to make sure to design not just flat mockups, but also any interactions or special functionality.
For example, what happens when you hover over a link or a button? Does it change color?
Your developer should not have to guess how things will work on your new website.
That’s why I always recommend creating interactive prototypes that you can click and interact with as if it is an actual website.
This will give you a chance to test your website’s design and ensure everything makes sense before spending tons of time and money getting it built.
10. Build a Website Style Guide
Before pushing your design off to development, you should document the visual direction of your website with a Website Style Guide.
This will help set up rules and guidelines for future designers to reference.
By defining reusable styles early on, you’ll save yourself a lot of time when you’re developing your website theme or designing new pages.
You’ll also ensure that the brand is represented consistently throughout the design by avoiding mismatched fonts, random uses of colors, and easily avoidable inconsistencies in your website’s UI.
At this phase, you should know that your website style guide is going to be subject to change.
It should serve as a starting point for all of the UI designs you’ll be working on – but while designing you may expand your color palette or change how your buttons look, and that’s ok.
Your website is a living thing, and your website style guide is, by extension, a living document.
As your website’s style evolves, your style guide should be updated accordingly.
11. Export Website Assets
Once you have your Website Style Guide created, the next step is to export all of the necessary assets so your developers can get started.
This will include exporting all of the fonts, colors, logos, images, and iconography that you defined in your style guide.
You should also export any special interactions or functionality you designed into your prototypes.
By providing all of the necessary assets upfront, you’ll help ensure a smooth and efficient website build so your developers can work on a pixel-perfect implementation.
12. Front-End Development, Back-End Development, & Content Management Systems
At this point, you’re ready to start coding your website, but first let’s clarify the two halves that make up web development: front-end development and back-end development.
Front-end developers use a variety of tools to help them do their job, such as frameworks like Bootstrap or Foundation, templating engines like Handlebars or Twig, and preprocessors like Less or Sass.
They also need to be comfortable with code versioning tools like Git or Mercurial, so they can track changes to their codebase over time.
Back-end development is the process of building the functionality and data storage for a website. This includes developing the server-side code that handles things like user authentication, database access, and payment processing.
Back-end developers use a variety of programming languages to get the job done, such as PHP, Ruby on Rails, Node.js, and ASP.NET.
They also need to be familiar with web hosting technologies like Apache or Nginx, and database systems like MySQL, MongoDB, or Cassandra.
A content management system (CMS) is a software application that enables the creation and modification of digital content. A CMS facilitates the control and distribution of digital assets across a website, often enabling multiple users to collaborate on the content in real-time.
The most popular CMSs are WordPress, Drupal, and Joomla. Even Shopify can be considered a CMS for ecommerce businesses. These tools have their own back-end that requires a specialized developer, so make sure you use the right person for the job that understands the technology that is running your website.
Once the front-end and the back-end of your website have been successfully developed, it’s time to start testing!
13. Quality Assurance Testing
Website QA testing means checking to see if everything on the website works correctly. People do this by trying to do different things on the website, like clicking on buttons and links.
If something goes wrong, they report it so that the problem can be fixed.
I like to use a tool like usersnap.com so that anyone is able to report any bugs or issues with the website quickly and easily. It is a paid tool, but it automatically captures important information like screen resolution, window size, operating system, and browser so that developers are able to replicate and fix the issue.
Once all of the pages have been reviewed on various devices, browsers, and screen sizes and all of the issues have been resolved, you’re ready to move on to the more technical website tests.
14. Performance & Core Web Vitals
Website speed is now a ranking factor for Google, which means your website needs to load quickly if you want to rank higher in the SERPs (Search Engine Result Pages).
It’s also an indicator of whether or not users will buy from you, as a slow website can be negatively perceived, leading to fewer conversions and higher bounces.
There are some things you can do to make your website faster, like using a good hosting company, using a caching plugin, minifying and combining CSS and JS, serving images in next-gen formatting with lazy-loading enabled, and making sure your code is clean and 3rd party scripts are kept to a minimum.
To see exactly what you need to fix, use Google’s Lighthouse tool to test your website’s performance and see how your Core Web Vitals are doing.
To do this, visit web.dev/measure and enter your website URL. This will tell you what needs to be improved on the page you entered from a technical perspective. The report includes recommendations for performance, accessibility, best practices, and SEO.
Aim to get 90+ on each of the 4 categories before launching your new website. It may be tough, but it will translate into higher rankings, more conversions, and fewer frustrated prospects leaving your website because it’s too dang slow.
If you’ve made it to this point in the process, congratulations! It’s no small feat to rebuild an entire website, and the launch date is the culmination of all that hard work.
The exact process you follow for your website launch will depend on your technology stack, so I won’t go into too much detail here on what specifically to do.
However, know that a website redesign launch usually involves some down time for your website, meaning it won’t be accessible on the web for a little while.
In order to reduce the impact this has on your users, you may want to schedule your launch to happen during the time of day where you receive the least amount of traffic (usually 2-5am since that’s when people are sleeping).
Once the website has been launched, make sure to test the website to verify everything was transferred over correctly. This means manually testing the website on different devices, and making sure the website has no broken links, no dummy text, broken image tags, or any redirect chains.
How do I maintain my website SEO after redesign?
If you’re planning to redesign a website that gets a substantial amount of traffic, chances are you want to know how to retain your SEO rankings for your redesigned website.
You might be wondering: If I change my website, will I lose my Google ranking?
The short answer is no (unless you also changed the content on pages that are ranking for specific keywords). The real answer is it depends.
The larger the website’s redesign, the more likely pages may have moved, URL structures may have changed, and performance metrics may have fluctuated.
So here’s a 12 step website redesign SEO checklist you can use:
- Benchmark SEO performance before launching your redesigned website. You can use a tool like ahrefs.com or semrush.com to track keyword rankings and monitor traffic. You need to also test the website at the very end of this process to compare how the new website stacks up against the old website.
- Crawl your website for broken links and images using a tool like ahrefs.com or screamingfrog.com/seo-spider/. Fix any issues prior to launching your new website.
- Set up redirects for your website if you found broken links, your URL structure has changed, or if pages or posts were removed or combined. Make sure to use 301 redirects for permanently moved pages so you can pass on the SEO link juice from the old page to the new one.
- Make sure your website includes schema markup wherever it’s needed. This helps search engines understand your content and make sure it’s including it in rich snippets. Google offers a free Rich Results Testing Tool you can use to verify schema on any web page.
- Ensure content has been properly transferred over by performing a manual review of pages. Check for incorrect spelling or grammar, missing meta descriptions, duplicate website content, empty alt tags, and incorrect rel attributes on links (i.e. nofollow, noopener, noreferrer, etc.)
- Test your website’s performance and fix any issues with your new site’s Core Web Vitals. Google now uses your website performance as a ranking factor, so if your new website is slow or has Largest Contentful Paint (LCP), First Input Delay (FID), or Cumulative Layout Shift (CLS) issues, you may lose your spot in the SERPs for competitive keywords.
- Make sure your new website has an XML sitemap. This will help search engine crawlers find and index content on your site more quickly. As soon as you launch your redesigned website, make sure to submit your updated sitemap to Google Search Console and other relevant search engines.
- Check to verify Analytics tracking has been properly implemented and Goals are successfully firing. This way you’ll be able to see how the website redesign is affecting traffic, behavior, and conversions while avoiding any data loss due to the launch.
- Review your website’s robots.txt file. This tells search engines whether or not you want your website crawled and indexed. It’s extremely important to make sure your website is indexable, or you won’t appear on Google (or any other search engine for that matter). If your website is on WordPress, visit Settings > Reading and make sure the radio button that turns off indexing is NOT SELECTED.
- Make sure your website has an SSL certificate and that all pages are served via HTTPS. Google will prioritize website’s with an SSL certificate over those that don’t have one when determining ranking order.
- Set up some sort of security tool or plugin to help keep your website safe and protected against hackers and unwanted bot traffic. WordPress is especially vulnerable to having bots try to inject malicious code that can redirect traffic coming from search engines without you even knowing it’s happening. If you’re on WordPress, you can also change your log in URL from /wp-admin/ to something else to reduce unwanted log in attempts.
- Ensure your website does not have any intrusive popups. Google penalizes website’s that show a popup as soon a users land on their website. To avoid these penalties, make sure to tie any popups to a user action, like scroll depth or exit-intent.
Nothing is worse than a huge traffic drop after a website redesign, so if you want to make sure your Search Engine Optimization efforts transfer over without causing any issues, go through each of these steps and continue to monitor performance over the next 30 days.
How much does it cost to hire someone to redesign a website?
Keeping your business website up-to-date is critical if you want to make money in this day and age. A website redesign can provide a fresh look to your website and help increase sales IF DONE CORRECTLY.
The cost of hiring someone to do the job for you will depend on a few factors, such as the size of your website, the complexity of the design, and how much work needs to be done.
Generally speaking, you can expect to pay anywhere from $1,000 to $10,000 for a professional website redesign. Sometimes it’s possible to find designers who will work for less or more depending on their level of experience and abilities.
Note that this does not include the cost of development, which can vary greatly based on what features are needed based on the designs, and what technologies and integrations are needed to successfully implement the designs.
It’s always a good idea to get quotes from multiple sources before making a decision, and to speak to an expert who can help translate your business needs into a tech stack for your website.
Redesigning your website is no simple task, but if done well, it can help your business thrive and help you compete in our increasingly digital world.
I hope this guide is helpful in your website redesign efforts. If you have any questions, feel free to reach out to me or leave a comment below.