According to the IRS, there are 5.2 million B2B enterprises worldwide today. This is an impressive amount. However, it does raise a few rather concerning questions. For one, with so many companies on the market, why can we only name so few?
A minimal focus on marketing is what still keeps so much B2B website development in the gray area. While some promotional strategies can cost an arm and a leg, others are relatively cheap and straightforward.
Web design is a great way for a B2B company to stand out among hundreds of those alike. The thing is — the concept of B2B website design shouldn’t even be expensive. It just has to be comfortable, with all of its features making sense. That’s something even a local business can afford.
10 tips for a successful B2B web design
Tip #1. Know the user flow
In B2B, companies rarely strive for the goal of brand awareness itself. What’s more important is to convert your visitors into leads and buyers. Regardless of what your goal is — a contact, a call, or a sale — you should know what it takes for a user to reach it and consider the best way to help them do so.
In marketing, the process of mapping out users’ actions to get from A to Z is called “user flow”. Simple user flow can look as shown in the image below:
The checklist above is nothing complicated or perfected, but the goal here is not too sophisticated, its simple intention is to make users subscribe to a blog.
Now that you’ve drawn up a user flow for your own website, it’s important to think of all the objections a user could have at any point on the way there (clicking the website link, going to the blog page, and, finally, subscribing). You can write down ways to address these points using website copy or design. We’ll go over a few tips that may help with that a little later.
Tip #2. Use breadcrumb navigation
There are different tools and methods of design available to arrange the way a user moves through a website. For B2B websites that offer a lot of services, breadcrumb navigation is the best solution.
Quick summary: a breadcrumb navigation originated from the fairy tale Hansel and Gretel. Much like in the story, breadcrumbs (in this case, a list of previous pages) help a user trace all their movements on a website so that they can go back to any page, anytime.
The navigation system on the image above is a textbook example of breadcrumb navigation. See how a user can always go back to any page they’ve previously been through? Convenient, right?
Some designers have issues with breadcrumb navigation as it doesn’t look overly stylish. However, you can always approach the “trail” in a creative way.
Tip #3. Follow “the golden ratio”
For those who don’t have a lot of experience in design or art theory, here’s a brief intro into what a “golden ratio” means. Without going too deep into the math behind it, scientists at one point calculated the parameters of an aesthetically perfect rectangle — its length has to equal 1.6 times its width. The 300×485 pixels rectangle can then be considered perfect.
If one were to draw a square from that triangle, they would then see the following graphic:
Then, you can keep the same pace by drawing a square out of each smaller rectangle.
This is a visual representation of “the golden ratio” — a way to create aesthetically appealing proportions. One thing still may not be clear — how do you use the golden ratio while designing the website?
Here’s how it was done by Mashable: the home page uses proportional rectangles and squares for a better visual appeal.
Tip #4. Use progress bars to indicate the loading status of the page
It is now a well-known fact that too long of a page-load time can be a demotivator for a user. However, even if your website still isn’t quite at the point of rocket speed, it shouldn’t mean that you have to lose visitors.
A solid way to troubleshoot the situation is by informing the user about the progress of the loading page. You can make that happen by setting up minimalistic progress bars that won’t slow down your website, and also reassure users that they aren’t waiting in vain.
Tip #5. Keep the core data within the first scroll
According to research conducted by Nielsen Norman Group, 74% of users’ attention is directed towards the first two scrolls on the website. In fact, only 6-8% have enough interest, time, or stamina to read the content of the page all the way to the bottom.
The lesson for web designers here lies in content prioritization. While it would seem logical that your page should start with an intro and slowly slide into a CTA (call-to-action) — this isn’t the case. Be sure to show off all the goods — best features, most convenient proposals — within the first scroll. Once you have hooked serious buyers in with your most attractive offers, they will read further if they need the rest of your information. That way you’ll save your visitors time and get more leads.
Tip #6. Use thank you pages after a user has completed an important action
Saying «Thank You» seems like an insignificant detail, both in real life and online. However, in both cases, it might be crucial to earning someone’s trust and giving off the appearance a good attitude. When it comes to a website design, a thank you page does a few important things:
- Adds a touch of personalization. A user doesn’t feel like just a number in your Google Analytics or a sale for your bottom line — a bit of human gratitude makes everyone feel special and cared for.
- Raises brand awareness. You can go out of your way to design your “Thank You” page in a creative, memorable style. It will be a nice surprise and gives the user yet another chance to remember you.
- A status tracker. If a user has downloaded an eBook or a white paper, subscribed to a newsletter, or left a message, it’s important to let them know the action was successful. Redirecting a visitor to a “thank you” page is a way of saying, “Everything worked”.
Tip #7. Outline primary and secondary calls-to-action (CTA)
As a creator of a conversion-oriented page ( that leads a user towards a particular goal), there is a principle of “the most desired outcome”. To elaborate, there can be a few calls-to-action on the page, but one of them is clearly more important than the rest.
If that’s the case for your website, think about distinguishing clearly the most desired CTA. It can be done by changing the placement of a CTA itself or the size of the button that leads to the next step.
Distinguishing between CTAs allows you to guide a user to the most desired outcome without limiting their choices to one option.
Tip #8. Change the color of visited links
Any action that makes your website’s visitors strain to understand is already making the website itself not-so-user-friendly. To make sure every page is as comfortable to use as possible you have to pay attention to the details.
The color of visited links is one of those small details that goes a long way to easily communicating important information. One of the most underestimated design details, knowing that they’ve already seen a page can help a user avoid that annoying «déjà vu» effect.
While researching for this blog post, we clicked on the profile page of a Nielsen Norman Group author at the left column. It was very convenient to then see that we already visited the link as it turned purple (see image above).
Tip #9. Take advantage of the 404 page
When there’s an error on your website, the first impulse is to go into technicalities so that you can explain what went wrong in the code. However, much like quantum physics, advanced coding is not easy to understand. Hence, you shouldn’t use it to explain errors.
Instead, communicate a mistake in a clear language. Even if you didn’t explain the problem to its full extent, a user will, at least, understand what happened. There a few ways to handle a 404 page:
- Be creative. If there are errors on the website, why not use this unfortunate situation to make a few jokes? This will display personality and possibly alleviate the user’s frustration with the error.
- Be constructive. If something doesn’t work, explain what a user should do and how they can solve the problem.
Whichever you choose, don’t hide behind the code and ambiguous phrases like: “Dear user, there has been an error #5505”. In the image above, TechCrunch is an example of healthy, constructive dialogue in its 404s.
Tip #10. Structure the info by using blocks and tables
Structuring the content by organizing it into blocks and tables is a good way to make sure users read your copy. There are so many things you can accomplish this way — to start with, the page is not so long anymore (remember, what we learned about long pages?). Also, tables make a great presentation for any content that needs comparison. For that reason, they are riding their wave of popularity at the moment.
4 Examples of the best B2B website designs
To get a better understanding of the current business to business website design trends, it’s crucial to keep hunting for ideas on an ongoing basis. The best designers constantly look all over the web to see what practices are used in modern design.
We wanted to make sure you wouldn’t stay without inspiration. That’s why we collected 4 examples of b2b ecommerce web design done the right way — enjoy!
The first thing to catch your eye about Quid is the minimalism of its home page. With no excessive gimmicks, the website ensures a short loading time and fine mobile optimization. The Quid website is what you would expect from a corporate page of a B2B firm — elegant, precise, and all business.
Blake Envelopes might seem like a completely different sort of website — where Quid’s colors are dark, those of Blake Envelopes are light; white spaces are incorporated heavily into its b2b ecommerce website design. However, the trends for both of these websites are the same — precise, to-the-point minimalism.
Blake Envelopes deserves a separate “wow” for its search mechanism alone — there’s a huge system of filters which allow users to find exactly what they’ve been looking for through a straightforward design.
Whoever was designing the website clearly knew their craft very well. At first glance, D.FY seems like a one-pager, and an amazing one. This best b2b web design skillfully uses video content to showcase what they are doing, which is something not every B2B company has taken as a habit yet.
Also, note how many small details are thought of from beginning to end. For instance, at the bottom of the page, there’s a number of scrolls so that a user can estimate the length of the page. The text on the sliders is kept in a cohesive style which leaves no chaos on the page.
Without even testing out the company for its shipping, you can already tell they had a wise designer from the very first scroll. A minimalistic theme with a visual, a caption and a headline gives you all the basic info about Shipwise in a nutshell.
Scrolling a little further, you might be amazed at how well the company uses fonts and colors to showcase its style and branding. A combo of white and blue with the occasional touches of black does its job — the website comes across as super classy.
There’s other details to note about how the designer made the font work well with pictures. For example, by unconventionally merging the two, with text overlapping the image, the website doesn’t feel conventional and templated, which is exactly what you’re looking for in a custom web design for B2B companies.
With over 5 million B2B enterprises currently on the market, to make selling easier, it’s crucial that you don’t look exactly like your competitors. One of the easiest ways to stand out is by understanding how to design an amazing B2B website.
It’s crucial that you make the most out of your site’s navigation and make sure a user is at ease while moving through the website. For that, you need to outline a user flow, experiment with navigation models and guide a visitor through every step on their journey.
A few visual gimmicks can also prove useful — for instance, by complying with the “golden ratio”, you will be instantly more appealing to your user base. You can even design the “404” pages creatively to be remembered.
However, the sure step towards a great website is reaching out to an agency of designers. At Fireart.studio, we’ve been working with B2B website design for years — we know all the best practices of a responsive website and are constantly learning new ways to stay ahead of the trends. If you’re in for a quality web design, leave us a message!