How To Make a B2B Website: A Guide
a comprehensive guide on how to make a B2B website, the differences between B2B and B2C websites, and the qualities of a good B2B website
A B2B website is a constant, neverending pitch. For a lot of execs, that’s the stuff of nightmares. But how do you calm the jitters and show up to this hellscape without sweat stains on your nice white shirt? Or how do you get there with a bedhead and wearing an old sweatshirt, and still blow everyone away? We’ll show you how.
Slack — immediately we get an offer to try it and see the products’ interface. All the benefits are explained in detail on separate pages, without complicating things. The design is colorful but nonobtrusive.
The Difference Between B2B and B2C Websites
If a customer-oriented website is a storefront, a B2B website is an office. It might have beanbag chairs and a ping-pong table, but it’s still a place for people to get work done. There isn’t as much of a need for bells and whistles in presentation, both in design and in content.
And in B2B, you need to be ultra-focused on solving problems (of business). A B2C website aims at the audience, a whole segment of people: they might know their age group, their education level, their preferences. But it still needs to be inclusive to a large group of people. A B2B website needs to aim at particular companies. It can’t be for everyone, it’s hard to even target both small businesses and large corporations. They have different goals and usually require different products. You need to keep your sights right on target.
The Qualities of a Good B2B Website
The main quality of a good B2B website design is that it’s straightforward. The message needs to be crystal clear. There’s way too often the situation that a company spends way too many resources on getting leads, and then those leads just leave the website, because it’s confusing, complicated, bogged down in unnecessary detail. As part of the overall marketing strategy, the website has to follow the brand positioning to a T. The visitor needs to get to the website, easily understand what the product does, how is it helpful to their company, how difficult or easy it is to implement and integrate it into their workflow, and more often than not, be able to transfer that information to their bosses, without getting anything mixed up along the way.
The visuals usually don’t matter as much for a B2B website. They just need to be unobtrusive, not take any attention away from the product. The most important visual thing on a B2B website for a digital product is to clearly present the interface. Of course, there are exceptions. If the industry segment that you’re working in is full of solutions presented on the same boring websites, then it might greatly pay off to go against the grain with a more involved and exciting design.
Notion — Notion is a great tool for personal use too, but the website is aimed at businesses. Those keep the lights running. As a website aimed at businesses, it follows the same rules: the first thing is the UI of the product, all the features are explained in detail. The neat black and white illustrations are a wonderful example of not just a good B2B website, but simply, of a good website.
Research, because knowing is half the battle
The research isn’t particularly different from B2C websites, but with a bigger focus on your competitors, your potential clients, and your product.
Research other websites. Look at your direct competitors. You need to see their value proposition and compare it to yours. You need to show exactly what your product does while keeping it simple and not throwing technical terms around. The most important thing is that you should differ from your competitors in your delivery. You need to stand out. And your product needs two things: to be as good as your competitors and to be better than your competitors in some way. If that’s not part of your positioning, you have to repackage the product before approaching the website design.
Value proposition. An honest man is never in trouble. You need to be perfectly clear and concise on what you do and how does it help your potential clients. You either help them make money or help them save money. Show how. A B2C website has the freedom to be emotional. You have to be rational and objective. Your value proposition is essential. It will define everything about the website: its structure, its design, its content.
Define your branding and messaging. There can be absolutely no gap between your positioning and your product. There’s some leeway in a B2C website design, but if you sell a B2B product and position it as something brand new, innovative, and simple to use, and then the client sees something cumbersome and complicated — you’ve lost them.
Corporate identity. You need to think about how you could adapt your corporate identity to website design. Your website is a part of the larger whole, it can’t stand on its own. If there’s no corporate identity to speak of — it’s outdated, not adaptable, or plain bad — that needs to be dealt with before approaching the website design.
Define the website’s target audience. The audience for B2B solutions is extremely segmented. You’re not even looking at a shortlist of companies that could be interested in your product, you’re looking at particular employees of those companies. But the website’s audience isn’t just the product’s audience. It’s also your potential future employees, who want to know that your company is suitable for them. Your audience is also the potential partners. Your audience is even the media. Your audience is even the moms of your employees.
Buyer’s journey. Compared to B2C, the word journey is more appropriate: in B2B, a buyer’s journey is a long and perilous path. On a B2C website, you aim to secure the sale in a matter of minutes: during the lasting B2B journey, you find that the sale was the friends we made along the way, and then also the sale. You build a relationship with your audience and you need to tailor fit your website to your audience, to your particular segment. And remember that the first time visitor to your website is probably not the person making the final decisions: they need to be able to easily explain your product to their upper management, and not mix anything up. You need to be perfectly clear.
Stripe — the copy is straightforward, and again, the first thing we see is the product in action.
Planning the website
Compared to B2C websites, you need to focus more on your value proposition and your buyer’s journey. You need to keep them in mind every step of the way, while you plan your website and while you make it.
The scope of the project. The most important thing. Do you need to rework or update your corporate identity? How many pages will the site have? What are the essential pages? What’s your keyword strategy, and do you need one? What are the specific goals for the website? What’s the budget for the project? How much time do you have?
The timeline. It might take months to make a complete website. What you need is a functional, viable website in a short amount of time, that you could improve on as needed later. To make a sufficient, effective, and good-looking website if it’s limited to about five unique pages could take you just a couple of weeks — if you work with professionals.
Structure your website. If you already know what pages you need, that perfectly alight with your value proposition, show your audience exactly what they want to hear — homepage, services, cases, features, terms and conditions, etc — now you should make a sitemap that follows your buyer’s journey. You need to keep the navigation simple and easy to understand.
But how many pages will the new site have? Now, if there are just five unique pages, it shouldn’t be a problem to structure everything. But if you sell a complex product, with a lot of different solutions, or a lot of different tariffs, you might need more pages. You can’t hit your visitor with everything at once: they should be able to quickly find the right information for them. If you do have a lot of information to say, you need to structure it in a way that it’s not overwhelming to the visitor. And again, it’s better to start with a website with only essentials and add additional detail later.
Website’s goals. Every website has two goals: to convert and to leave a good impression. As a B2B website with a more involved buyer’s journey, the latter becomes more significant. But it’s important to remember, that these goals are by no means are mutually exclusive. Figure out more specific goals for your particular website.
Keyword strategy. Is getting a lot of leads through Google a big part of your strategy? If so, you need to produce a list of necessary keywords for your website, and then keep those in mind right next to the value proposition and buyer’s journey as you work on the content. For the current website, if you have one, you need to conduct an SEO audit, know your metrics and your top pages. But if your product is new, or you plan to use your website as a business card, consider whether you need to worry about keywords at all at the moment.
Graph — this is the website and identity we’ve made for Graph. A good example of purposefully breaking the rule that a B2B website has to have muted, boring design. Because it’s a website for a communication agency, for someone whose work is to make exciting and colorful things, the design had to follow suit.
Design and content
Design and content need to work together. A lot of agencies require the clients to provide the content, and make it fit into the design: we find this approach to be simply unproductive. Design and content need to be mutually beneficial, they need to support each other. Especially on a B2B website. Each and every aspect of a B2B website has to work towards a singular goal: to show the product’s value. The following are the broad strokes of our workflow, the way we approach design and content.
Concepts. A B2B website doesn’t necessarily have to have a big metaphor behind it. However, if you want your website to be memorable, it helps. A B2B website is unlikely to be flashy, but having a good, clear idea running through the websites makes the pitch stand out, makes it all the more distinctive. What we do is come up with three different concepts for the website, and then present them to the client to choose one. After that, the concept informs the entire website.
Styles. After the concept is chosen, we come up with three different ways to visually represent it. A B2B website is more likely to have a more muted, more minimal style to it: but there’s still an endless amount of ways to keep it simple. You can read a more detailed behind-the-scenes look at how we work on concepts and styles in our case stories.
Homepage first. After the concept and the style, we make the draft version of the homepage’s structure. A good rule of thumb for the website for a digital product: present the product’s UI as soon as possible, first or second screen.
Content. Once the structure of the homepage is done, we immediately fill it up with the draft copywrite. That way we quickly know what it’s about, early on, we already see the buyer’s journey. We get to work on the design, not in a vacuum, but knowing exactly the key messages that the visuals need to support. The copy for a B2B website follows your buyer’s journey and value proposition. Generally speaking, it should be direct and matter-of-fact. Moreover, being a B2B website isn’t an excuse to throw technical terms around: your customers, the people making the final decisions, are managers. Their expertise is in business, and of course, they should have a general idea of how their business works. But the people in charge usually aren’t the experts in the minutiae detail. Don’t overcomplicate things just to seem professional.
Prototype. Because we work in Figma, we don’t need to allocate extra time to show what the website is going to look like, we don’t waste resources on making prototypes. Once we’re completely done with the homepage, you could see exactly what the final result will look like. It serves as a proof-of-concept, and then we use the style for the rest of the unique pages.
Mobile versions. A B2B website is more likely to be approached on desktop, but you absolutely must have a good mobile version in 2021.
Intercom — almost a standard for B2B websites. Over the years, the most common reference we get at the beginning of a project is the website for Intercom. They change it every year, and it’s fascinating to take a look through its iterations over time.
Looking at your website, ask yourself these three questions:
- Does the visitor easily understand how the product works?
- Do they understand why they need it?
- Does design stay out of the way for the message?
If the answer to all these is a resounding Yes, you’ve got yourself a good B2B website. And that’s all there is to it.