Picture of Conlin Durbin

Conlin Durbin

August 18, 2017

10 Features You Need to Have for a Killer B2B Website

B2BWebsiteFeatures+Mimir

Oftentimes, determining what website elements to incorporate can be difficult. So I’ve taken time to break down Mimir’s top 10 list of must-haves for any business website.

I. Purpose

Whether providing information, collecting prospective client emails, or securing signups, all websites have a purpose. Too often engineers and marketers forget to address that purpose when building websites for their customers. Keeping a strong focus on the purpose of your company’s website and each page therein, will help you craft a website that does exactly what it is supposed to do.

Mimir’s website purpose is to allow instructors to self-educate on our product (Mimir Classroom). Our team wants them to understand how the platform can improve their student’s experience. If instructors are guided to schedule a site walk through our outreach team can hear their pain points and share of relevant platform features. With this in mind, our marketer and developers have worked to be sure each page does it’s job. For example, check out the navbar on MimirHQ:

MimirHeader

We’ve drawn attention to the most important purpose of our site — seeing a demo. Product features, pricing, company information, and the blog flank the intentionally high-contrast button that also acts as the CTA (call to action).

II. A great headline and supporting sub-header

Did you know that a majority of your website visitors leave after reading the headline? While you’re trying to craft unique content to get visitors stick around, making sure you have a good headline helps you retain the right people in the process. I’d recommend writing a headline that sells the benefits of your product, then use the sub-headline to explain how you do what your headline says.

Close.ioReference

A great example of a headline and sub-headline text from Close.io.

Close.io is a perfect example of this — their headline is simple, “Close more deals”. I instantly know what I could gain from sticking around on this page. The sub-headline then goes on to explain exactly what Close.io is and how it could help me. When writing good headlines, it is often good to reference the CoSchedule Headline Analyzer. Run through some possible headlines and settle on one that conveys the right information and scores relatively highly.

III. A CTA that captures attention

A good CTA is the Pièce De Résistance of your website header and should flow naturally from your headline and sub-headline text. Keep in mind your purpose and give your visitors a way to achieve that purpose. Seth Godin, author of The Big Red Fez, details that all web pages should have a “banana” — a call to action that stands out. If you can’t find the “banana” on a page, that page needs improvement. Here are some basic rules for a good CTA:

Use actionable language: i.e. “Start your trial today” or “Get Spotify Free”

SpotifyCTAExample

A great example of actionable language from Spotify.

Make it stand out. Use supporting elements to draw attention. Arrows, pictures of people, and contrasting colors all help to demand the visitor’s attention.

YalabotCTAExample

A great standout CTA from Yalabot

Make it easy. Your CTA should be no more than two steps. Don’t include a huge form that your use needs to fill out before proceeding. Instead, collect an email and opt them into permission marketing. Make sure your CTA takes the visitor somewhere that has value. If you have an app, get them in as soon as possible. If you are selling products, get your visitor to the store page as fast as possible.

IntercomCTAExample

A simple CTA email fill from Intercom.

IV. Basic design language

Creating and maintaining a brand is incredibly important for many aspects of a business. Keeping consistent design throughout your website helps your users know where they are and what they should do. Check out Dieter Ram’s 10 principles of good design. Know where your users are getting hung up and smooth out your user experience in those spots.

V. Social proof

A great way to make sure the right kind of visitor is staying on your site is to show examples of the other people that use your service or buy your product. If you want to sell to startups, show that startups use your service. Twitter quotes and testimonials are a great way to show off what your users think about your business. In addition, showing faces can help humanize your product and help visitors even better relate to what you are selling.

BufferQuoteExample

Social proof works well in your headline too . Using headlines like “social media marketing, trusted by hundreds of businesses” is a great way to show what you do and that your service has legitimacy.

VI. Proper <head> elements

MimirWebsite+OpenGraphHeaders

An example of how Open Graph headers can display your content on social media.

On the technical side, ensuring your website is setup with the correct <head> tags will help your SEO and sharing potential greatly. At the very least you should make sure you have the Open Graph headers. These help your site show the correct information when pasted into platforms like Facebook, Slack, and Twitter.

It is also useful for Google Page Rank to ensure you have some other elements in the <head> of your website. For a complete list, check out this.

VII. Real photos and custom graphics

Keeping photos and graphics custom can be difficult at times. It’s easier to visit a free stock photo site like Unsplash for free story telling tools. However, your original content can suffer the consequences. Give your website the outstanding pictures it deserves. If you can, look into getting a real photographer to take pictures of actual customers or your team. If you are using graphics, hire a designer or pay someone to create custom vector files.

StockPhotoExamples+Mimir

The article on the left looks nice, but there’s a slim chance the author actually took this photo. The article on the left seems more customize and legitimate.

VIII. Accessibility support

An accessibility report ties in with good design language and is massively important. Look at some of the statistics around the different types of accessibility problems your visitors could have:

Statistics from Interactive Accessibility

A good starting place for accessibility on your site is making sure that keyboard navigation works well and that you have alt tags and ARIA roles on your images and input fields. As an extra win, there are many areas that accessibility and SEO overlap, which are covered in this Moz article.

IX. Fast loading times

A fast loading website is of paramount importance. Google uses it as a metric for determining site rank. Sites with long loading times have higher bounce rates and much lower conversion numbers. Even if you have to show a loading icon, don’t present your user with a blank page or one that is only partially loaded. Enable compression on your site and make sure you have at least basic functionality when Javascript is disabled or only partially loaded. Check out this article for more information.

X. Good content ratios

Finally, keeping a good ration of text to graphical content on your site makes it easy to scan the page for relevant information, which helps keep visitors on your site longer. Don’t drop your visitors into a page full of text and expect them to read everything. Place explanatory and presentational graphics and videos around the site. To ensure a solid ration of content types, make sure all important content on your page is represented in at least two ways. So if you have a video of a site feature, also have a small section of text explaining the feature as well. If you have a large chunk of text about your processes, make sure there is an image that helps illustrate that process. Use different font sizes to indicate importance and help guide the flow of the page.

StripeUXExample

Stripe has a wonderful mix of content, using images, video, and text in conjunction to create an experience for the visitor.

A successful B2B website can certainly have more features than those listed. I’ll challenge you to use this article as a resource as you begin updating or building your website!