« Back to Planio Blog
67e90e36a89f48e87627ed71eaec50a9
Jory MacKay
Jory is a writer, content strategist and award-winning editor of the Unsplash Book. He contributes to Inc., Fast Company, Quartz, and more.
February 07, 2018 · 18 min read

5 Steps to Manage a Website Redesign Without Losing Traffic and Customers

Steps to manage a website redesign

Redesigning your site, web app, or blog always seems like a good idea. A fresh coat of paint keeps you current, improves usability, and upgrades your brand. But when it comes to a full website redesign, it’s not just what’s on the surface that counts.

A full website redesign involves a lot of moving parts. And if you've already got traffic coming to your site, the last thing you want to do is ruin a good thing just because you wanted a facelift. The end result might be a sexy new design, but getting there won’t be nearly as pretty.

Managing a website redesign is equally parts art and science. So, to get you (and your users) through it as smoothly as possible, here’s our step-by-step guide.

Step 1: Strategy

Before you start listing off all the features you want or hit up Pinterest for some design inspiration, you need to start with the strategy of why you’re doing this website redesign.

Website redesigns are no walk in the park, and according to UX agency Intechnic, 33% of marketers aren’t happy with the results of their redesign. Understanding your why will help inform every single decision you make throughout the project. It will also help set expectations for what you’re going to end up with when the dust settles.

Start by thinking about the goals you want to achieve with your redesign

You most likely already know the main reason why you want to redesign your site. However, it’s best to go as deep as possible at this stage. Do you want to:

You might also want to take this time to do a quick competitive analysis. Look at their strengths, weaknesses, and opportunities and find areas you can draw attention to (as well as features you want to avoid).

Next, bring in key stakeholders to hear their needs

You’re most likely probably not the only person who wants to improve your site. Everyone from marketing to HR to sales has their own needs and opinions on how your site and your brand should be represented.

And while bringing too many cooks into the kitchen can make the project more complex, it’s important to hear everyone out before you get too invested. This means hearing from:

  1. The Project Manager: This is most likely you—the person managing the day-to-day of the redesign and ensuring that the deliverables come in on time and at the quality you and the rest of the team expect.
  2. The Project Owner: This is the person who’s ultimately in charge of making the final calls on the project and the direction it takes. In many cases, this person is the same as the Project Manager. However, it could also be a team lead, CEO, or other executive, which means you need to hear their needs and ideas as well.
  3. Other Stakeholders: This means Sales, Customer Support, HR, IT, Contributors, etc… Not only will this save you from potential office drama (no one wants to feel like they’ve been ignored!) but also means more buy-in on the project. One easy way to understand their priorities is to give everyone a copy of Jim Kalbach’s UX Strategy Blueprint and have them fill it out: The Strategy Blueprint
  4. Users: For more complex redesigns, it’s probably worth it to do a round of in-person usability tests to identify just where people are having issues with your current site.

Take your big list of goals and needs and create your website redesign strategy plan

With your big list of needs in hand and everyone happy and onboard, it’s time to decide what’s actually going to get done. This is no time to get sentimental or attached. As the project manager, you get to decide what’s most important, and what’s realistic.

For each goal, clearly define what you want to see on a page-by-page basis. For example, if one of your main goals is to lower your bounce rate, say:

“Lower bounce rate on main content pages from 65% to 60%”

This sets your intention for the project, outlines your priorities, and keeps you and everyone involved accountable post-launch. It may seem tedious, but once you get into the trenches of your redesign, you’ll be happy you spent the time to do all this thinking up front.

Lastly, document all your current metrics and keep your old site running (at least for a while)

Before we move on, it’s time to document all your current metrics. If they’re not associated with the strategy-based goals you just wrote down, do it anyways. Site analytics are a great place to find clues about what’s working and what isn’t.

The best way to do this is to use a spreadsheet organized by individual pages or categories. In this, you’ll want to include:

