Ecommerce websites require great user experience (UX) to achieve the reason for which they’re created—drive sales and conversion.
In B2B this is often a neglected topic, which is why we wanted to shed more light on the best practices in the area.
This article uses an example case from a B2B site that recently made the top of HackerNews as the best e-commerce site, mcmaster.com by McMaster-Carr.
In this article, you’ll get a breakdown of what McMaster-Carr does particularly well in its UX practices.
Medusa’s B2B Focus
Recently, we launched a new B2B starter to our headless open source commerce platform, Medusa. In this regard, we are particularly interested to showcase how a headless setup allows developers to build fine-tuned storefronts using the case of McMaster-Carr.
If you’d like to know more about our product and how we serve B2B users, feel free to visit medusajs.com/b2b-commerce-platform
What is McMaster-Carr?
McMaster-Carr is a business-to-business (B2B) industrial supply company founded in 1901. Their website has been around since the early days of the internet and continues to be a popular place for businesses and hobbyists to buy hardware and accessories.
In fact, a post titled “Mcmaster.com is the best e-commerce site I've ever used” recently trended on Hacker News. What seemed like an innocuous statement ended up receiving over 490 comments as people discussed the merits of the B2B ecommerce businesses alongside personal anecdotes from using it.
Why the McMaster-Carr Website Has the Best Ecommerce UX
The McMaster-Carr website is indeed an excellent one and stands out; here’s how they’ve helped create the best UX for their customers:
1. Seamless Customer Journey
Today’s online shopping experiences are rife with distractions: pop-up ads with coupon codes, hero sections advertising new deals and steals, and product carousels with upselling and cross-selling recommendations.
McMaster-Carr shoppers don’t encounter distractions; you can see proof of this on the homepage which jumps right into the action:
In addition, the designers have done a great job in minimizing the number of landing pages shoppers have to visit before buying something.
As a result, they’ve reduced the number of clicks their shoppers have to make from the point of entry to conversion. This reduced workload makes the website feel easier to use. It also means they get their shopping done more quickly.
2. Uncluttered UI
McMaster-Carr currently has over 700,000 products in its store. That amount of inventory alone would be enough to overwhelm some shoppers. That’s why it’s crucial that the design and layout of the store be as uncluttered and straightforward as possible.
Many of the best ecommerce UX these days have well-laid-out architectures. The main difference between those stores and McMaster’s is the level of detail put into the user interface (UI).
You won’t find eye-catching gradients, fun animations, or anything like that here. The visual design of the McMaster-Carr website more closely resembles a detailed yet raw-looking wireframe than it does a fully fleshed-out and branded store.
Considering this is an industrial supply store, the lowkey UI design makes a lot of sense. Hardware doesn’t need to be pretty in order to be effective. This frill-less design keeps visual distractions at bay so shoppers can focus on the products and their specifications.
For example, colors are kept to a minimum. In addition, the images are all presented in greyscale. This basic color palette and presentation of images make it easy for shoppers to focus on product details instead of getting caught up in flashy design choices on the site.
3. Sticky Left-Side Navigation
The placement and design of the navigation matter a good deal. On most ecommerce websites, you’ll find the navigation inside of the header, with each top-level product category spread out across the width of it. Shoppers can then hover over each category to explore sub-categories of products.
McMaster-Carr’s designers have handled this much differently. The navigation is a sticky sidebar that sits alongside the left rail of the website. It can also be accessed by clicking the “BROWSE CATALOG” hamburger menu button in the top-left corner.
This design is beneficial. There’s been no compromise in terms of which product categories get top billing. All of them are present. Not only that, the categories fit without forcing shoppers to scroll.
4. Effective Header Design
While navigation is a primary component of the online shopping UX, it often takes up so much room that other important elements are sidelined. Thanks to sticky sidebar navigation, McMaster-Carr’s header design isn’t weighed down by product category links.
Instead, what shoppers find is a light, airy website header design where it’s easy to find all the important tools they need.
The different header components are sized and styled based on importance. For example, the search bar is about a third of the width of the header. Its prominent size ensures that shoppers can quickly find and use it when they have something specific they are shopping for.
5. Smart Site Search
The importance of the search bar cannot be understated in ecommerce. Without it, the online shopping experience would be more time-consuming and stressful than it often already is.
That said, stores the size and complexity of McMaster-Carr need to equip shoppers with advanced search functionality — one that can fix any spelling errors and predict what they’re searching for.
Without a smart search feature, shoppers would likely run into a ton of stumbling blocks. Not only does this search bar fix entry errors, but it provides alternative matching results. This maximizes the chances that shoppers will find exactly what they’re looking for the first time they search for it.
What’s more, results don’t just get updated in the search’s dropdown bar. They get updated on the page, providing shoppers with even more results and product sub-categories to consider.
6. Helpful Search Filters
The search bar and navigation are the entry point into the McMaster-Carr shopping experience. They alone won’t get shoppers where they need to go, which is why the filters sidebar is needed.
Regardless of which tool shoppers use to get there, the left-aligned filters sidebar will help them whittle down their product search results page. This is yet another way in which the designers have streamlined the shopping experience.
Scroll through the filters and you’ll notice these don’t look like your typical ecommerce controls.
For example, you won’t find sliders, which can be unwieldy depending on how large of a dataset you’re trying to pick a number from. What’s more, when scrollable lists of data are presented, a mini search bar is always present at the top as a shortcut to scrolling.
These filters enhance an already streamlined ecommerce UX. With descriptive matching visuals, companion search bars, and easy-to-find clickable links, these filters make shopping on McMaster-Carr a breeze.
7. Simplified Content
One of the problems with modern ecommerce design is the idea that a product page needs to be long. Product images dominate above the fold. Product descriptions and specifications sit just below the fold. Then there are sections for related product recommendations, product comparison tables, FAQs, customer reviews, and so on.
The longer the page becomes, the longer the decision-making process is going to take. And the longer those decisions take, the more chances there are for distractions and doubts to keep shoppers from converting.
McMaster-Carr’s product page design is a beautiful lesson in simplicity.
Shoppers see:
- The product type
- Accompanying product photo
- Short description
- Table breaking down the specifications for each size
If shoppers want more details on the product type, they can expand the information provided under the accordion dropdowns at the top. If they want more information on the product specification, they can click the “Product Detail” button beneath to see more or to download the CAD file in their preferred format.
With the way these pages are designed, there’s no need for users to scroll or to worry that they’re missing important details. It’s all clearly laid out in an easy-to-follow format.
8. Custom Cart Page Design
The purpose of the cart page is to give shoppers the chance to review their items, make modifications, and add relevant notes before they check out. McMaster-Carr calls this page “ORDER” and it includes important features like:
- Field to enter the purchase order number
- Option to add reference info on each line
- Ability to convert to table view
The one drawback about the way this cart page is designed — and how checkout is handled, in general — is that customers never get to see their true total costs. They can see the merchandise total on the right. However, shipping fees and taxes get added on post-purchase because of the way McMaster-Carr handles product fulfilment.
9. Seamless Checkout Experience
Many shoppers have come to expect the shopping cart page and ecommerce checkout flow to be two separate parts. It’s not necessarily done this way because it’s in the shoppers’ best interests. Instead, it’s usually because the ecommerce software generates the shopping cart while the payment gateway plugin creates the checkout flow.
McMaster-Carr’s website makes no distinction between the two. Instead, there is a seamless transition from the cart to checkout.
Shoppers log into their accounts on the right side of the “ORDERS” page. The checkout form then takes the place of the login form.
Shoppers won't encounter a checkout page that looks foreign compared to the rest of the site. Nor will they have to deal with multi-step checkout flows. There’s a single form built right into the “ORDER” page where they:
- Choose the delivery method.
- Enter delivery address details.
- Provide payment information.
The form responds to every choice they make as well as to everything they input into the fields (if anything at all). This ensures that, when they’re ready to click the sticky “PLACE ORDER” button at the top, no errors occur.
Conclusion
Want to get more inspiration on UX best practices? Sign-up for our newsletter on medusajs.com as we will share no less than 5 more ecommerce deep dives on best practice UX for B2B.
For more B2B specific readings, check out Medusa’s recent tutorials and perspectives:
- Our tutorial on how you set up Medusa to support B2B: Part 1 & Part 2.
- Our Perspective on Open Source B2B Ecommerce.
- Our Comparison of the Top 5 Open Source B2B Ecommerce Platforms.
