13 min Read

Website Redesign Project Plan: The Ultimate Guide with Templates

Mike Sayenko

by Mike Sayenko

13 min Read

Website Redesign Project Plan: The Ultimate Guide with Templates

Mike Sayenko

by Mike Sayenko

Introduction to Website Redesign

So you’re thinking about redesigning your website—that’s great! A website redesign is a fantastic opportunity to improve on the form and function of your site, for both tangible and intangible benefits to your business. For example, a redesign can:

  1. Improve your customers’ impression, trust and credibility of your brand
  2. Tell your brand story in an easy-to-understand way
  3. Drive more traffic
  4. Convert more of that traffic into business leads or revenue
  5. Help your site be the hub for marketing initiatives
  6. and many more

However, no matter if it’s a tweak or a complete overhaul, a website redesign project is a big undertaking that’s filled with risks. Making a detailed project plan that accounts for goals, timeline, cost, and curveballs is the first step to really getting a project off the ground. Read this article to understand every aspect of a website redesign and making a plan, plus get free templates and a website cost calculator to make your plan a success!

Statistics on Web Redesign

Before you dive in yourself, it’s a good idea to get the lay of the land. Plenty of companies have gone through website redesigns, so use these statistics to avoid making assumptions:

  • 75% of people judge business by its website (Stanford)
  • 51% redesigns launch late (Hubspot)
  • 63% redesigns go over budget (Hubspot)
  • 79% of marketers recommend refreshing web design at least every 24 months (Hubspot)
  • 33% people not happy with their redesign outcome, for a variety of reasons (Hubspot)

Overview of Your Redesign Plan

Start off with this checklist of steps and factors for your website redesign project plan. We’ll go into each in much greater detail throughout the article, so if you see a section that you want to explore more, just click it to see that part of the article. Plus, if you need to share the checklist with your team and other stakeholders, you can download it here.

1. Measure Analytics:

Note your core metrics, like traffic, conversions, and bounce rate to understand what you need to improve and give yourself a baseline to measure against.

2. Set Goals:

Working from your analytics and input from your stakeholder team, decide what the purpose of the redesign is. This helps you assign it a value to assess return on investment (ROI), and keeps expectations in reality.

3. Assess Risks:

Tie risks to potential timeline interruptions affecting your project team, budgetary concerns, and most importantly, your site’s functionality. During development and transition, core functions might not work—can your customers and business manage in the interim, and do you have a contingency plan?

4. Plan Costs:

Budget out the project in full, and add space for discovering problems and new things you need mid-project. Planning for things to go perfectly is setting yourself up for frustration.This again helps you assess potential ROI, but also helps you determine what kind of help you’re using and manage the expectations from your decision-makers.

5. Build Strategy:

Everything on the site should serve the goals of your business in some way—by planning out an acquisition and conversion strategy up front, you can focus on the essential pages and functions first.

6. Identify Personas:

There’s who you think your customers are, who you want your customers to be, and who they actually are. Use a combination of customer/sales staff conversations, analytics, and interviews and surveys to really figure out who you’re targeting.

7. Choose Platform:

Very few businesses create a website entirely from scratch, namely because a custom backend for the site isn’t manageable without the help of developers, which drives up maintenance costs. Popular platforms include WordPress, Squarespace, and Wix.

8. Make Sitemap:

The sitemap is a map of all the pages on your website, including what pages live under what organization in navigation and menus. This should tie into your strategy, targeting the journey of each of your personas.

9. Gather Content:

The copy (words), the images, and videos that populate a site are important to the overall experience and effectiveness of the site. Your content not being ready in time is also responsible for the majority of website redesign projects going off the rails. Assign someone specifically to this task now while the design is underway.

10. User Experience & Wireframes:

Building from the sitemap, you need to plan the user experience (UX) as they travel through the site towards the goals you want them to complete. Capture it in simplified sketches to help your web designers and developers understand the plan and prevent costly extra work.

11. Design & Visual Assets:

Have a vision in mind for the overall look and feel of the new website, including what elements from the existing brand will be pulled forward, and what need rebranding. Tie it into the strategy, and have lots of examples from sites you like that the web designers can use as a reference.

12. Search Engine Optimization (SEO):

SEO is both a technical and creative practice, helping your website draw in organic traffic from Google and other search engines for terms relevant to your business. It really can’t be done well without expert advice, so plan this as part of your budget, and also make sure the platforms you use have some back end SEO features.

13. Pick a Partner:

If you’re reading this, you’re most likely not a developer, which means you’re going to need help. Using your goals, strategy, and budget, determine whether you’re going to try to DIY with a drag-and-drop site builder, hire one or more freelancers, or hire a web design agency in Seattle to help you pull it off.

Research your options carefully and launch a Website Design RFP (Request for Proposal).

1. Analytics and Metrics of Your Current Site

What’s working and what isn’t