Documenting these metrics is a start, but to be extra safe it’s a good idea to keep your old site running even after you’ve switched to the new one. Not only does this give you a quick fix in the case of a “Oh God, everything is broken!!!” scenario with your new site, but you can also go back and check on things that might be missing or broken. Need that analytics code embed, or forgot to document your meta tags? Just go back and check. You can even use your old site to A/B test certain pages, which we’ll get into below.

Step 2: Planning

Now that your intention is set and your goals are clear, it’s time to figure out how you’re going to actually go through with your website redesign.

I know what you’re thinking: Isn’t that what we did with our strategy doc? Not exactly. While your strategy doc told you exactly what’s important and what results you want to see, it’s more of a big-picture look. Now, it’s time to get into the nitty gritty.

Write your vision doc and work backwards

When managing any project, the best place to start is at the end.

Ask yourself, if everything went exactly how I want it to, what would this new site look, feel, and act like?

Think of this like working backwards. You could create a moodboard or gather inspiration for the kind of site you want yours to become. Or, go a step further and create a vision document—a short description of what the site will be when it’s finished. Explain what it will do, what it will contain, and why your users will love it.

This isn’t just some feel-good document either. A good vision doc clarifies what you’ll need to do to make the site a reality. It makes it easy for a designer to know whether to grab an off-the-shelf WordPress theme or spend hours on user research and user testing to create a ground-breaking experience.

Another method is to do what Amazon, CTO Werner Vogels does and start a project by writing the press release for it:

“The press release describes in a simple way what the product does and why it exists—what are the features and benefits. It needs to be very clear and to the point. Writing a press release up front clarifies how the world will see the product—not just how we think about it internally.”

The goal here is to know exactly what you’re building and to think of it from the user’s perspective. Do this first before jumping into the actual build.

Build a detailed to-do list

When you’re creating the to-do list for your website redesign, you’re essentially taking each goal from your strategy doc and saying “how do I do this?”

What’s great about this method is that even though you might not know exactly what the final site is going to look like, you know the results you want to get. From there, you can decide what features, pages, design elements, CTAs, etc… you’ll need to hit those goals.

Brainstorm with your team and make a huge list of what needs to get done. Then, break each item down into the smallest possible piece of that task. In the end, each goal should have every single step mapped out to take it from where it is now to your shiny new website.

Estimate your costs (both in time and money)

Now it’s time to get serious. To create an action plan for your website redesign, you have to assign a time and cost to each task. Which can be a nightmare.

Even the most experienced project managers have issues with estimating. But time and money are your two most valuable resources. And getting the greenlight on your website redesign means having at least a decent idea of how long it will take and how much it will cost.

If you’re having trouble with estimating, or this is your first redesign, here are a few tips on estimating properly:

  1. Go wide: Rather than give a solid number, giving a time range (such as 20-40 hours) gives you additional flexibility. It also shows what tasks you’re most concerned about and where potential issues might creep up. The wider the range, the more time you’ll probably need.
  2. Ask “Have we done this before?” Look through your to-do list and estimate the time each will take based on your past experience. Then, multiply the estimate you came up by
    1. x1 of the time for tasks you’re experienced and confident in
    2. x1.5 of the time for tasks you haven’t done but have a clear idea how to go about
    3. x2+ of the time for tasks you haven’t done and that require some research and testing
  3. Talk to an expert: If you have a mentor, connection, or colleague who’s done a project like this before, pick up the phone and ask them how it went.
  4. Reduce the scope and stick to the schedule: Creative tasks like writing and design will fill the time you give them. Therefore, it can be better to assign a hard schedule and ship with what you have at the end. You can always update later.
  5. Leave it as an experiment: Sometimes you’ll really have no idea how long a task will take until you’re in the thick of it. And while it’s unsettling, you might just have to leave some estimates open.

Assign tasks, resources, and milestones

Now, let’s divvy up those tasks so everyone on your team knows what’s expected of them.

Start with the big picture. Order the tasks in priority and divide them up into milestones. For a website redesign, there are some natural milestones you’ll probably follow:

Many of these can happen simultaneously. So, a great idea is to move them into a Gantt Chart to see how many people you actually need, whether there are any bottlenecks (does a team member have to wait weeks until they can do their job?), and how your project should progress.

Alternatively, a website redesign can also be managed in an Agile way, in which case you would add all your to-dos into a backlog, do a planning session with the team, and scope out the first sprint.

Planio is designed to accommodate both project management styles. So, whichever one you and your team choose, it’s a powerful tool to support you along the way.

Now, with all this information, you should now be able to see if you actually have the resources to make this redesign happen. Multiply the total amount of hours by your project hourly rate to find out the manpower cost of your project. Don’t forget to add additional costs for resources, tools, software, and operating costs.

Lastly, take a break and ask yourself “Am I forgetting anything?”

If you’ve followed the steps so far, you should be good to go. However, there’s nothing worse than getting halfway into a redesign and realizing you forgot a major piece of it.

Gather all the content you’re going to need

Many people would put this in the building section of their website redesign plan. But I firmly believe that your “plan” should include gathering all the content you’re going to need.

This means:

Why? First off, you get to see what you have, what needs to be rewritten or remade, and where any bottlenecks will come up.

Second, it removes all sorts of unnecessary questions, such as:

And lastly, it helps you see where you might need approval (from legal, executives, or other outside stakeholders) so you can keep the project moving smoothly and not get held up waiting for red tape.

Step 3: Start building

Are you ready for this? Because it’s time to actually start building the damn thing! You’ve got a strategy and a solid plan and your content is mostly together. Now, it’s time to start making this a reality.

Start building

The kickoff meeting

With all the time you’ve put into strategy and planning, a solid kickoff meeting will reignite the excitement and get the momentum going again on your website redesign. It’s a chance to bring together your team, the project owner, and any other stakeholders to set expectations and let them know the timeline of the project.

Keep it short and exciting. Focus on the big picture and rally your team for the weeks and months to come.

As a quick reminder, this meeting shouldn’t be full of new information for anyone. By engaging them during the strategy and planning processes, this shouldn’t be you asking for buy-in, but simply letting everyone know what was decided and what they should expect.

Style tiles, wireframes, mockups, and prototypes

One of the first things you’ll most likely do as you develop your site is test out designs. You want to know what your site looks and feels like before committing it to code. Let’s look at a few of the techniques and tools you can use for this:

Style Tiles for early feedback on visual design

Style tiles are easy ways to explore visual direction early on without having to flesh out a full mockup. At their most basic, these are snapshots of what your site could look like using different type, color, branding, and design elements. They give you a quick idea of what’s working and what isn’t, and allow you to get approval quickly on what direction to take.

One of the added bonuses of using style tiles is that they let stakeholders feel like they have a real say early on. Rather than showing a full mockup that feels finished, there’s “less to lose” giving bold feedback on a simple style tile.

Wireframes for working on UX and navigation issues

Wireframes are the “skeleton” view of what your new site will look like. They’re static, low-fidelity representations of how your pages will be laid out, where content is needed, and how everything will eventually work.

You can think of them like a blueprint for a house. There’s lots of information about what goes where, but you still don’t really know what the finished house will look like. And, like blueprints, they let you test different styles and structures before you break ground and it’s too late (or costly).

There’s many ways your designers might build wireframes, from sketching on paper, to general design software like Photoshop, to specialized UX software like Balsamiq or Pidoco.

Simple paper mock-up from Nicholas Swanson

A simple paper mock-up from Nicholas Swanson

Whatever you use, the key things to remember is to keep them simple, add short and relevant annotations, and encourage lots of feedback.

Mockups and prototypes to create a detailed plan for your developers

Wireframes are great for getting through the initial ideas, but they can get ignored or not taken seriously. It’s also hard for some stakeholders to give comments on wireframes as they’ll focus on the surface-level issues (42Floors co-founder Jason Freedman calls this 30% feedback).

