Ecommerce

January 04, 2021

Sven

The Website Relaunch Survival Guide

As a business, your website is your home. Like any home, it tends to get cluttered and antiquated, even with regular maintenance and tidying. That’s when a larger renovation is in order – a website relaunch.

While definitions vary, the term “website relaunch” often refers to technical and structural aspects, a “redesign” rather refers to visual ones. Since you probably want to simply improve your website and resolve its issues, we’ll not dwell on semantics, but cover both, and more.

Any website relaunch is an exciting task, a great opportunity and quite a bit of work. This applies to you and your stakeholders, most of whom are busy enough already. Consequently, you’ll want to get the timing and scope of your relaunch right.

Our own experience has taught us that it’s crucial to align the frequency of your website relaunches with your resources. During Userlike’s last relaunch, we’ve deliberately ignored the dominant design style in our industry (which at the time was comic-y) and instead aimed for something more timeless: lots of white space, no borders, lively images of our software.

Userlike website before relaunch (2018).

Userlike website after relaunch (2019).

But even if you’ve weighed your resources, chances are that to some in your team, the prospect of a relaunch may raise reasonable concerns. For example about hurting SEO or design consistency.

To prevent this, but also to invest your resources efficiently, three things are vital: Knowing why you want to do a website relaunch, careful prioritization, and a rock-solid plan.

This post is intended to provide you with all of them, along with great resources and tools for diving in deeper.

1. Why do a website relaunch
2. Get all stakeholders at the table
3. Map out solutions and the scope of your relaunch
4. Protect your most valuable pages
5. Get a redesign
6. Add contact channels
7. Measure and reiterate

In your house, you might ignore the occasional creak and dripping faucet, but you know it’s time for a change when a roof tile misses your head by an inch. On a website, signals are often more subtle.

There are three main sources of information to assess your website’s condition: performance data, customer feedback and your gut feeling.

Your target in this prelude of your website relaunch is a list of issues, each with a note on how the status quo differs from the desired condition.

Numbers

Everyone in your organization will have an opinion on your website. These opinions go in various directions, making it difficult to draw meaningful conclusions. Additionally, you and your colleagues experience your website very differently than your average customer. You see your website every day; you quickly get tired of it and develop a gut feeling that it needs an update.

Numbers are an antidote to this subjective bias. While not for many things, Amazon is a positive example for this. Their website definitely doesn’t follow the latest design fads, although they have the resources to properly A/B test. The reason is that their A/B tests show that implementing new designs won’t pay off.

So, before you dream up a whole new website, look for dips and plateaus in your most important KPIs. These typically include conversion, purchases, visits or jump-off rates, but also technical specs like page speed. Then you have some solid evidence on your hands. Popular tracking tools: Google Analytics , Matomo and Hotjar , Google’s tool for Page Speed Insights .

If you’re not quite sure what good and bad numbers look like, it helps to use benchmarking, comparing your website’s performance to industry standards and your direct competitors. Here’s how you do it .

Apart from the data gathered on your website, there’s your website’s performance in search engines. As your ultimate power user, Google’s crawler visits your website to check anything from keyword fit to website freshness, but also loading speed and overall mobile-friendliness.

Consequently, the development of your search rankings can tell you something about your website’s SEO and, to a lower extent, its overall usability. For a comprehensive SEO analysis, use tools like Ahrefs , SEMrush or MOZ .

Of course, the definition of failure and success depends on the goals you set. Thus, start out by comparing your objectives and data, looking out for some of these relevant metrics:

• Ranking in targeted keywords (compared to competition)
• Search terms people used before finding your site
• Ratio of visits to leads
• Content that generates leads
• Ratio of mobile to desktop visitors
• Most and least popular pages

Some metrics are partly dependent on your website and on the setup of your marketing campaigns off-page, such as on social media or through ads. It’s about the alignment of those two.

• Pay per click cost per lead
• Visits and leads from social media
• Monthly visits from backlinks
• Overall marketing cost per lead

Customer feedback

Another thing that’s hard to argue with: the customer. Their feedback may be subjective, but it’s usually honest and specific. What’s more problematic, only few customers sacrifice time to tell you their opinion. Most visitors who experience issues with your website won’t bother telling you as much. They’ll be busy looking for an alternative.

Of course you can use specific tools to gather more customer feedback on your website or set up profiles on review platforms like G2 , Capterra or Trustpilot . Our experience, however, is that the best customer feedback is indirect. It’s the subtext of interactions customers start with you to overcome obstacles they face on your website.

If you offer your customers a direct, on-site contact channel like live chat , you don’t have to rely on their altruism. The questions that customers ask you will inform you about sections of your website that are unclear, illogical, or not working properly.

For example, if you get frequent questions about shipping options, you’ll know that the information is either hard to find or missing on your website. Click here to jump to the section on adding contact channels during a website relaunch.

Another good practice is to conduct customer interviews . In these, you can get insights not only on your customers’ experiences with your website, but about their expectations, what they really care about. If your relaunch is not all error-fixing (it shouldn’t be!), this is your progressive element.

Since we started conducting customer interviews in 2020, we hear the words our customers use to describe their needs and our copy suddenly reads somewhat abstract in comparison. With our next iteration, we plan to use many of the words and phrases that we’ve heard customers use. To write copy that resonates with them, it makes sense to use their very own words.

To make collecting and categorizing of the feedback you receive easy for everyone, set up a dedicated platform, for example in Asana . This will allow you to quantify the feedback, see which issues are most common and urgent, and eventually make more informed decisions for your website relaunch.

Your infallible gut feeling

As explained above, gut feelings are prone to subjective bias. Consequently, your sense that “something’s off” won’t convince neither your colleagues nor yourself. Still, don’t discount that feeling just yet.

It’s true that assessing your website design is harder than, say, page speed. A lot of it is about aesthetics, which is subjective and constantly in flux. But if you know your website or product well, your feeling is likely informed by underlying usability issues. In order to use this valuable source of information, you need to lay them open.

For instance, if you feel like you’ve grown tired of your home page’s design, you might have unconsciously visited home pages that made yours look outdated in comparison.

To specify your intuitions, you could conduct a systematic comparison between your own and external home pages. You would note down in which attributes they differ and why one is superior to the other. Eventually, you’ll get concrete issues that you can order by priority and decide to tackle or ignore.

From our own experience, we know that the success of relaunches often stands or falls with the right decisions made at this stage. So before you start drawing a roadmap, let’s get this right.

Stakeholder management is a very important part of a website relaunch. Since your website is the face of your company, it reflects the work of many people. Some of them will have direct voting power, like the CEO, all others will just have strong opinions.

In this respect, we have committed two mistakes in previous relaunches that can be learned from:

1. We did not explicitly specify the roles of the different stakeholders. Between the project manager and our CTO there was disagreement over the style of the website’s main menu. While everyone agreed that Stripe style dropdown menus look great, one side really wanted to implement it and the other side argued that it didn’t suit Userlike’s style and we didn’t have the content to fill it up. To avoid such conflicts, it’s good to clarify roles. That’s why we now use the ARPA model .
2. We worked in relative isolation. The project manager would collect feedback from our CEO, but not schedule feedback rounds for updated drafts from others in the company. Feedback was only gathered at the beginning, from the prime stakeholders, and at the end, from everyone in the company through an anonymous survey.

This is what we’ll change in the future:

• Specify the roles based on the ARPA model.
• Collect feedback on the current website from everyone in the company (our company size allows for this). Not anonymously, because then you can’t weigh the opinions of people based on their perspective and experience.
• Plan in more feedback rounds based on the drafts. From the main stakeholders, but also from other colleagues. Even if people aren’t experienced in a certain area, they often still have good intuitions, criticisms and ideas.

Concerning the last point, we’ve noticed that there often is more value in criticisms than in direct suggestions. It hardly ever happens that people independently make the same suggestions, but it’s often the case that different people independently point out the same areas to be improved. They have the right gut feeling that something is off.

When roles are clear, go through your issue list with the stakeholders potentially able to solve them. Ask them to share their suggestions on how to best tackle an issue and decide which team(s) will be responsible for what. Ideally, you’ll also get estimations of how much time a task will consume.

As you don’t want to go live with any half-baked pages or features, it makes sense to cluster issues together that belong to the same website section.

You want to end up with an overview that allows you to estimate the workload both per feature and per team. Along with your teams’ resources, this is the basis of a realistic roadmap.

Okay, let’s sum up: You know that a website relaunch is warranted. You have a bucket list of issues, based on data and ordered by priority. You know your budget limitations for the whole relaunch and have ideas for potential fixes along with information on what they’d cost. Your next step is to decide what to include in the upcoming relaunch and in which form.

Fixing issues: thorough vs. many.

Comparing your list with your budget, you’ll find that you can’t tackle every issue at once. Some will have to go into your backlog . In conversations with your team, you’ll also find that there is often more than one way to address each issue: the easy, the thorough, and everything in between. That’s an issue in itself because the workload for each issue affects the number of issues you can manage.

Of course we’re all searching for solutions that are both easy and thorough. When these are in short supply, and they usually are, it helps to go back to basics. Enter first principles .

Put simply, first principles are the core beliefs about something that you know to be always true. They can act like a compass, showing you if individual steps will lead you in the right direction. This is especially helpful when the best decision seems unclear despite plenty of data.

In a relaunch, following first principles would mean to look at the core elements that make up a great website for your business. Examples could be “our website needs to have an intuitive structure” or “full accessibility of information”. Once you’ve grasped these building blocks, you can shuffle, rearrange and apply them to your unique situation.

As to methods, there may be a million and then some, but principles are few. The man who grasps principles can successfully select his own methods. The man who tries methods, ignoring principles, is sure to have trouble.

Harrington Emerson

At first sight, adding principles to priority and cost of fixing an issue may seem to make things more complicated. But you’ll see that it’s a technique that adds clarity, not complexity. It’s a factor that helps to reassess priority. Here’s a comprehensive overview of the most popular models for product design and management .

In terms of SEO, website relaunches are a double-edged sword. While updating content and links can boost traffic and conversion, you also risk losing hard-earned positions in Google’s search rankings. We’ve collected a few best practices to help you take the profits, but avoid the losses.

Define performance goals

If you haven’t already, set traffic and conversion goals for certain sections of your website (product pages, blog etc.) or for individual pages. The latter is more precise, and more time-intensive.

Base your goals on previous performance and make sure they’re always connected to your overall business objectives. As mentioned before, weighing up investments is key in a website relaunch. Setting arbitrary goals is one way to lose sight of what’s important.

In case you’ve just stumbled over the word “conversion”, you’re right. It’s not directly related to search engine rankings and organic traffic. However, as MOZ explains in this post , the two have some mutual benefits. Thus, many of the actions you take in your relaunch will affect both.

Analyze and classify your pages

It may sound simplistic, but the most effective way to protect rankings and performance is to only change what needs changing. Because this requires knowing the strengths and weaknesses of your website, an SEO audit is a great starting point. It provides you with the data you’ll need to make informed decisions further down the road. Here’s a nice process guide by Ahrefs .

You can use the data you’ve gathered in the audit to categorize and order your pages by performance. There are various attributes that you can throw into the equation. The most basic ones are traffic and conversion. For more detail, you could add shareability, inbound links, keyword potential, keyword optimization – basically anything that influences traffic or conversion.

A simplified classification could look like this:

After sorting pages into one of these categories, you can look into their detailed attributes. Knowing what makes them successful in terms of traffic and/or conversion is particularly useful if you run into the classic dilemma of improving a well-functioning system.

Let’s say you’re planning to update your complete website’s imagery and UI. As a matter of consistency, you don’t want to exclude your best-performing pages. If you know what drives a page’s high conversion, you can steer clear of any changes that could affect these attributes.

On the lower end of the spectrum, you can get creative. There’s not much to lose on your notoriously bad-performing pages, except the time that you spend on lifting them up. If such a page can’t be saved by partial improvements, you might even consider removing it (more on that later).

The vast majority of your pages will lie somewhere in the middle between top and worst performers. This means that you can mostly leave the kid gloves off, but should still keep a close eye on a page’s performance drivers when you update it.

Max out existing content

During a website relaunch, there are basically three options for any page: keep, improve, or trash (next point).

Repairing things is usually more economical than replacing. You’ve invested time in your existing content. It may be outdated, but in SEO, simple tweaks can already rekindle the attention of search engines. Here are some proven methods for raising on-page SEO by MOZ .

While planning such changes to your website, it’s wise to check if they collide with any other intended changes in your relaunch. Since SEO is influenced by so many factors, this is a permanent possibility.

Suppose you want to boost your image SEO on several pages by replacing photos with vector graphics. Now, if your redesign includes plans to replace vector graphics with photos, the exact opposite, then you have to weigh up which change matters more.

Update your page organization

If your content itself is neat and tidy, make it easy to find for search engines and visitors by updating the underlying website architecture. Mostly this consists of updating internal links and URL structures. Switching to a more SEO-friendly URL organization is a SEO practice, but it also benefits UX because it structures your content in a way that feels intuitive for your visitors.

Another interesting approach to keep up with ever-changing search habits and algorithms is that of pillar-based content and topic clusters. You set up single pages that serve as a starting point and overview for any related topics, all pages of a cluster are interlinked. Apart from the intuitive feel for visitors, such logical clusters benefit the ranking chances of each page that belongs to it. Read this post to learn more about pillar-based content.

When we followed this approach in our own, major blog redesign, our main focus was to provide a better structure. Before, our blog had basically consisted of a chronological list of posts that would only show a limited number of articles per page. You’d have to click to the next page to reach older articles.

With more than 400 posts at the time, this meant visitors – and crawlers – had to click and scroll through dozens of pages in order to access all our content. What’s more, it was not clear whether pages were related. Our new structure helped us to convey this to readers and Google.

Our blog’s pillar-based content structure.

First we displayed all posts in a long list at the bottom of the page. This means that all content is accessible for crawlers with a single click. Second, we set up an infrastructure that allowed us to build pillar-based content. The above-the-fold area remains a flow of our latest articles, but a new section below now features categories, in which we can present evergreen pillar posts.

Set 301 redirects and prune your content

If you’ve updated your website structure, you also want to make sure your visitors are safely transferred to the new URLs. To do so, you set use redirects. It’s a straightforward process, as this guide shows.

If the issue isn’t a page’s URL but its content, things get a bit more complicated. Some pages are so outdated or irrelevant (low traffic, low conversion, no backlinks etc.) that improving them would require recreating their content from scratch. Two options remain: delete or redirect to a suited source.

While deleting pages may sound negative, it’s actually a productive exercise referred to as “content pruning.” As in horticulture, from which the term is borrowed, cutting back dead branches frees space and energy for new and existing ones.

The rule applies to your garden and your website because Google works on a crawl budget . This means that by removing uninteresting pages, you increase the chance that their crawlers find the valuable stuff. So, if there’s no alternative to redirect visitors to, cut away. To learn more, read Ahrefs’ complete guide on content pruning .

If you have a relevant alternative page that you can send visitors to in good conscience, set up a redirect.

Improve the page speed

With human attention spans continuously decreasing , you don’t want to let your visitors wait. They sure won’t hesitate to get on the next ride. While page speed is pretty important for UX, it also affects SEO. Here you’ll find some best practices to increase your page speed.

Update your sitemap

You can imagine an XML sitemap as a ground plan of your house. It shows search engines where your most important pages are, so they can more efficiently crawl your website. Once your relaunch has gone live, create a new sitemap or update your existing one and submit it to Google. Another Ahrefs post with everything you need to know.

Redesigns are more than just aesthetics. They aim at improving the user experience and thereby, key metrics like the conversion rate.

Probably your designers will come up with the actual designs. But it’s the project manager’s responsibility to convey the goal of these changes, so the designers know what’s desired. Too narrow boundaries can stifle creativity. But boundaries that are too wide will cause uncertainty and, down the road, dissatisfaction for everyone.

We’ve found that to be aligned from the start, it helps to settle on a brand guide with the design team beforehand. Such a guide goes beyond design technicalities like spacings, colors, fonts, etc. It covers things like buyer persona, what type of impression you want to make, your brand values, or your intended tone of voice. Here’s Fiverr’s manual for creating a brand style guide and 50 examples to get inspired .

Once you know what to aim for, you can start making more concrete plans for your redesign. Compared to technical and structural changes, redesigns pose a lower risk for hurting search rankings and visibility, but it depends. If you toss in text changes, which we already covered above, the risk will rise. If you gravitate more towards a facelift, which includes mere visual enhancements, the risk will drop.

Google’s crawlers are built to view websites like humans and therefore, they care about UX. Probably though, they don’t have the same sense of style and aesthetics (yet). This means you can truly tailor the website design to what your customers like. After all, that’s what Google suggests, too:

Focus on the user and all else will follow.

#1 of Google’s 10 core principles

Your website’s design is a world of its own. Capturing all the possibilities in detail would go beyond the scope of this post. Instead, let’s settle with three main elements often used to revive a website’s look.

Update your colors

If your brand already has its own color scheme, you can experiment with slight variations first and see if that’s enough of a change. This can entail removing and updating existing colors. The more you change, the greater the novelty, but also the risk that other elements will not fit the new style. In this post , online bank N26 describe their experience from start to finish.

Five phases of the color update framework by neobank N26.

No matter how much novelty you seek on your website, it’s a good practice to create page or element mockups in monochrome first and then add colors one by one. In a clean slate, small changes have a bigger impact and each color can be viewed by itself, not in contrast to existing ones.

For more tips, and tools, we recommend Wojciech Zieliński’s guide to color usage in UI design . For a big bouquet of inspiration, check out these 50 websites and their color schemes .

Update your typeface

Your typeface can be a subtle supporting act to your content or stand out and deliver a message of its own. As one of your brand’s most enduring identifying marks, you don’t change it every few months .

Since on most websites, people will have to read text in order to use the site, there are many aspects to consider: readability, aesthetics, mood, engagement and some technical questions.

A new set of fonts can change the face of your website with just a few lines of code. But just like with colors, the more you deviate, the greater the risk that something no longer fits. The most common example is a bigger font that causes line breaks and margin violation in a content box. To choose wisely, read this classic post on Smashing Magazine .

Update your icons

Icons play a bigger role in software interfaces than on websites. Still, there are few websites that do without them. And why would they? Icons are a fast track for information transmission. They help your visitors to make sense of your website without needing to read more text.

Besides the usability benefits, they can also convey your idea of style and consistently showcase it across all pages. That’s information and branding, wrapped into tiny elements. As such, similar to typefaces, they can have a great impact on your visitor’s experience. For better or worse, as this analysis of Google’s new icons shows. Here’s a helpful guide to iconography in user interfaces .

Go with the flow

Just like any design field, web design is constantly in motion. You don’t have to be a first mover and blindly run after every trend. But you should try to avoid elements that have clearly surpassed their lifecycle. Some of them might still be widespread. Some examples:

• Image carousels
• Web-safe fonts like Arial and Times New Roman
• Complete focus on above-the-fold content
• Not enough whitespace
• Stock photos all over

To see what’s new and soak up some inspiration, check out dribbble . For a complete example of a website redesign process, check out this post by Shopify designer Filippo Di Trapani.

If we’re talking about user experience, we’ll have to talk about the ways in which customers can reach you. Not every question can be answered by an FAQ and your website’s content. Also, many customers simply prefer a real interaction.

A website relaunch is the perfect moment to add new channels, as the motivations for both often coincide. Let’s look at some benefits of a direct contact channel on your site that might also already be on your list of website relaunch goals:

• Boosting conversions
• Preventing cart abandonment
• Increasing customer satisfaction
• Personalizing your brand
• Collecting customer data and feedback
• Tracking success
• Giving you a competitive edge

Great support can be delivered on various channels. Still, you’ll probably already display your support email and phone number more prominently on your contact page. Not much room to grow there.

That’s why many companies doing a website relaunch consider a channel that’s part of your website and always right at your customer’s fingertips, like live chat . It offers all of the benefits listed above, plus some more:

• Reducing service costs and raising efficiency
• Allowing for automation (via chatbots)
• Boosting agent motivation

Userlike’s website chat in action.

Adding chat to your website is straightforward. Yet, if you add it within your website relaunch, it can be part of your holistic concept . This means that the channel can be seamlessly embedded on the pages it makes most sense and, vice versa, you can create pages with that new channel in mind.

To learn more about the benefits of live chat, check out this post . For a comprehensive comparison of all relevant customer channels, click here .

Once you’re done fixing growing pains and have given Google as well as your visitors some time to settle in, take a look at the numbers. Compare the parameters that motivated your relaunch to the goals you set in its planning stage.

You should ignore the gut feeling as a parameter here, as you probably had plenty of time to make up your mind while your new website was on a staging system .

The data you gather here is the starting point for the next iteration on your website. You’ll probably not require another relaunch for some time, but until then, there’s always something to improve.