The first step before committing to a website redesign project is understanding your current website. After all, how can you even set goals if you don’t know where you’re at? Once you analyze some key metrics to understand what’s working and what isn’t, you will be able to decide what you want a new website to do for your business. And once it’s complete, these metrics will form a baseline you can compare against.

Installing Google Analytics

If you don’t already have a website analyzer, you can always rely on the most popular free option, Google Analytics. Just install it following their official instructions. Some popular website builders have built-in methods of installing it: here are guides for Squarespace, WordPress, and Wix.

Key Metrics to Analyze

  • Traffic Over Time: Spend some time assessing overall traffic, and the overall trends. Try to identify spikes, especially if they coincided with big changes in the website.

  • Traffic Sources: It’s important to know where traffic is coming from in order to set goals. If there’s little from Organic Search, maybe SEO is a good thing to focus on in the redesign, for example.

  • User Behavior: You can see the “Behavior Flow” of aggregated users as they go from page to page of the site, which can help you craft a strategy for which pages you need to keep and which connections you need to make stronger.

  • Bounce Rate: This measures when visitors leave the site without clicking through to any other page—identify the drop off points and see if you can figure out why, so you can strengthen those weak points during the redesign.

  • Time on Page: There’s no “right” amount of time a user should spend on every page, it’s all contextual. But for example, if you have some killer long form content that takes 10 minutes to read and on average people spend 1 minute on it, that should be a red flag.

  • Goal Completions: These are custom for every site, and can measure anything from filling in a form to making an actual purchase. Learn how to set up goal completions here.

With these key metrics in place, you can start thinking about what you want to improve and prioritize in a website redesign project plan.

website redesign Key Metrics to Analyze

2. Goal Setting For Your New Site

Not to be confused with on-site goal completions, the goal of your website redesign should be what tangible and intangible things you want to achieve. You might have multiple, or even all of the examples below—be sure to use those as a guidepost as you prepare your budget, timeline, and other key parts of your project plan.

Common Website Redesign Goals

  • Improve the Visuals
    One of the most common reasons a website redesign comes to a head is an ugly, outdated, or otherwise unusable appearance. If your team is frequently embarrassed to share the site with prospects, or you find that your brand doesn’t have a lot of esteem, this is probably what you need the most. You’ll need the help of a web designer or web design agency, a strong brand guideline, and probably a middling budget to pull off a site with this need.

  • Improve the User Experience
    Customer complaints, frequent help desk tickets, and high bounce rates (leaving a web page without clicking on anything) all can signal difficulty navigating the website. A redesign with this in mind will require a UX specialist, a conversion strategist, and possibly even usability testing.

  • Increase Traffic
    Without visitors to the site, you can’t use it to turn a profit or generate business leads. One of the key ways that a site can increase traffic without spending on ads is through SEO, which requires an SEO specialist and often content writers. The technical SEO side will include providing proper markup and structured data when creating the site, and the content side requires that relevant, useful, and high-quality content is written frequently to draw in organic search traffic. If you don’t have a blog, you’ll need one in order to have an outlet to publish lots of said relevant content, which is vital for improving SEO rankings. Position your blog as a place to get educated on your business’ area of expertise, since that’s what most people search for. Note that blogs on modern websites require a CMS (Content Management System).

  • Increase Leads & Conversions
    If you’re getting visitors to the site, but they never take crucial steps like signing up for email marketing, filling in quote or contact forms, or making a purchase, then the traffic is just a vanity number. Consider whether the UX or messaging need improvement to get visitors to take these steps, or if the forms or shopping carts aren’t functioning perfectly.

  • Launch Marketing Initiatives
    For most businesses, the website is a hub for all sales and marketing efforts, even if they use 3rd party landing pages for ad campaigns and the like. A site with this goal would need to have trackers, heatmaps, marketing pixels, and well-scripted Events and Goal Completions in order to accurately attribute campaigns to the right efforts. A digital media specialist would be helpful here.

Website Redesign Questionnaire

Not sure where to start?


Download this Website Redesign Questionnaire to figure out what goals your business should be pursuing.

Website design rfp template

Not sure where to start?


Download this Website Redesign Questionnaire to figure out what goals your business should be pursuing.

  • By submitting my details through this form, I agree to the Privacy Policy

3. Risk Assessment for Redesigning Your Website