So, once you’re ready to move on, it’s time to build high-fidelity mockups and prototypes. These are fleshed out, working models of your new site that let you see and feel exactly (or pretty damn close to) what it should be like when it’s done.

Not only does this give you something that looks like a finished product, but as Shopify Plus designer Filipppo Di Trapani explains, it allows you “to see the design through the eyes of your audience.”

At web, design, and software agency LAUNCH, they follow a process of rapid, incremental prototypes that get more and more complex:

Idea → Quick draft → Minimum Viable Product → Iterations with Constant Feedback → Finished Product and Launch.

This way, the right feedback can be given at the right time before investing too heavily in designing and building a “finished product.”

Step 4: Implement your new site on your CMS

Finally, it’s time to turn all those beautiful designs into equally as beautiful code.

If you’re building a completely new site, this part of the process will be more complex than if you’re just giving your current one a facelift and leaving the backend intact. Let’s assume you’re going full-on and creating something totally new.

Start by selecting a new CMS

Your Content Management System, or CMS, is how you’ll easily add new content and manage your site after the relaunch. It’s important to pick something that you’re comfortable with, and that’s powerful enough to do all the things you need it to do.

There are tons of options out there to choose from, so this is no small decision. A smart option is to sit down with your developers or the agency you’re working with and think about your ideal set of features. Ask questions like:

Don’t just think about what you need now, but also what you and the other site stakeholders might need in the future. It would be a huge let-down to choose a simple, no-CMS static site generator that runs blazingly fast but can’t handle the blog you decide to launch 6 months from now.

There’s no one-size-fits-all solution, but here are a few last pieces of advice to help you on your journey:

Build a sitemap and templates

These are the foundation of how your site will look and behave when actual users come to it.

Your sitemap lays down the navigation hierarchy. Think of it like an upside-down tree. At the top is your homepage, the trunk. And from there you have your main pages or “branches,” like Our services, About us, News, Pricing, and so on. From each of these branches, you might have smaller sub-sections or pages branching off them like for different services your offer, your company philosophy, or your team.

The benefit of defining the sitemap first is that you’ll know exactly which pages you need and what the URL structure will look like. For example: mysite.com/compamy/team.

Now that you know which pages you’ll need, bring your designers and developers together to find similarities across your designs. All pages with enough commonalities, or pages that will be repeated (like a blog post), should be built using a common template.

A template consists of a layout of shared and common elements (at least a header and footer in most cases) and variable “blocks” where the actual content will go. Depending on your site, you will usually end up with only a handful of different templates. There might be one for your homepage and important landing pages, one for lists of items like your products, one for a full focus on a single product or service, and one for larger blocks of text like a privacy policy.

With templates defined, your developers can start working on their implementation without having to worry too much about the actual content that the templates will be used for later.

A well-defined set of templates will also make it easier to add more pages and content to your website later on without having to go back to the drawing board and develop everything from scratch.

Run through QA to make sure everything’s working

Now that you’ve got a site, it’s time to see if you can break it!

QA, or quality assurance, is an important, yet under-estimated aspect of your website redesign. Send your new site to team mates to have them look for bugs, or one of the many QA as a service options out there.

Here’s a few things to look out for during testing:

As a final note, it’s important to have somewhere to store and track all the bugs you find. Plan.io is not only great at planning your website redesign project, it’s also a great option for tracking, assigning, and dealing with issues.

Step 5: Launching and making the switch

Alright! Now, you’re ready to make your final ascent and yell from the mountain top all about how amazing your new site is. But before you get all trigger happy and flip the big switch, there’s one more thing you need to do.

Build your launch plan

You put so much time into redesigning your site, why trip right before the finish line? A launch plan covers how you’re going to tell users (current and new) about your site, as well as how you can use it as an opportunity to do some powerful marketing.

Launch Plan

Here’s a few things you should have in your launch plan (as a minimum):

Using all these elements, come up with a solid launch plan for the time leading up to and after your full launch. Not only will this help you spread the word and potentially get new users, but it helps you know who your audience is and how engaged they are.

