Menu
We analyse five of the best B2B eCommerce websites around and explain what makes them so good.
Great B2B eCommerce design recognises that behind every business purchase is a person or a group of people making buying decisions. Obviously, companies have different needs than regular consumers but the B2B buyers actually signing off purchases have very similar needs in terms of the customer experience. At a glance, B2B eCommerce websites may look very similar to consumer targeted online stores but key differences are in the details – as you’ll see from these examples.
Jewson is one of the UK’s most trusted builders merchants and also one of the oldest. The company has to adapt heavily in making the online transition and integrate digital channels with its offline customer experience. Last year, we published an article looking at 12 key features of a B2B eCommerce website and Jewson’s website pretty much ticks every box.
If we look at the header, you can see four icons pointing users to a branch locator, their trolley, a sign-in/register link and a VAT toggle switch to include or exclude VAT in product prices. At the bottom of the screenshot above, there’s also a white bar of links highlighting key information and purchase options: Covid-19 updates, a click-and-collect service, trade account applications and a promotion of 50% off tool hire. All of these UI elements have been added to address the buying needs of trades professionals and placed at the top of Jewson’s website for easy access.
Jewson is clear about which actions and information are priorities and this is most obvious with the top line of links for project estimations, expert advice, help and the contact page.
The other two big elements in the header are the unmissable search bar and main navigation menu, which comprises entirely of popular product categories (as well as tool hire) to help users get to the page they need as quickly as possible while links for less important pages (eg: contact us) are placed elsewhere.
Directly underneath the hero section, there’s a product feed featuring seasonal items that are most in-demand for the time of the year.
Scroll past this, and you’ll see two full-width sections promoting some of Jewson’s key services, such as material calculations and expert advice, and product categories with nested links.
This in-page navigation directs visitors to the most important pages of the site and reduces the total number of clicks required to get there. Whether users turn to the search bar, navigation menu or the in-page links shown above, they’re ultimately going to end up with a search results page showing all of the relevant products to their keywords or selected category.
Jewson packs a lot of information and functionality into its results pages:
While there’s a lot going on here, all of this functionality enhances the experience and contributes something meaningful – either with specific actions (add to trolley) or contextual feedback (product quantities).
It’s a similar story on the product pages where Jewson adds even more functionality purchase options (something else we talked about in our key features of a B2B eCommerce website article). Customers can check availability at their nearest branches and choose between Click & Deliver or Click & Collect while account holders can add items to project lists for each job.
One area where a lot of eCommerce brands (not only B2B) fall short is product descriptions but Jewson does well here, too. Each product page has a good amount of unique and useful information, including a list of benefits and features. There’s also a dropdown section for specifications and this is another key feature for B2B eCommerce websites because most buyers are buying to specification and they need to confirm a product meets their needs.
The newly redesigned Matthew Clark Live website won the “B2B eCommerce Website of the Year” and the “Food and Drink Website of the Year” awards at the UK eCommerce Awards 2020. Judges commended the site, saying its “UI is super strong, sleek, considered, and easy to use” while the redesign was credited with going “to great lengths to improve the experience for customers”.
In fact, one of the company’s slogans is “the experience matters” and, while this doesn’t reference the website itself, you can see that the same philosophy is applied to the buying experience on the site. There’s even an online ordering help section on the website and a user guide (PDF) to help customers get the best out of the platform – and this is more of an online platform than a website.
In the back-end of customers accounts, users can add buyers to delegate purchases, create and manage order pads, and view purchase histories, favourite products and saved baskets.
Eligible customers receive personalised promotions, which can include a free POS kit, money off deals or free stock for bulk purchases. Alternatively, customers can browse categories or search for specific products using the search bar in the header and refining results with the filters displayed to the left of the results page. Once again, there are descriptive product names, SKU numbers, prices, “add to basket” buttons and a product quantity selector for each product on the results page to help customers shop faster.
On the product pages, key information about each product is listed in bullet points between the pricing and “add to basket” button. There’s also a product description underneath the main image and it seems the company has attempted to create a unique description here, based on the official Absolut copy. Even still, it’s basically a rewording of the official marketing material and it’s a little light so this is one area where the website could improve.
On a more positive note, the Allergens tab on each product page provides crucial information for buyers and this is a good resource for customers to check the suitability of each product they buy.
By the time customers reach the checkout page, they can change order quantities, remove or exchange products, add any promotional codes they have and create a purchase order reference.
They can also choose their preferred delivery date for orders, save orders as a new order pad, create an Excel order sheet or clear their entire basket. These are all minor touches but they contribute to an ordering experience that helps customers make purchase decisions quickly, confirm their order as soon as possible, complete repeat purchases easily and manage orders efficiently – all from the back-end system on the website.
Hughes Trade has a dedicated website for trade customers and it takes a different approach to the examples we’ve looked at so far. Instead of placing the focus on products, the company emphasises the customer benefits of buying through a trade account and targeting specific sectors relevant messages.
If you look at the header of the website, it’s similar to the Jewson example we looked at earlier but you’ll notice there’s no VAT toggle. This is because Hughes runs separate websites for consumers and trade customers so no pricing is shown on this site – customers have to open an account or log in to access these. The orange bar in the header highlights the key benefits of having a trade account with Hughes and this is the key theme throughout the website.
Scroll down the homepage and you’re not going to see any product feeds or listings, it’s all about the key benefits of opening up that trade account. Hughes has one conversion goal on this website and there are no mixed messages to confuse users or distract them from this.
Hughes is more interested in appealing to its target customers than promoting its products and you can see this in the “sectors we supply” section of its website. Here, the company can deliver relevant messages to each buyer persona, narrowing down on the specific benefits of its trade services for businesses in each industry – for example, renting products, expert purchase advice or installation services.
The Shoes For Crews website was named as a finalist for the “Best B2B eCommerce” at the eCommerce Awards 2020. The company sells comfortable, slip-resistant footwear for businesses and professionals in hospitality, food and healthcare industries – job roles where people are on their feet all day.
If we take a look at the website’s header, the layout looks pretty familiar by now with the main navigation and a search bar sandwiched between two secondary rows of links, mainly for user accounts in the top row and key service benefits in the lower, as well as an embedded review status from Trustpilot.
This is almost identical to the header structure used by Jewson and Hughes Trade but the Shoes For Crews takes a very different approach to navigation. Both Jewson and Hughes Trade focus on product categories in their main navigation menu because they have large, diverse product ranges that can be difficult to navigate.
Although Shoes For Crews sells different types of shoes along with accessories like insoles and grip mats, the company primarily has one product category and the primary division for purposes is women’s and men’s shoes.
Navigation isn’t the only element that benefits from having a focused product range, either. In fact, Shoes for Crews is selling a very particular type of footwear for specific use cases and this makes it easier for the company to clarify the key selling points of its product and incentivise users with compelling page copy.
Unfortunately, eCommerce brands with larger, more complex product ranges have a tougher job in their hands with customer experience design. Shoes For Crews doesn’t have this problem, though, and the clarity in its page copy allows it direct visitors to key product ranges before they’ve even scrolled halfway down the homepage.
Here, we’ve got another in-page navigation system that points users to the most important product categories. First, Shoes For Crews has identified three purchase incentives, two of which exploit classic purchase anxieties: budget sensitivity and the fear of missing out. Then, in the middle, you’ve got that heading for food production and safety shoes, which appears to be the company’s most important target customer and their key selling point.
Below that trio of emotionally-driven links, there’s a row of categorical navigation for the different types of footwear on offer and buttons to filter them out by men’s and women’s shoes.
So we’ve got two rows on in-page navigation there: one for the more impulsive buyer and another one for those who know what they’re looking for. And, if neither of those compels visitors to click through to view products, Shoes For Crews follows up by appealing to different job roles.
This in-page navigation structure helps users refine product searches with a single click, based on their priorities, whether it’s role, style, budget or any of the other selling points Shoes For Crews identifies.
Clicking on any of these filters directs users to hybrid landing/results pages with relevant messaging in a hero section to keep the key selling point fresh in the buyer’s mind at all times.
Product pages are filled with high-quality images, product codes and all the essential info. Users can add products to a wishlist or compare them with others and every product showcases a review score to help customers buy with confidence.
Scrolling further down the product pages reveals the product descriptions with the key features and benefits listed and a detailed breakdown of review scores, including value for money, comfort, quality and the standard of services from Shoes For Crews. Once again, the company is taking every step it can to help customers buy products based on what matters to them most.
At the checkout page, customers are greeted with recommended products, including socks, insoles and other accessories. Much like the product pages, the checkout is clean and easy to navigate without any distractions getting in the way of customers completing the purchase.
The Shoes For Crews website is an excellent example for B2B eCommerce companies with a relatively small product range to follow. Without a complex catalogue, the company can focus on the key selling points of its primary product and appeal to different target customers – not only different sectors but buyers also buyers with different priorities.
Earlier, we looked at how Hughes Trade focuses on customer benefits rather than products and Magnet takes a similar approach by prioritising customer benefits – although, it does showcase products and pricing further down the homepage and across its website.
Magnet doesn’t position itself as a vendor selling to trade customers, though. Instead, it builds a narrative of being more like a business partner that helps trades professionals and companies operate more efficiently.
Magnet wants its customers to feel like they’re getting real business support to help them secure new jobs, complete them on time and increase revenue. So it’s not kitchen fittings that trade customers are buying into here but a rounded package of business and supply services.
Before you see any products, Magnet wants you to know that it’s got your back with fast quotes, free samples, flexible finance options and free home measurements – all of which helps its trade customers win contracts faster.
Magnet then starts to showcase some of its product offerings on the homepage but it quickly returns to promoting the benefits of its trade accounts.
By the time it comes to browsing for products, getting quotes and making purchases, Magnet trade customers have already bought into the service and the company lays foundations for customer loyalty, repeat purchases and maximising customer value before a single product is bought.
Hopefully, the examples in this article inspire some thoughts about delivering an improved eCommerce experience for B2B buyers and you can find more insights in the following articles.
As always, if you need dedicated support for B2B eCommerce design or marketing, you can speak to our team by calling 023 9283 0281 or filling out our form. Also check out our eCommerce SEO and eCommerce PPC service pages for more information about how we can help.
Kirsty joined VL in January 2019, and has been working hard to come up with new ways of working which support the creative team and make life easier for our clients. She has always been interested in how things work both digitally and practically, and her role at VL allows her to explore both of these interests, using tools like Asana to enable more efficient delivery of complex projects. An English Literature graduate with postgrad certification in project management from APM, she has over 12 years’ experience in digital marketing, leading teams and innovating processes. As a highly experienced digital project manager, she’s delivered over 50 successful web projects, worked on rebrands, video shoots and AR apps, and been to A LOT of conferences. Her previous roles have seen her jetting over to Shanghai to project manage an international graduation ceremony, custom designing a recruitment process which was then rolled out across 65 schools, and shipping a website and three apps which promised to change the entire music industry. Kirsty loves being surrounded with creative people, extending this to her home life with her graphic designer husband and her two artistic daughters. It’s tough to be the only practical person around, but luckily she enjoys organising people at home as well as at work. Things Kirsty enjoys are reading, travel, feminism, houseplants, music, spreadsheets and photography. Her greatest fears are institutional chaos and running out of teabags.
Website under-performing but not sure why? Our free review will reveal a list of fixes to get it back on track!
Categories: SEO
Categories: PPC, SEO
Categories: Web dev't