Because website redesigns are massive projects, they can come with a wide variety of risks that need to be considered when planning them. Review this risk checklist, and download it here if you need to share with other stakeholders.

  • Team Can’t Spare Time: Lots of businesses think they can hire an agency and then dust their hands and wait for a beautiful website in a few months, but that’s almost never the case. A good web design agency will require at least one point person to review at many different stages (like the ones outlined in this article), and to handle steps like identifying and gathering content which are time-intensive. And don’t forget decision-makers who are always busy—if they can’t spare the time to chime in, the project will get stuck at choke points frequently.

    Redesign projects can hum along for weeks without input if they get the feedback they need on time, so make it a priority, and if possible, assign someone specifically to be the project manager on your side.

  • Too Many Stakeholders: Speaking of decision makers, just how many cooks are in the kitchen for your website redesign project? If multiple strong and opposing opinions are given equal weight and time, they can halt the project in its tracks. Even worse is bringing in detached senior leadership for a once over near the end, only to have an issue that brings the project back to square one.

    Decide your lean project team and have them all present at each touchpoint with your freelancer or agency.

  • Lack of Strategy: If the website doesn’t have a defined strategy prior to design, it’s subject to the whims of every department and aesthetic trends, and the end result will be impossible to assess the success of.

    Start with the strategy, which should only flow from the baseline metrics you’ve analyzed.

  • Design First Approach: Because an ugly or outdated look is often top of mind on a website that’s getting redesigned, it’s easy for the team to excitedly pick out examples of how they want it to look and send the web designers to work. But design-first leads to disaster and rework. The design needs to serve the businesses goals and be able to fit the right content to help sell to your customers—both need to flow from the strategy.

    If you go backwards, you’ll get a site that doesn’t serve the business at all.

  • Too Much Content: They say content is king, and more content means better SEO—but that’s only if it has a plan behind it. Many businesses treat their website like a directory of everything they’ve ever done, which makes navigation and menus difficult to plan and navigate. A high-performance website can’t feature everything.

    Go back to your strategy and determine which things are core to the business and the goals of the site.

  • Site Function Disruption: During the redesign and especially during development, transition, and testing, core features of the site can be knocked offline, which can affect the business. If content isn’t displaying, form submissions aren’t being recorded, sales can’t go through, and customers can’t log in, that can have a tangible effect on revenue.

    This is one of the biggest reasons to rely on a professional web design agency who can manage and minimize the disruption to business.

  • SEO Disruption: If your current website has high ranking content and draws a significant portion of its traffic from organic search, that can be upended by a poorly planned website redesign.

    Make sure your partner has SEO experience and can manage redirects and sitemaps so that search traffic flows seamlessly to the new site and doesn’t plummet in rankings.

  • Too Low of a Budget: It’s tempting to negotiate to a price and then sit firmly on it, but if you’ve ever hired someone for a project you can’t do yourself, you need to be flexible. Your plumber may find leaks you weren’t aware of which drives the cost up in the middle of a repair, and similarly your web design agency may make you aware that you need a corporate blog, or you might learn about a complex feature you really want that’s not in scope.

    Many companies seeking website redesigns set an arbitrary price based on what they’re comfortable spending that season, when they should be doing market research to find out what pricing to expect for the type of site they hope to build. In any case, build in an extra 10-20% of the cost to set aside for increased scope, and you’ll never be caught off guard.

  • Blocked from Design Stakeholders: If your web design agency can’t talk to the stakeholders who will be reviewing the site, the redesign is sure to come out poorly.

    Either give your agency adequate access to stakeholders of this project (no matter how important they are), or don’t hire a web design agency in the first place.

Website Redesign Risk Assessment

Downalod the Risk Assessment Checklist


Because website redesigns are massive projects, they can come with a wide variety of risks that need to be considered when planning them.

Website design rfp template

Downalod the Website Design Risk Assessment Checklist


Because website redesigns are massive projects, they can come with a wide variety of risks that need to be considered when planning them.

  • By submitting my details through this form, I agree to the Privacy Policy

4. How Much Does a Website Redesign Cost?

The big question is the money, and the frustrating answer is “it depends”—but we’ve got some guidelines for you.

Key Factors to Website Cost:

What Kind of HelpType of WebsiteVisuals NeededAdvanced
Working on your own

If you don’t account for your time, you can get what is technically a website up on Squarespace or Wix on the cheap.



Brochure marketing site

The cost depends on the number and complexity of pages in a design. If your site just displays product and service information, and a way to contact you, it’s a brochure site.

All content ready

You have the images and videos you need for the site ready to go. It just needs to be designed and laid out.




Blog / Projects

Blogs and Projects/Case Studies are custom post types that allow you to easily manage and add your content on the backend. They need to be dynamic and filterable by category and search.



$12-$49/ mo.$10,000-$20,000$3,000-$15,000$1,000-$5,000
Hiring a Freelancer

Hire a web designer or developer to get the professional touch, but remember that they aren’t a jack of all trades, and can’t be skilled at everything your website redesign might need.

Membership site

If your site includes a portal for users and other more interactive features, you can expect a lot more to get it off the ground and maintained.

Sourcing from stock

If you need to purchase stock photos, icons and videos to round out the visual content of your site, there are a range of options, make sure you have a creative brief and guidelines for brand consistency and what you’re trying to communicate.


Chatbot

Automated chatbots and live chat systems for a site help users engage with customer service and navigate more easily.
$40-$100/ hr.$5,000-$10,000$100-$5,000$20-$100/mo.
Hiring a Web Design Agency