Set-up any A/B tests you'll be running

A website redesign is all about opportunity. And while you based your redesign off of assumptions and user research, it’s still important to test what you’ve built.

A/B tests, or split tests, let you run two different versions of the same page simultaneously to see what your users connect with more. Or, as CRO analyst Jaan Sonberg explains in an epic post about website testing on ConversionXL:

“It is a method for validating that any new addition or change to your webpage will actually improve it’s conversion rate.”

Sounds good, right?

And remember how we kept our old site running all this time? One of the best reasons to do this is to set up A/B tests between your new site and your old to see how it’s performing. Is your new homepage converting better than your old one? Are you seeing the metrics you thought you would? Having these go head-to-head is such a powerful strategy for making sure your website relaunch is hitting the mark.

In fact, A/B tests in general are great tools and shouldn’t just be limited to testing your designs and copy on a new redesign, but should be part of your overall strategy. According to a recent survey by Econsultancy and RedEye, 74% of respondents who reported having a structured approach to conversion (like A/B testing) also stated they had improved their sales.

What’s next? Measure, test, iterate, and celebrate

Dust off your dancing shoes and pop the bubbly! You’ve got a fresh, newly redesigned site out in the wild. All your weeks and months of hard work have come to fruition. The site is what everyone wanted. And your users love it.

If this is what happened then congratulations. However, for 99% of website redesigns, you’ll want to hold off on the high-fives for just a little while longer.

Check your goals against the new metrics

Remember all that work you put into documenting your past metrics, writing down specific goals, and understanding the needs of your team? Well, it’s time to see if anything worked the way you expected it to.

Go back to your original strategy doc and start going through your new metrics. Have things gone the way you wanted them to? It might take a little time to get enough traffic to see if your assumptions were correct, but you should be able to tell pretty quickly if you’re on the right track.

Check in with your team and other stakeholders after the first week and then at regular intervals afterwards to let them know how things are going and what the next steps are. This will help everyone feel good about the work that’s been done and hopefully make it easier to get buy-in the next time around.

Common problems you might see (and how to fix them)

If everything looks good on your analytics, you can skip this step. Unfortunately, in most website redesigns I’ve been a part of, there’s always been at least one “What the heck is going on???!!!?” moment.

To finish off our guide, here’s a few common website redesign issues to look for, and where to get started fixing them:

Your organic traffic has died suddenly

This is one of the most common issues to come across with a website redesign. Unfortunately, if left unchecked, it can be a real company killer. If your organic search traffic has disappeared after your redesign here’s where to start:

Use tools to check where your new pages are ranking for specific keywords. If your older pages are ranking better, try to figure out why and fix the problem.

Your site is slow to load

Slow sites annoy users and can seriously harm your search ranking as well. Yet with all your new design elements, videos, or features (as well as hopefully a spike in traffic), the strain on your new site’s servers can seriously impact your speed.

To find out what’s going on you can use tools like Google’s PageSpeed Insights or YSlow. In most cases the issue lies with JavaScript, uncompressed markup, or CSS. The tools above will not only detect speed issues but also link to explanatory articles on how to fix them.

If the initial page requests are slow (rather than the assets being loaded afterwards), see if your CMS can be tweaked or needs to be moved to a more powerful server.

You’re not getting the same conversions (sales, signups, click-throughs)

If you’ve followed this guide, you shouldn’t be facing a big drop in conversions. However, there’s always the possibility that your users aren’t connecting with the work you’ve done. Which can feel like crap.

Here’s where your A/B tests can help to see if there are easy fixes to your CTAs or content that your users feel better about. Hopefully, that should be all it takes to find a path back to where your conversions were (and beyond).

Final thoughts on managing a website redesign

A website redesign is a huge undertaking. But follow this plan and you’ll be staring at a fresh new site in no time. Even better, your audience will be seeing and loving it too.

And if you need help keeping on track throughout the process, let Planio keep you, your team, and your stakeholders on the same page.

More articles about Project Management: