Marrying form and function with a website redesign

| August 1, 2017
Sign up to get weekly resources, and receive your FREE bonus eBook.
Thank you!

Get ready for some great content coming to your inbox from the team at UserTesting!

If you’ve made it to the build stage of a website redesign project, you’ve already cleared the biggest hurdles. Gaining stakeholder buy-in on what your site redesign should accomplish, and how it’s going to accomplish those things can be a little like herding cats. Opinions are strong. Tensions are high. Decisions are controversial. Everyone wants to do the right thing, but getting people moving in the same direction is a challenge.

Approving design concepts and wireframes is often the hairiest part of the process. Perhaps unsurprisingly, the look and feel of the site is where stakeholders get the most emotionally invested. After all, each of us is a consumer of content in our own right, and studies show that two-thirds of people would rather spend 15 minutes reading something beautifully designed than something plain. And what is “beautifully designed” is of course, personal and subjective.

The good news is, once the visual concepts and wireframes have been approved, if you’re in charge of project managing the website redesign, you’ll have more autonomy through the rest of the process. Now it’s time to marry form with function, moving your sleek new design into the build stage.

1. Gather all the materials you need to start construction

Before you start site construction, you’ll want to make sure you have all the essential building blocks at the ready. Some of these have already been mentioned in previous posts, but they’re worth repeating.

Content Management System (CMS) and supporting services

  • Have you selected a CMS platform, and arranged for hosting services?
  • Does it include a Content Delivery Network (CDN) for fast page loads?

Benchmarks of your current site metrics

  • Have you benchmarked all your important SEO metrics for later comparison?
  • Do you know your keyword rankings on Google, Bing, and Yahoo?
  • Did you look at form fills/conversions on your marketing automation platform?

Taxonomy of your web pages and URLs

  • Did you inventory your top performing pages using a tool like Moz?
  • Did you determine what should be redirected/removed using Screaming Frog?
  • Have you documented a 301 redirect mapping strategy in a spreadsheet?

Content/design assets to support your new wireframes

  • Are both your webpages and your downloadable content ready to go?
  • Have you identified meta titles, descriptions, heading and image tags for SEO?
  • Did you gather and license images, making sure they play well on mobile?

Site backup (old) and staging/design environment (new)

  • Have you created a backup of your current site content (don’t miss this step!)
  • Did you set up a staging environment and tell Google, etc. not to index it?

Pro Tip: 63% of marketers say generating enough site traffic is their top challenge. Take time before you start tinkering to document your starting point, and make sure you’re not accidentally moving back your finish line with unnecessary changes that can impact SEO and inbound traffic.  

2. Build your masterpiece, one block (of text) at a time

Once you have all those items in hand, it’s time to make your way methodically through your site, adding and replacing content only where it makes sense, and optimizing whenever you can.

As mentioned above, your search ranking (for better or worse) is directly linked to your current content. Simple updates and upgrades to content can often produce better results than wiping the digital slate clean. Spend time with each page, thinking through whether your initial strategy is shaping up as expected now that you’re laying it out. You’ll probably want to engage a few people on your team with different perspectives to take part in this process. For example, a demand generation specialist, a product marketer, a content marketer, and a user experience expert.

  • Does the page accomplish its goals, for example, explaining a product?
  • Does the language speak to the buyer’s wants and needs?
  • Does it lead to user down a (non-winding) path to deeper discovery?
  • Does it have integrated form fills, offering users opportunities to raise their hand?
  • Does it make it easy for them to share information with colleagues and peers?

You’ll also want to take a step back and see how it fits into the larger written and visual canvas you’re drawing. Is there a consistent tone and voice? Does the user get a sense of value throughout the entire experience? 72% of marketers say relevant content is their most effective SEO tactic. Perhaps that’s the reason that the first position on Google has nearly 35% click-through rate.

Pro Tip: If you’re still figuring out how to apply your buyer personas or early feedback from customer interviews and focus groups—take a look at tools like Optimizely that let you A/B test everything from copy and design choices to Calls-to-Action (CTAs) and more complicated algorithms.

3. Dial in an intuitive user experience that just makes sense

User experience (UX) is one of the most important elements of a website refresh. 95% of users say that a good UX “just makes sense.” They’re not wrong. What does a good UX look like? We’ve already talked about some of the criteria. Your site should look great, be easy to navigate, and house the right content. But what else is there?

Performs across browsers and versions, including mobile

Links work (or don’t work) appropriately, and as expected

  • Have you tested your site with a broken link checker?
  • When a customer clicks on a link that’s been redirected, does it make sense?
  • When they click on a link to content that no longer exists, is it a dead end?

Pages load fast, without errors or missing images

  • Are you taking action on your Google Page Speed Insights?
  • Have you eliminated render-blocking JavaScript and CSS above-the-fold?
  • Are you considering a tool for back-end optimization like Yottaa for e-commerce?

People want to have intuitive, authentic interactions with brands that earnestly care about their needs. And when a prospective customer visits your site and it takes too long to load, which by current standards is more than 2 seconds, or when they find it difficult to view on the mobile device that they spend 2 out of every 3 online minutes using, the impression they leave with is that you don’t care about their experience. Give UX the attention it deserves.

Pro Tip: Remote moderated and unmoderated user testing from Alpha to release will give you clear insight into buyer attitudes, preferences, and behaviors, as well as the tools you need to design an experience that delights.

Once you’ve completed these three steps, you’ll have made it through the strategy, planning and build phases. In the final post of this four-part series on how to successfully manage a corporate site redesign, we’re going to cover the launch phase. There’s lots of room for error in the final stretch, so we’ll give you actionable advice on how to mitigate risk, respond with agility, and capture windows of opportunity to take your new site successfully to market.

Subscribe to the UserTesting blog below for the next installment in our series, as well as actionable tips on how buyer insights can inform your product, website, or digital strategy.