Get a seasoned team of professionals in SEO, copywriting, branding, design, and development working in tandem for the best results and accountability. Make sure they have a well-defined process, too.

Ecommerce site

This can involve all of the above plus a functioning shopping cart and other types of core store features, and they tend to be labor intensive.
Original content

Whether you’re hiring photographers, video editors, or infographic designers, original content is expensive, but always worth it for the end results.
Integrations

Integrating custom APIs into your site to work with your existing technology stack always requires an experienced developer along with good documentation and or support.
$100-$200/ hr.$15,000+$1,000+$1,000+

And always add 10-20% in your accounting for the possibility of scope creep. Want a more in-depth and customizable estimate? Check out our Website Redesign Cost Calculator!

5. Start with Strategy

With an estimated cost and your business’ goals for the website in mind, you can start to work on a strategy. A strategy helps you focus your efforts on the aspects of the website redesign that help your business, which helps prioritize which information you put forward and where you spend your budget. Here are the different aspects to consider:

  • Conversion Strategy: Whether you’re getting leads through a form, getting phone calls from the contact page, selling products through a store, the conversion points are the most important part of the site. These end goals are what the site is for, so you should work backwards to the logical start points. This can be conceived of as a funnel, where the broadest group of visitors start at the top, and get whittled down as they travel through to only the most likely buyers who convert. Similarly, the most broad and simple content should live at the start, and only get more complex and specific as visitors prove their interest by reaching deeper pages on the site, like product and service pages.

  • Acquisition Strategy: This has a big overlap with advertising and marketing, and is concerned with how you get people to the site in the first place. If you are using ads, where should they lead on the site for the best chance of having an impact? If you’re sharing site content on social media, where should that content live on the site, and what is the next logical step a reader would take? Your acquisition sources should be met with logical paths in the website that tie back into the conversion strategy.

  • Content Strategy: This is tied into both of the above efforts, and concerns itself with what you publish, and how you share it. Larger content like ebooks and white papers with original research can be used as a carrot to get leads, and be chopped up into smaller blog posts, social posts, and email newsletters to keep prospects and customers engaged and ready for upselling. Knowing what kind of content you want to make impacts the way your site should be redesigned.

Only when a strategy is defined can you really move forward on the project.

6. Understand Your Customer Personas

Another aspect of strategy is the people who are going to be affected by it—your customers. A Persona is an amalgamated representation of one set of your customers. Separate your core customers into a handful of unique groups, and you can start plotting out the journey of each and determine what pages and content they need to motivate each step of their buying journey.

How to Find Out Your Personas?

There’s who you think your customers are, who you want them to be, and who they really are. Use the following methods to get to the bottom of it:

  • Talk to Sales / Front Line Staff: Whoever has the most contact with customers in your business is a great source for info on who they are and how they interact with your site, marketing, and sales. The site should work hand in hand between the two.

  • Analyze User Behavior Flow: Use the Google Analytics Behavior Flow, and heat mapping tools like HotJar to see what users do on your site, and where they go, and where they get stuck. You may be able to identify a few common threads that indicate like personas.

  • Review Performance & Targeting of Ads: If you’re running ads, review the various targets, the ad copy and creatives, and the landing pages they lead to. If they’re speaking with a certain customer profile in mind and perform well, that is likely a usable persona.

  • Conduct Customer Interviews: Someone who bought from your business is usually amenable to helping it a little more. Reach out to prior customers and conduct a targeted survey or even live focus groups to help you challenge or confirm assumptions and solidify your personas.

  • Aggregated User Testing: Tools like UserTesting.com allow you to set up specific tests targeting unique audiences and put your website or prototypes in front of them to see what they do and talk through their thought process. It’s a great way to test and validate assumptions with the target audience themselves.

website persona development

7. Choosing a Platform for Functionality

Very few businesses create a website entirely from scratch, namely because a custom backend for the site isn’t manageable without the help of developers, which drives up maintenance costs. Popular platforms include WordPress, Squarespace, and Wix.

  • Squarespace: This all-in-one website builder, hosting platform, and marketing tool can be a quick and easy way to build appealing sites, but it’s centralized control and limited aftermarket means most Squarespace sites look alike.

  • Wix: This website builder allows for complete drag-and-drop freedom, meaning if you can imagine it, you can do it. Plus, with built-in animations and a large marketplace of elements, it’s easy to get a site looking like you want. The issue is that these sites are often bloated and load slowly, and have very limited ability for you to optimize your site for search engines.

  • WordPress: One of the oldest and largest website building platforms, WordPress powers 35% of the world’s websites (Netcraft). With it’s easy to use content management system (CMS) and lots of plugins, it’s powerful for non-developers, but can often get out of hand without a developer to help.

Why We Recommend WordPress

