This practical “how to” review of B2B website design using WordPress is designed to help you attract, nurture, and qualify more prospects. Watch this webinar to learn what specific B2B website changes generate more leads.
Slide 1: Welcome to Brainrider Better Marketing Clinic.
If you can’t stay through the whole presentation make sure you check out cheat sheets and downloads from today’s presentation [brainrider.com/b2b-cheatsheets].
Slide 2: Let’s start with WordPress.
Why WordPress? There’s a number of great reasons, but the key one is that it has become the standard content management system. With over 50% of the top ten thousand websites on the web using WordPress as their CMS.
Why? Well, the key reason is that it is a very user-friendly Content Management System, that allows marketing departments to integrate content publishing and lead generation activities more easily, with faster deployment, than other web environments. It also has a really large installed user-base, which means a large developer base. There is lots of talent in the marketplace developing lots of great applications and add-ins for WordPress, and providing designers and developers, and team members will know how it use it.
The WordPress user experience is formulated around the concept of posts and pages. Posts like a blog post or resource library post, allow you to do a serial list that then feeds into a database that is then published as webpages. Web pages allow you to manage a more traditional page structure, that is static as opposed to blog posts which are linear. The user experience from WordPress allows you to edit, change pages, create pages, edit posts, create posts, with a minimum of HTML or intranet design and coding.
What we’re looking at right here is an example of the “edit page” screen within WordPress. You can see the WYSIWYG (What You See Is What You Get) editor that works much in the same way that creating and editing a document in Microsoft Word works. In this new page template, you can choose different templates, you can check for SEO strength, you can add links, add tables, graphics, different fonts, much in the same way as you would create a document in the real world.
So, that user-friendliness combined with a robust and secure development platform means that WordPress should be the default choice for most B2B website development. There might be some reasons, high-end E-commerce, large volume traffic that you can consider other platforms but you should be benching them against the cost, development time, and practical nature of WordPress as your CMS.
Once you’re in the space of WordPress as your Content Management System for developing a B2B website, there are 5 great ways to make sure that your B2B website is delivering the results that you need.
- Prioritize your objectives: Starting with planning against your objectives and prioritizing the objectives you need your website to deliver against. I will talk a little bit about that from a B2B lead generative perspective.
- Organizing your website to target what your customers want to know: It seems like an obvious statement but we will look at a couple of examples to explain exactly what we mean with that.
- Design page layouts based on your objectives: a page layout or template for a B2B lead generation site must work quite differently, with different priorities, and different design priorities than your average website page.
- Functional requirements & plugins: I will touch on and cover some of the functional requirements and plugins you should use within a B2B lead generation website.
- Budgeting: Finally, I will give you some parameters around a budget.
Slide 6: Prioritize Your Objectives.
Every B2B lead. Gen. marketing website and marketing investment has a mix of practical marketing priorities from attracting prospects to acquiring prospects, to nurturing prospects once they’re in your pipeline, and then qualifying them as sales ready.
The key is not to state those objectives, but to understand the priority of them within your next 12-24 months, the lifespan of a typical B2B website. If you have lots of names within your database, then your focus should be less on SEO optimization and attracting more traffic to your site, and more on actively engaging visitors to your site based on nurturing campaigns that you’ve put in the market.
If you are having trouble qualifying the volume of leads you are getting, then you need to prioritize the design information architecture and technical structure to help you do a better job of identifying sales ready leads.
Slide 7: Customers Look for What They Want to Know.
Once you've identified your priorities, and for many companies, it starts with attracting more traffic, than the real strategic place you need to start in thinking through your website is an understanding that customers are looking for what they want to know, not what you want to tell them. Often what they want to know is practical information related to the decisions they are making as a buyer. You can see in this google search, for example, google is suggesting many of the practical suffixes that searchers will add to a buying decision.
In this case a buyer may be looking for IT outsourcing but the kind of content they are looking for and search for and will travel to and engage with, includes information like trends, or companies doing it, articles about it, pros and cons, so that they can get a sense on a practical basis of understanding their problem, understanding different ways of solving their problem, and then ultimately who's available to help them solve it.
Slide 8: Before - Website Example.
If you take that thought, “buyers really looking for what they want to know to assist them on their buyer journey”, then it frames up your thinking about website design and architecture differently. On the screen, you have an example of a Brainrider client. A terrific niche high-end, software business out of Houston, Texas, called Bridgeway Software. What I have on the screen right now is a “before” shot of their website and it’s a very traditional B2B site. In this case, Bridgeway Software does ERP systems for corporate counsels at fortune 1000 companies and so their menu and organization is primarily around solutions, products and credential information including their clients, partners, services, support, news and events, and “About Us”. Within that main navigation, any of the information that is on the balance of the page is a terrific brochure for Bridgeway services and credentials.
The challenge is, most of that information requires you to already know that Bridgeway is a provider before you are going to find it or even engage with it. So, we took a strategic process with Bridgeway that focused on who their customers are, different customer segments, the needs and pains of those different segments and how that translates into what they want to know as part of a buyer journey.
Slide 9: After - Buyer Focused Site Organization. This is the new Bridgeway site. Yes, it’s updated with a more modern, streamlined design. It’s a very flat design look and feel for the site. But more importantly is the way the site is organized. The primary navigation is no longer about Bridgeway, but it's about four different needs and pains, different segments that Bridgeway targets. Instead of having them identify themselves by function, role, or industry, we are more valuable, having them identifying themselves by need. In this case, it’s Manage attorney productivity, manage legal operations, measure legal department performance, or maintain corporate governance.
Working with Bridgeway and their sales teams, we were able to identify these key pain points as the areas that Bridgeway most commonly sold against. The navigation includes other elements: products and services, clients, career, about us information is still there. But it's not the primary route the buyers take through the site. In this case, the primary objective of the site is to engage with, convert, nurture, and ultimately qualify buyers.
Slide 10: Page Layout Best Practice.
When you’re designing your site you really need to understand how people scan and review sites. The job of a graphic designer is to be innovative and fresh in their designs and so they often pursue designs that look and feel fresh. That’s an important part of your website design and development process, but so is a good understanding of page layout best practice. Eye-tracking studies, which really are studies that take a look at the user experience on websites, consistently identify the following pattern of viewing
Eye-tracking studies, which really are studies that take a look at the user experience on websites, consistently identify the following pattern of viewing. Most western website visitors start in the top-left corner, then proceed across the top of the page, because we’ve been trained as readers to start at the top-left and read left to right. That means that with this website example they’re seeing the branding, a little bit of a description of the company, and the main navigation and calls to action, right away.
Next, the eye drops down the left-hand side of the page and crawls across to the right, and then generally does not go below the fold. More than 70% of the traffic of most B2B sites never gets below the visible page that they see when they land. So, that shaded are that you see in this example, we would refer to as really, a big golden triangle. That is where your main messaging needs to sit to make it most easy for visitors to see information that is relevant and engaging.
Slide 11: What the Visitor Sees First.
When they visit a site, this is what they are going to pick up from this design [image on screen] The combination of eye-tracking and graphic design means that the brand name shows up, the key headline on the page shows up, and some of the graphics in the far-right corner will show up because the graphic design drive your attention in that direction. When you’re planning your site, you really need to think, what's the visitor going to see first, how do I work with how visitors consume webpages so my main messages show up.
Slide 12: Prioritize your Page Layouts by Objective.
There’s a rough wire frame which talks about those objectives. You definitely want your branding and main messaging, primary navigation, secondary navigation, calls to action, then you usually have room for up to three messages before visitors’ bail from your page. You want to make sure you prioritize the content that you’re placing on not just your homepage, but on every page, by objective, that you're following eye-path best practice, that you're keeping all of your important calls to action above the fold, because 70% of your visitors will not get below it, that you're including SEO copy so that Google is also understanding the page and that you're highlighting your most effective calls to action.
Once you've got your objectives in place and they’re translating in your design priorities, then you move into the development side. WordPress means that you don't have to get that involved in the development yourself, you’ll work with a developer.
We have 7 Functional Requirements to Consider:
- Built-in SEO - Yoast: Once you've got your objectives in place and they’re translating in your design priorities, then you move into the development side. WordPress means that you don't have to get that involved in the development yourself, you’ll work with a developer. We have 7…. There are some tremendously powerful built-in SEO management tools that will allow your marketing team to manage the on-page SEO on your site. Make sure that you ask your developer to follow Google’s recommended best practices for site design and coding and that they include a built-in WordPress plugin called Yoast or similar tool to allow you to manage SEO on a page by page level.
- Lead Generation Sidebars - Custom Sidebars: WordPress allows you to sue and develop custom sidebars so that you don't have to have the exact same sidebar on every page, allowing you to change up your messaging and calls to action more contextually.
- Migration and 301 redirects - redirection: When you launch a new site, you need to manage 301 redirections on an ongoing basis you need to make sure google doesn't lose track of important pages on your site, so a redirection tool is an important addition.
- Forms - gravity forms/Pardot: If it’s a lead generation site, you're going to end forms. If you don't have any budget then consider gravity forms, if you are a sophisticated B2B software technology or software company with a marketing organization truly consider marketing automation in addition and integration with your site development. We are a Pardot salesforce partner company so it’s definitely our recommendation. We have worked with many different platforms and in particular, integrates very well with WordPress.
- Breadcrumbs - NavXT: Google recommends using breadcrumbs but from a user-experience perspective it also helps, and there’s a great plugin called NavXT.
- Responsive design - coded or themed: This is mandatory for site development, responsive design allows your site to be optimized for different devices, so tablet and mobile experiences are strategic and as powerful as your laptop or desktop experience.
- Multi-language - WPML: If you’re working in multiple languages, WordPress does a tremendous job of multi-language implementation, allowing you to run one website, one website administration, coding, and technology but delivering multiple languages in an incredibly configurable way, using a plugin called WPML.
Slide 14: WordPress SEO by Yoast.
Here is an example of the WordPress SEO plugin by Yoast. You can see that it’s actually a very user-friendly plugin, and it guides you in this middle zone as to whether you've done a good job on page optimization. in fact, if you click on the page analysis tab, it will tell you additional best practices you can use to optimize your site.
Slide 15: Custom Sidebars.
Custom sidebars allow you to manage calls to action and related information this area down the right- hand side of Livingston’s web-page has sidebars that are customized to the content on the page, and using a marketing automation tool like Pardot you can actually personalize that content based on the record within Pardot so that you can have different calls to action or content based on a prospect’s previous behavior.
Slide 16: Custom Sidebars - Relevant CTA’s.
In this case, you can see this page is actually filled above the fold with a number of different relevant calls to action. From a highlighted “get a quote” at the very top, to “subscribe now”, “related resources”, “contact us”, repeated the “get a quote” which is their primary call to action, or even “subscribe for our latest webinar”.
Slide 17: Customer-Focused Navigation.
On the left-hand side in this page example for IRT imaging analysis, you can see the use of breadcrumbs to allow Google and paid visitors to understand where they are in the hierarchy of your site, a customer-focused navigation again, and then off to the right-hand side custom sidebars.
Slide 18: Responsive Design.
Let me show you an example of Responsive design. Our client, Berkeley payment solutions, developed a very modern website that really focused on pre-pay cards and their usefulness in a corporate perspective. This is the site when you view it on a laptop, [image: Responsive design-mobile view] This is the site when you view on a mobile device or tablet. It actually goes from a landscape view to a portrait view, or a horizontal layout to a vertical layout, allowing you to scroll down your iPhone or android device and find the information that you need, but still prioritizing the right calls to action regardless of the environment that you're in.
Slide 19: B2B Website Budget.
The final Section I’m going to talk to is budgeting for your website and some guidelines around that, that really include breaking out the elements that you need to pay for, from the briefing, the site design and coding, wireframe, architecture, and templates. those are all key strategic elements that were weaved into to the first part of today's webinar. On the content planning and development side, that’s critical and often best handled by the client themselves, with some guidance and we certainly provide that guidance to make sure the kind of content you are developing is both Search engine optimized and buyer optimized by targeting what your buyers want to know. Migration and content loading is an important part of the process. Then technology integrations, whether it’s the different plugins that we’ve recommended or set-up and optimization of marketing automation, all of that should be there. In terms of technical search engine optimization, you should not be paying your developer for that. If they are developing sites that are not SEO from the outset, then really I wouldn't use them as a developer. The purpose of your site is often to be found. The budget ranges from $20,000 makeover to a more typical B2B site design and development project of about $45,000, to some very sophisticated or large sites that can be $100,000+.
Slide 20: Pricing Examples.
To put that into perspective here are a couple of example sites. On the left, we have a website refresh, which really didn't change the branding or the graphic design of the site, but moved to a customer-focused navigation structure and some customer focused calls to action that project is under $20,000 to do, including the strategy and template development. Where the project the right, Livingston's website, really fell into that large site category due to the complexity of the site, the number of pages, and the robustness of the development cycle.