If you’re looking for some inspiration from some of the best B2B websites, then you’ve come to the right place!
If you’re a B2B business, then getting your website right is absolutely key as this is the first thing your customers will see.
Also, making the right impression is very important as you need to encourage them to revisit your site time and time again.
In contrast to the B2C market where buyers will usually make a purchase quickly, the B2B customer journey is much longer.
That’s because there’s more thought and consideration involved as buyers aren’t making decisions with their own money.
They make decisions based on the needs of the company they work for, so they have to be 100% certain it’s right. If they choose to invest the budget in the wrong places, and it doesn’t result in a return on investment, it’ll come back down to them.
When you take all of this into account, getting your B2B website design right is a priority. From the hierarchy of information, to how easy it is for users to navigate your website, there’s a lot to consider.
With that said, we’ll be taking a look at some at some businesses who’ve got it right.
What Does B2B Mean?
Before diving into some B2B website examples, let’s get an overview of what B2B is and what makes up a B2B website.
Essentially, B2B stands for business to business. These are types of businesses that offer products and/or services to other businesses.
This contrasts with business to consumer (B2C) where the customer is your direct end user (think of brands such as Facebook, Amazon Prime, and Nike).
One primary difference here is that B2C customers will usually make a purchase quickly, meaning this is a short customer journey. However when it comes to B2B, the customer journey is much longer, as your customer needs to stay engaged beyond their initial visit to you website.
It’s your responsibility to build up their trust, and to demonstrate why they should spend their budget on your products or services. After all, like we mentioned in the intro, the buyer in the B2B market will not be spending their own money.
They are spending the money of the business where they work.
What Are the key features of a B2B website?
Before you even begin to create a B2B website, you need to know what key features are required.
Some of these key elements are:
- Traffic generation
- Design
- Content
- Conversion
Traffic generation
Without traffic, your website is just collecting dust on your server.
You can generate traffic through a number of different ways including organic search engine optimisation (SEO) and paid advertising (PPC).
Those things may sound easy, but they each require a great deal of effort.
For instance, when it comes to generating organic traffic, you need to find relevant keywords to ensure you’re appearing high in the Google Search Results pages.
By incorporating these target keywords into your website, it will be discoverable to other businesses searching for your product/ service.
You also need to start creating content that includes these keywords, and explores topics relevant to your industry.
Design and content
Before you design your website, it’s important to make sure that you have most of your website’s content first.
The reason being that designing around content is much easier than writing content around a design.
Conversions
The next step is to make sure your website will convert (turn visitors into customers).
For this to happen, your B2B website needs appropriate call to actions, forms, and lead magnets.
Without these, potential customers will not be able to get in touch with you, and you are not providing any incentives (such as a downloadable ebook for example.)
The basic idea is:
Get your visitors on your website > lead them to the correct page through seamless navigation >make it easy for them to get in touch > allow them to make a decision after the engagement (the purchase).
This should be as straight forward as possible for your audience.
Making the right first impression
Your B2B website not only needs relevant content and a good design in order for people to convert, it also needs to provide a good user experience.
To achieve this, you need:
- To know what your customers want
- To know what businesses want
- To provide a good user experience
- To encourage engagement
- To make visitors/customers remember your brand
- To provide a responsive website
Combining good content and design with all of the above, will ensure your B2B website is a success.
Knowing what your customers want
You need to understand your customers’ goals and pain points in order to deliver relevant content.
By understanding what they need from your website, you can create something that caters to their requirements, thereby increasing the likelihood of them converting.
When looking at your B2B website, put yourself in your customers shoes.
Ask yourself, “does the website make it easy to find what I need?”, “does the website look good to me?”, “does it work across mutliple devices?” and “does it offer me a good interactive experience?”.
Knowing what businesses want
Not only do you need to understand what individual customers want from your website, you also need to understand what their business needs are as well.
You need to make sure they are in need of your services otherwise they have no reason to visit your website in the first place.
Generally speaking, the business values will be an extension of the person.
So, if you know what your customers want, it should make it easier to discover what their business needs are.
Look at it like this; if you offer branding, website, content and video, and you know your customers, you will instantly be able to offer solutions to their problems when they land on your website.
This works because you have the correct keywords (the keywords your potential customers search for) along with a website that speaks to them (if you’ve completed the above steps).
Now that we are clued up on what B2B websites are, let’s move onto some B2B websites that we can use as inspiration.
The websites covered in this blog include:
We will explore:
- What the business does
- Overview of the website
- Good points
- What to take away
Credit to HubSpot
HubSpot
HubSpot is an American developer that develops products/solutions for your businesses marketing, sales, and customer service needs.
Not only do they develop those solutions, but they also market them on their own website too.
At Canny, we use HubSpot regularly for our own clients as well as developing websites.
HubSpot offers:
- Marketing Hub
- Sales Hub
- Service Hub
- CMS hub
- Operations Hub
Each of the above has an extensive range of features.
We know that HubSpot offers other businesses solutions for the above needs, so with that in mind, let’s get into why HubSpot is a great B2B website.
Firstly, HubSpot offers customers a great deal of services, so all of the information needs to be clearly presented and concise so that it’s easy to navigate.
At first glance, their website has a top bar that has links (login, logout) that are quite small in size and they do not distract from the funnels or call to actions.
This works because existing customers do not need to be enticed to click on the funnels or call to actions. If we flip this around, small links will be missed by new visitors.
In short, these top bar links are only relevant to existing customers.
After the initial top bar, the website flows as follows:
- Hero section
- Service cards (funnels)
- Community
- Customers
- Call to action
- Footer
- Live chat
The front page only consists of thr information the potential customer needs.
The hero section contains a short video that contains relevant graphics that demonstrate what HubSpot does (line chart, chat and a person using the software). Alongside the video is a piece of text with a “start free or get a demo” CTA.
This is a really good call to action as they instantly offer their free services to try a demo of their premium software.
After this, there’s more information on what HubSpot does, and the services they offer.
The key features of what each service provides are listed out along with a ‘get started’ button.
The next page (after clicking get started) is laid out in a way that does not frustrate the user.
That’s because the free software and premium software are clearly laid out side by side with an extensive checklist for each.
The top bar navigation has also been simplified, displaying only a home logo and contact number.
After this there’s a live chat option which is such a convenient way for customers to get in touch, without having to wait on the phone.
With the free software, you can get started in seconds, as it’s as simple as signing up to an account. Signing up is easy, and it can be done via Google or by completing a form (first name, last name, and email address).
The great thing is, there’s no hidden information or costs. It’s very transparent, and easily displayed for the end user to understand.
Moving on, we have the community information and customer’s section.
To ease the business into using HubSpot’s services, they show off what their community has to offer.
Credit to HubSpot
To list out a few points:
- HubSpot’s blog has 7m+ monthly visits
- 2.6m+ social followers
- 135000 customers
After that, we have the ‘previous customers’ section. To engage potential clients and build trust, HubSpot have listed the following clients:
- WWF
- Suzuki
- SoundCloud
And there’s a lot more.
Due to the fact established companies use HubSpot, it shows customers that it must be reliable and trustworthy.
At the very bottom of the webpage is another call to action which is similar to the hero section.
All of the information is concise and relevant, and only tells customers what they need to know.
HubSpot also provide a well thought out resource centre which is split into education, services, user resources and why HubSpot. There’s simply answers for most things on here and if you can’t find what you need, it’s so easy to get in touch.
To summarise, HubSpot:
- Provide a clear hierarchy of information on their website
- The information stands out to the relevant users (new and existing)
- Makes it easy for customers to get in touch
- Makes it easy for customers to find out more information
- Provides no unnecessary information
Credit to ZenDesk
ZenDesk
ZendDesk is an American company that provides software as a service that’s related to customer support, sales and other communications.
ZenDesk offers communication across:
- Web
- Phone
- SMS
- Social media
And, even better, it’s all available from one place.
The homepage of ZenDesk is quite short, meaning all of the information that you see is short and to the point.
All you’re presented with is a simple top bar, large call to action, clients, and service benefits – however, all of these sections are relevant and meaningful.
Immediately, you can see that ZenDesk supports over 100,000 businesses with some of their clients including airbnb, shopify, OpenTable, SquareSpace, Uber and slack.
Below that, simple and clear points are laid out in a features and benefits section:
- Provide support across channels
- Save time and lower costs
- Enhance productivity
- Boost customer satisfaction
Each of the above has a short paragraph underneath it to elaborate on each point.
Right below this, there’s a “start your free trial” call to action which allows people to try the software free of charge for a set period of time.
Just like with HubSpot, ZenDesk has small login links in the top bar for existing customers.
This does not distract from the main call to actions, yet is still easy to navigate for existing customers who want to log in.
Because of this, if you know what you are looking for, ZenDesk makes it very easy for you to find the necessary service.
To summarise, ZenDesk:
- Have a very simple one page landing page to get new customers to sign up
- Shows off the number of businesses they support as well as some of the clients they have
- Provides concise information on the features and benefits
ZenDesk is a very good example of when less is more. Not everyone needs a multi-page website.
A benefit worth pointing out here, is that having a small website to attract new business is very low maintenance, and you can focus on your main service offering.
The website is simply a “portal” to your services and a way to draw your customers in.
Credit to DropBox
DropBox
DropBox is an American company who offer cloud storage solutions.
Some of the features they offer include:
- Cloud storage
- File synchronisation
- Client software
Whilst the home page for DropBox is quite blocky, it works quite well as it’s split into two sides – personal and business.
It also makes the different pieces of information clear and easy to understand for the end user. There’s actually quite a bit of information here, so splitting up sections in this way is an absolute must.
At the very top of the webpage is a top bar with ‘sign in’ and ‘sign up’ links.
After the top bar, the webpage is split up into:
- Finding the right plan
- Store, sync, share, sign (learn more)
- Features
- Benefits
- Usage (personal or business)
- Partner integrations
- Number of users and teams
- Call to action
If you’re new to DropBox, the above information allows you to discover all that you need to know.
You can easily see what DropBox can do with your files, such as:
- Store and sync
- Share
- File protection
- Collaboration
Then, you can see how DropBox can actually help you:
- Access files from anywhere
- Photo backup (you can actually automatically backup photos as soon as you take them on your phone)
- Share documents with your clients (business)
- Sign important documents
- Collaborate with your team
- Optimise various documents
If just using DropBox isn’t enough for you, then they also offer a range of integrations. You can integrate your website with software ranging from Slack (messaging) to Asana (team management software).
DropBox clearly present the number of users and teams they support which currently stands at 600m users and 500,000 teams. Like we have seen with other B2B websites, this helps establish trust and credibility as large volumes of people are already using DopBox services.
The call to actions are placed appropriately throughout the website. You can easily choose between business and personal use, sign up to their services, find out the differences between each plan, and even learn more about DropBox by reading customer stories.
Credit to The Social Shepherd
The Social Shepherd
Social Shepherd provides a range of services that include:
- Social Media Management
- Paid Social
- Video & Creative Production
- Influencer Marketing
- Google Ads & PPC
The hierarchy of The Social Shepherd homepage has been thought out. It flows as follows:
- Top bar with a call to action
- Video hero section with a free proposal CTA
- Video provides a good demonstration of what you can get
- Testimonials
More about what the business does and how they do it with CTAs for each section:
- “See how we do it”
- “See our approach”
- “See our examples”
- “See our process”
What makes the Social Shepherd different from other agencies:
- Awards and partners
- Statistics
- Featured case study
- Clients
- Work together CTA
There’s a call to action at the bottom of the webpage as the top bar does not stick to the top of the webpage as you scroll down. However, when you scroll back up, the top bar comes into view.
This works really well as the top bar does not distract or take up space when moving through the website. But when you scroll back up, you may be ready to perform another action and having the top bar come into view makes this easy and reduces frustration.
This is something that can easily be added by your web developer and if you don’t like permanent sticky top bars, this is a very good alternative solution.
The flow of information on the home page is designed to build trust. On each section of the web page, there’s a call to action where you can learn more about that particular section.
If we look at the more about what the business does section – the paid social and pay per click campaigns in particular. If you click on “See how we do it”, you get taken to a new page with all the relevant information about paid social.
As you read more about paid social, there’s ample opportunities to get in touch with The Social Shepherd (get in touch call to actions).
So, if you’re not ready to get in touch from the home page, you can still easily do this after learning more from other pages.
If the learning more about the services is not enough, there’s testimonials, clients and case studies mixed between these sections. This is the trust building part.
Looking at one aspect of the design, this website uses SVG graphics to create wavy edges around elements (images and cards). This adds a slight quirkiness to the web page design.
What to take away:
- It’s important to build trust through testimonials and case studies
- There’s alternative options to the traditional sticky top bar
- Utilising SVG graphics is a good way to add an extra layer of quirkiness to your web pages
Credit to PandaMonk
PandaMonk
PandaMonk have a quirky website that’s filled it’s filled with cold designs and animated graphics.
The services PandaMonk offer customers include:
- Design & UX
- Development
- Digital Strategy
- Media Planning and Analytics
PandaMonk does not explicitly mention their services on the homepage, but they have an accessible “our services” call to action in the hero section.
As such, this is still easily navigable for any new customers first coming onto the website.
Alongside “our services”, there are other useful links which are conveniently placed. These include their “approach” and “recent projects”.
All of these sections live above the fold, so it’s instantly accessible when the webpage has loaded
FYI, content above the fold simply means the content at the top of the website that is visible on your screen when you first come onto a website.
The hierarchy of information is as follows:
- Top bar that sticks to the top of the webpage when you scroll down
- Services call to action
- Approach call to action
- Clients
- Case studies
- Get in touch call to action
PandaMonk have gone for a simple approach to their hierarchy of information.
The services are simple listed out on the service page, and they do not have dedicated single page for each.
This means the information provided needs to be concise, as having lots of information on a single page can be overwhelming.
The thing that stands out on the PandaMonk website is the animations.
There’s a full-screen page transition when you click on different page links/cta/buttons, and elements slide in place via the “PandaMonk bot”.
This is a different approach to the Canny website where there’s dedicated single pages for each service.
If the potential client has any questions, they will have to get in touch, rather than exploring more of the website. There are case studies, but there’s no additional resources like a blog or single service pages which help explain topics more in-depth.
This clearly works for PandaMonk and this can be seen from some of their clients:
- BMW
- Nescafe
- McDonald’s
The Best B2B Websites and What You Can Learn From Them
We hope the above examples have provided you with some good inspiration for your B2B website!
If you’ve got any ideas and would like to get those ideas put into motion, get in touch with Canny. We offer brand, web, content and video services!
With Canny, your website will achieve your goals, reflect your business, win new leads, and get higher rankings on Google.