All website building tools have their quirks, but WordPress is the best long term investment for the following reasons:

  1. You own your site
  2. Most widely used and supported by 3rd party developers and companies
  3. Cost-effective with a large community of free plugins, and easy to work with from a development standpoint
  4. Easy site administration, even after your developer is gone thanks to a simple backend system
  5. The best blogging platform to drive traffic to your website
  6. Completely customizable design & functionality
  7. Optimized for SEO with built-in tools and plugins

8. Build the Sitemap & Navigation

Sitemaps

The next part of your website redesign project plan should be coming up with the sitemap. If you’ve followed along to this point, you’ll already have a strategy in mind based on business objectives and catering to defined customer personas. Each piece builds on the next to help narrow and define the endless possibilities for website creation down to a logical choice that will do its job.

A sitemap is a map of all the pages on your website, including a hierarchy of which pages live under which folders and subfolders.

Example Sitemap:

the matador restaurant website sitemap

Navigation

Hand in hand with the sitemap is the top level navigation (or nav), which is the menu of pages you see at the top or increasingly on the side of most sites. Which content you feature and how you group them will follow in part from what kind of business you have, and in part from the strategy and personas you’ve pursued to this point.

For example, an ecommerce store should probably break things down by product categories, whereas a news site might have items for each topic they cover. There’s no one way to do it, but always consider the user’s point of view and limit the number of core navigation items to seven or less to prevent confusion and clutter.

The Call to Action (CTA)
Consider the main thing you want people to do, and give it extra focus in the nav – it could be a button in a secondary color to stand out, for example. Do you want them to sign up for your email marketing? Or contact you for a quote? Or create an account? Whatever it is, put this CTA in the top right of your fixed nav bar, so it’s accessible no matter what page they’re on.

On Mega Menus
The “Mega Menu” is a type of navigation where each item brings up a full-width screen of options when you hover over it. This allows sites with lots of important categories to include everything without making the user click over and over again to see it all.

Example Mega Menu:

raymark plumbing mega menu

Embrace “Mobile First” Design

You may have heard the term “mobile-first” in the context of web design. Because over 50% of web traffic comes from mobile phones and tablets (Statista) these days compared with desktop/laptop computers, the screen size is more limited and you have to prepare for not everyone to see the site the way you initially envisioned it. It’s a good philosophy to keep at the start of creating content for your site, because it helps keep reasonable constraints on what you produce, especially for the pages higher up in the funnel that might first be seen on mobile devices.

Most developers and even DIY site builders have “responsive” web design baked into their product. This makes the elements of the site shrink and stretch to fit the screen they’re displayed on, and rearranges them at certain “breakpoints” when switching from one type of device to another, like desktop sizes to tablet sizes. However, responsive websites aren’t enough, because they don’t account for the user’s experience reading what looks like walls of text on a phone, compared to that same text with lots of negative space on a good sized monitor at home. To be truly mobile-first, consider the layout on a phone, and then what can be done with it to be more creative or interesting when it gets shown on bigger screens.

mobile first website design

9. Make Content Your Priority

No matter whether you’re making a site yourself, hiring a freelancer, or outsourcing to an agency, someone from your team will have to help with website content for the redesign. The copy (words), images, videos used in web design, and other assets that populate your site are vital to the overall experience and effectiveness of the site. All of them either need to be provided by your team, commissioned to be created, or at the very least planned, reviewed, and approved on your end.

The biggest cause of delays for website redesign projects is not having content ready when the web designers and developers need it, in a third of cases.

Content Before Design

While you might have the perfect website template in mind that your whole team likes the look of, it’s wrong to approach web redesign this way. Think about it like this—the content is water, and the design is the cup. If you pick a cup of the wrong size for your content, you’re either going to have a glass-half-empty look, or a big wet mess.

Content Gaps

Another reason to start planning and gathering content early in the project is the “content gap.” Let’s say you have a great strategy that caters to your main persona, which has them show up on the home page, explore services, then validate with case studies, and finally request a quote. Only then you realize you have no good case studies in your library for this persona’s industry, which means you need to source and create that content. If you realize this at the end of development, your launch gets severely delayed.

Gathering Content

A good website redesign project plan uses a Content Gathering document to grab all the copy for all pages that are set to be on the website. It should be written by one dedicated writer to make sure the brand tone and voice are consistent, and it should be sharable amongst your team so stakeholders can weigh in where needed and make the job easy. And it should be formatted to be easy to understand by your web designer, and easy to copy and paste over for your web developer.

Website Redesign Content Gathering Template

Not sure where to start?


Downalod our Content Gathering template here!

Website design rfp template

Not sure where to start?


Downalod our Content Gathering template here!

  • By submitting my details through this form, I agree to the Privacy Policy

10. Wireframing for User Experience (UX)

Let’s review—you have a great conversion strategy, a sitemap to support it, an idea of what your navigation will look like, and your content is being developed concurrently. Finally, it’s time to start the visual design part of your website redesign.

