Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
December 15, 2022 01:47 pm GMT

9 UX Learnings From the World's Best Ecommerce Site

Ecommerce websites require great user experience (UX) to achieve the reason for which theyre createddrive 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 will use 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.

Image description

In this article, youll get a breakdown of what McMaster-Carr does particularly well in its UX practices.

Medusas 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 youd 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; heres how theyve helped create the best UX for their customers:

1. Seamless Customer Journey

Todays 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 dont encounter distractions; you can see proof of this on the homepage which jumps right into the action:

Image description

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, theyve 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. Thats why its 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 McMasters is the level of detail put into the user interface (UI).

You wont 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 doesnt 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.

Image description

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, youll 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-Carrs 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. Theres 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.

Image description

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-Carrs header design isnt weighed down by product category links.

Instead, what shoppers find is a light, airy website header design where its easy to find all the important tools they need.

Image description

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 [add article link] 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 theyre searching for.

Image description

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 theyre looking for the first time they search for it.

Whats more, results dont just get updated in the searchs 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 wont 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.

Image description

Scroll through the filters and youll notice these dont look like your typical ecommerce controls.

For example, you wont find sliders, which can be unwieldy depending on how large of a dataset youre trying to pick a number from. Whats 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-Carrs product page design is a beautiful lesson in simplicity.

Image description

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.

Image description

With the way these pages are designed, theres no need for users to scroll or to worry that theyre missing important details. Its 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

Image description

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. Its not necessarily done this way because its in the shoppers best interests. Instead, its usually because the ecommerce software generates the shopping cart while the payment gateway plugin creates the checkout flow.

McMaster-Carrs 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.

Image description

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. Theres 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 theyre 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 Medusas recent tutorials and perspectives:


Original Link: https://dev.to/medusajs/9-ux-best-practices-for-ecommerce-1oao

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To