Just like how we want content before the container, we want the skeleton of your pages before fleshing them out. In web design, that skeleton is called the “wireframe.” The basic idea is a simplified collection of shapes, boxes, lines, and copy that form how each page is going to be laid out, prior to any decisions about what pictures or videos go where, or colors, or font, or any other high level design consideration.

We break this out because it helps us focus on the user experience (UX) before getting distracted by the specifics of design. Instead, you plot out the path each persona takes. Consider questions like these:

What happens when you click this button? If persona X is at this stage, what information are they most likely to want next? How can we put that in front of them?

Wireframing & Prototyping Tools

Pen & Paper: Nothing wrong with sketching out some low-fidelity wireframe prototypes. You could cut each one out and position them on a wall or table to help show your team the flow from point to point.

InVision: The premiere web design tool helps you preview, test, and validate the user experience by turning your high-fidelity wireframes into functioning prototypes—interact with them to get a feel for the navigation, and leave comments for others on the team as you work to improve them. It requires a desktop design tool like Sketch to create the actual wireframes.

Adobe XD: This tool is both a wireframe creator and a prototype builder. Best of all, it’s available for free (with some limits on fonts and other high-end features).

Redesign vs. Rebranding

As you start transitioning from the skeleton of your website to the actual visual look and feel, it’s important to consider your brand. Does the logo, typeface, and color of your brand match the aesthetic you’re working on in redesign? It may well need an update, but think on it carefully—rebrands are much bigger propositions and will impact all your sales material, print collateral such as business cards, and anything else you use the brand on. It may also create market confusion with your customers and prospects if you don’t let them know clearly enough that the redesigned brand is you. Either way, make sure the branding and logo are in line with the new design you’re planning for the website.

Logo Design Questionnaire

Not sure if you want to rebrand as part of your website redesign project plan?

Download our logo redesign questionnaire and see if it’s the right move!

Website design rfp template

Not sure if you want to rebrand as part of your website redesign project plan?

Download our logo redesign questionnaire and see if it’s the right move!

  • By submitting my details through this form, I agree to the Privacy Policy

Web Design 101

It’s been a long journey, but you’re finally at the stage most people envision when they start talking about website redesign—the design itself. If you’re going to work with a web design agency or freelancer, you should collect at least 5 websites you and your team really like the look of, as models to help communicate the design aesthetic you’re aiming for.

As you’re looking, here are some core elements you need to consider:

  • Colors: Modern websites are using one core color aside from a neutral (white, off-white, grey, beige), to highlight core elements and reinforce the brand. This is not always required, but the fewer colors you use, the easier it is to emphasize important elements and the less visual clutter there will be.

  • Fonts: The fonts you use should complement and reinforce any fonts used in your logo or wordmark, and like colors, should be limited to a small number of different fonts for consistency and impact. You should have a style guide that accounts for body copy (p tags), headings (H1, H2, and H3 tags), and sometimes certain flavor text like pull quotes and image captions. Font choice should match branding—if you’re selling some kind of creative service, artsy or handwritten font might be used in some headings; if you’re focused on B2B sales, probably stick with professional san serif fonts; and if it’s something evoking art or beauty or class, like fine dining, you might consider more elegant serif font in some places.

  • Scale & White Space: Are elements squished together in the center, or spread out and floating? Are the headlines 10 times as big as the body copy for dramatic effect? Do you display one image at a time as you scroll, or show many images together in a grid? Each choice like this creates an effect that adds up to the visual brand narrative and experience of using your website, so think carefully.

  • Image Treatment: Why do some sites look like every image was made just for them, and some look like an obvious bucket of random stock photos? It’s image treatment. Color grading, selecting like shots, adding logos or brand-reinforcing frames, or sometimes even a full-color semi-transparent background color in your core brand color helps tie the images you pick into your site.

  • Background: The background that all of the other elements sit on top of doesn’t always have to be a basic white void. For example, a store with artistic products might have a subtle “card stock” look in the back. Some alternate colors by section to help break up their content. And not every background needs to be a full screen wash or image—you might use layers of shapes or abstract lines to guide the user’s eye, frame your copy and images, and even create the impression of a 3D environment.

  • Interactions & Animations: Today’s websites are more interactive than ever, which is great for giving emphasis and helps UX. They move, fade in, highlight, wiggle, and scroll. It’s easy to go overboard, but subtle to the point of boredom isn’t always the right choice either. Just make sure it’s consistent and fits the brand and industry, and that you don’t use too many. Lots of animations mean a lot of Javascript code running, which can really slow down the load time and cause visitors to bounce.

And that’s just to start! Check out our article on visual web design to get a more nuanced and complete approach.

11. Investing in Visuals Makes a Difference

All of the elements in the previous section add up to how “good” a website looks or feels. However, the quality of the images and videos being used is one area you absolutely can’t skimp the budget on. This will drag down the entire impression of the site, no matter how good the colors and fonts are. When you go to Apple.com, what is the website really? A bunch of blocks of solid color and very plain, very simple, very sparse text. The beautiful product shots and videos, taken specifically to fit into those spaces, are what makes the site look “good,” and build an emotional connection.

Stock Photography

Unless you have an in-house creative studio, you’ll probably be relying on at least some amount of stock photos and videos in your website redesign project plan. Nearly all websites use stock images to round out some of their visual content. There are inexpensive options, but they are often the most cheesy, alienating photos that really aren’t good enough. And cheap stock libraries tend to be limited—if you need a technical photo in your industry, you may not find one.

Custom Photography

Hiring a photographer and videographer is a must if you are selling physical products. Anything relating to the sale needs to be well-represented—there’s a reason McDonalds looks so appetizing in the commercial despite what everyone knows about the real product. The same goes for any shots of your facilities, and your team. Freelance photographers are everywhere at a variety of rates, but if you can find one who works specifically with web designers and understands the format and needs well, you’ll get the best results.

The visuals you use make a world of difference to connecting with your audience and keeping them engaged (or interested) through the buying journey—see the impact they make here.

  • Don’t stuff keywords in navigation, links, or headers where not warranted

  • Always stick to the most user-friendly terms

  • Good UX is more important for SEO than frequency of keywords

12. Search Engine Optimization (SEO)

SEO is a technical and creative practice which helps your website attract organic traffic from Google and other search engines when people search for terms relevant to your business. SEO cannot be done well without the help of a specialist, so make sure this is part of your website redesign project plan, and that any team you hire has one on hand.

SEO Elements to Plan For

  • Keyword Analysis: Since SEO is all about relevant search terms, you need to know what the keywords you want to rank for are. Consider the ones that literally describe what you do, but don’t forget about the resources people might search on their way to realizing they need you. For example, if you sell landscaping in New York, you’d want to rank for “New York Landscapers”, but also “Ideas for fixing my front lawn,” and “How much do landscapers cost?”

  • Site Structure: There are structural elements to a website that are best left to a knowledgeable developer. Structured data can help Google understand when it’s looking at a recipe, a book excerpt, an event, and many other things, so they show up in Google search results and make your site more likely to be clicked on.

  • Meta Data: Metadata includes the title tag and meta description you see in the search engine results page (SERP), such as Google. A good title tag contributes to showing up in the results your page is relevant for, and a well written meta description with a good call to action makes your website more likely to be clicked on. Metadata is also important for images and videos, which need SEO-friendly file names and alt text, helping them show up in image searches and contribute to your overall SEO success.

  • 301 Redirects: This is especially important for website redesigns—if your internal pages get new URLs, make sure to redirect the old pages to the new ones so they don’t drop in search rankings you’ve already built up.

SEO Tools

Moz: Moz is one of the oldest and best SEO tools around. It helps you perform keyword analysis, audit your sites for issues, track how well you’re ranking for certain keywords over time, and even manage your business listings.

SEMrush: SEMrush has all the features of Moz, and is always expanding with more. It’s a tool most good web design agencies have.  

Ahrefs: One of the most popular SEO tools around, this one has functions similar to what Moz and SEMrush have.

Screaming Frog: This tool helps you crawl all the pages of your site and get an overview of every element, page, and file you need to work with. It’s great for figuring out your URL structure and whether you need to do 301 redirects. Plus it’s free up to 500 pages.

Google Keyword Planner: This tool is technically built for Google Ads, but it lets you see the relative traffic of different keywords, and related keywords you might want to target so you can plan a list. While it does have more broad and general data, like the range of search volume on a keyword for example, it’s also free, making it a useful tool when choosing your keywords.

13. User & Usability Testing

Once you have your core pages ready, it’s important to validate your strategy with some amount of testing. At the wireframe stage, if you have a functioning prototype, you should do usability testing, where you give users a task and see if they’re able to navigate the site and complete the task. This helps you catch mistaken assumptions and smooth out issues prior to investing in fully designed mockups.

After pages are designed, you can do both usability testing and general user testing to get validation of design choices, understand how people feel about certain messaging, and more. This can be achieved with tools like UserTesting, and Google Optimize which allows for simple A/B testing.

Both of the above will use qualitative testing, which is like a focus group where a small targeted set of testers provide detailed feedback and rationale for their opinions and actions in the test. There is also quantitative testing which requires thousands of participants to remove selection bias—these can get expensive, but even mid-sized businesses can afford them using tools like SurveyMonkey and Google Forms. These tests are best for asking general yes/no questions and assessing affinity for certain messages or imagery with rating scales.

For an example of how user and usability testing can be put to great use, check out our case study on Erickson Aviation here.

2020 web design trend bright vibrant color schemes unbounce website

Planning for Launch

At this stage, developers have created all the pages and it’s time to get ready to launch. Use our checklist to make sure you’re ready:

  • Quality Control testing: Test the site on mobile, desktop and across the most popular browsers, like Chrome, Safari, Edge, and Firefox.

  • Website Training: Make sure key members of your team know how to use the website content management system—your agency should provide this.

  • Form Submissions: Make sure all form submissions “Notifications” are going to the correct email, since this is a crucial sales function of most businesses.

  • Unblock Search Engines: Make sure robots.txt allows the crawling of your site, for SEO purposes. If you’re using WordPress, check in Settings that search engines aren’t blocked.

  • Prepare Your Developer: Provide your developer or agency with contact info for your IT person if you have one, so any issues can be solved right away. Also give them the login info for your domain registrar so they can work out issues in handling DNS changes. Coordinate the launch to be in the morning, and not right before the weekend—post launch glitches are possible and you want your developer to be in the office and ready to handle issues so the launch can go smoothly.

  • Connect Your Domain to Your Host: Point the domain name to the server the website is hosted on. Usually, the easiest way is to point the A record, which is just one entry in your domain name registrar. If you don’t know where your domain is registered, check https://lookup.icann.org under “registrar info” or “reseller info.” Note: you will still need a valid login to update your domain records.

  • Install Google Analytics: You need to make sure this is embedded in the site so you can start measuring the success of the site against baseline metrics without a gap in data.

  • Install Google Search Console: This is vital for making sure you can understand the organic search terms that people use to find your site.

  • Submit Sitemap to Google: A proper XML sitemap submitted to Google will allow it to be indexed more quickly so it will show up for relevant searches faster. Plus, Google will notify you of any issues with the site they detect, so you can fix them early.

  • Install SSL certificate: After the site is live, your developer will need to install and configure the SSL certificate to your host server, which indicates to Google and to users that this site is safe to use. You’ll notice in your browser a little padlock next to the URL on sites that have an SSL certificate.

  • 301 Redirect setup: As described in the SEO section. Have your developer handle this and validate they work properly after going live.

If you have all of that ready and the go-ahead from developers, then congrats, your website is live!

Testing & Maintenance

In the final step of handling a website redesign project, you need to plan for what happens after it’s launched.

Premium Hosting: Pick a premium hosting service that’s tailored for your content management system. For example, use WP Engine for WordPress. This gets you top-notch security and performance (cheap hosting is generally slower), plus world class 24/7 support.

Cheap hosting has terrible support—for example, on GoDaddy your site might be down half a week before someone might address your issue. All these services are essential for business continuity.

Don’t go cheap, since you need to protect your site from hackers, keep it performing with fast and reliable hosting, and have easily restored backups daily so you can roll back quickly if you mess something up or get hacked. You get what you pay for, and since your website is a major marketing arm of your business, it deserves quality.

Software Updates: At least once a month, backup your website and update your software and any plugins you’re using. Testing should be done in a staging environment, which is a copy of the live site, so you don’t interrupt business functions. Once everything is tested for compatibility with your theme, push the updates to the live website.

DIY vs. Working with an Agency

We’ve mentioned a few times throughout the article that you’re likely to be working with a web design agency. However, it isn’t always right for every business and every website. Use this simple guide to decide:

Do It Yourself

Redesign a website yourself with help from our guide when you’re creating a small, simple, and low budget website. This should be 10 pages or less, and the most complex feature on the site should be a built-in form. DIY is also appropriate when you already have all the visual content and copy you need. If you’re okay with using a cookie cutter template, this is the best bet for your business.

Hiring an Agency

In basically all other scenarios, it’s best to hire a web design agency. If your website has a lot of content, needs a unique design, requires custom solutions, uses a complex backend system, and if your valuable time must be spent elsewhere on the business, this is the right choice. Which begs the question:

14. How to Pick a Web Design Agency for Your Redesign

No matter where you are, there are plenty of web design agencies in your area, and of course you can really hire them from anywhere since the work is all virtual. That being the case, you need to carefully assess your options based on the following criteria:

  • Experience: Does the agency have case studies that prove at least tangential experience with your industry, and your specific project needs?

  • Team: Having only a couple team members communicates that an agency is scrappy and will overpromise and underdeliver, leading to frustration. A bloated team needs to justify overhead on a large headcount, and suffers from the “too many cooks” scenario described elsewhere, which can cause miscommunication. Find a happy medium with an expert in each required field—an SEO specialist, a visual designer, a web developer, and a copywriter is about all you need. With a team like this dedicated to your project, you can get your project done at great quality, a brisk pace, and at the right investment.

  • Process oriented: A good agency will have a rigid process honed over dozens of website launches at least, including project management systems, standardized communications between you and them, and a plan from beginning to end.

  • Good reviews: It’s a good omen when many different customers take the time to leave nice reviews OFF the agency’s website in public places the agency can’t edit, like Google, Clutch, and UpCity for instance.

Once you’ve made a short list of 5 or fewer agencies, create a request for proposal (RFP) and send it off! Check out our Website RFP Template to get started, and best of luck!

Ready to Get Started?

CALCULATE YOUR INVESTMENT