Best ecommerce UX practices from mcmaster.com

> McMaster-Carr shoppers don’t encounter distractions; you can see proof of this on the homepage which jumps right into the action:

The web site is based on the paper catalogue (book), from layout, visual interface, and organization. The paper version was excellent and useful. Instead of trying all sorts of "fun" (for the designer) web capabilities, they focused on ohw the web could augment what they were already successfully doing. No redesign for design's sake.

Some of the best paper catalogues like McMaster and Sigma had excellent, customer-centered design, which led to long term loyalty. Easy to find what you needed, and useful as references, not just as a place to buy. They have retained that philosophy into the web world.

Compare this to, say, Amazon where Amazon's needs are prioritized over the customers', with the obvious result of reduced loyalty and the need to shore that up with rewards (prime, discounts, advertising).

An annoyance of McMaster I didn't see enumerated is how they don't show you the shipping cost until after transaction is complete. That's fine for my day job when I'm not paying, but when I order stuff for home projects I generally would like to know how much it costs to ship say, an 8 foot piece of steel tubing, before I click submit order. EDIT: they updated this apparently! See user Certified's comment below.

See also digikey, parts-tree and rock auto.

The dissonance of this juxtaposition is comical. Are we going to ignore the elephant in the room? That Medusa's very own site, and the stores built with it, are the exact opposite of McMaster.com? If you started with Medusa, you wouldn't end up with McMaster.com. McMaster.com is as good as it is because it doesn't use the latest flavor of a bloated JS framework.

The points made in the article (they have a search bar at the top, they have sidebar....on the side, a cart page, a checkout page) are basic ecommerce, and have been for 20+ years. That's not what differentiates McMaster.

This comes off as a poor attempt to jump on the McMaster news cycle than to actually point out things that make it good.

It's their service, their longevity, their dependability, the simplicity, the availability, and the specificity that make it good. They're not good because of their ecommerce and web design choices. Their ecommerce and web design are good because they didn't jump on the latest tech fad every other year for the past 10 years.

I worked at Idealab in Pasadena California. We ordered SO much from them that they would deliver to us (and others in the area) directly and daily. If you had your order in by 10am (11 if you were SUPER lucky and there were a lot of orders to process) the truck would show up at ~2ish. This was 2001... WAY before Amazon Prime 2 day deliver, let alone same day. It was EPIC to design something and have the parts show up hours later.

The other beauty of McMaster is the breadth of their inventory. You could order a safety vest, a billet of Al, a 4x8 sheet of plywood and some screws... all from the same place! One of the software engineers cooked up a web scraper tied to a randomization engine. It would randomly order $100 worth of things on our account each day. He was stopped before it was turned on... but it would have been really fun to see what random stuff showed up on a daily basis. We spent a few lunches laughing about the potential boxes that would have shown up.

I'm very much confused about why there aren't more Amazon competitors that do better with this sort of UI stuff and charge more. At this point, I'm happy to pay a 10% (or maybe even 50%) tax from McMaster or Digikey because of the time and effort it saves and the backend customer service if something goes wrong. When I started my university lab 10 years ago, I was so excited by what Amazon is doing. At this point, the only reason I still use them is that its hard to set up sales tax exemptions with all the small vendors. If someone could automate that process in checkout, I'd never use Amazon for work...

Example: “product pages are way too long”

Product pages are long because longer pages tend to perform better at SEO. Furthermore, at least in my experience, longer product pages don’t actually have a significantly negative impact for on-site conversion rates.

Sure, maybe a better global maximum exists, and every once in a while a startup finds it and achieves great success.

However, that kind of “bet the farm” mentality should be very intentional, not just based on design best practices, because in reality, companies live and die by their balance sheet, not by their UX best practices.

This got a bit rant’y, but I just wanted to provide this counterpoint. I’d love to hear what others have to say - I feel this is such a complex, nuanced topic…

I feel like all of the discussion misses a key point - when you shop on McMaster, you already have a very detailed idea of what you're looking for. McMaster becomes rather difficult to use if you don't know exactly what you're looking for. Many of the product categories get rolled up as representative products. Many products have meaningful variations nested deep. It's very hard to quickly scroll through a list of items to figure out what might be represent you needs.

Now, that's not necessarily a problem McMaster should fix. They cater to the professional market. They cater to people who know exactly what they want. They can do this because their products are mostly derived off market standards.

There's a _very_ good chance that your user base won't be the same. There's a very good chance that your user base won't know they need a "Surface-Mount Lift-Off Hinges with Holes made of stainless with XYZ dimensions".

One thing that annoyed me recently:

They don't take Discover. This led to me attempting to pay with an old Visa debit card which appeared to be accepted at checkout. In fact, they even shipped my order, and then sent me an email about my card being declined. It was a small order, but it still surprised me that they shipped without confirming payment. So I have an outstanding invoice. Not a huge deal, and as others have mentioned they do actually answer the phone, and you can talk to a human being about whatever customer service issue you might have.

Now, the crazy thing about this trend is that I honestly just close the page whenever I encounter it. And I am 100% positive that many other people do this, too. So, unless your brand has outstanding reputation and you were introduced to their service through word of mouth, a lot of these bombastic landing pages are left to rot by themselves.

And lastly, these pages are supposed to leave you feeling something, or at the very least - fire up a neuron or two in your brain because the experience is refreshing. I have not experienced that a single time. And I bookmark quite a lot of random pages I am inspired by from a design perspective.

Had a kick to make biodiesel and mcmaster was still the best place I could find to buy methanol

Edit: mcmaster just exudes the essence of "engineering" to me - it's amazing to be able to find parts by their size/dimensions/material/finish rather than jumbling together things that "work". Reminds me of the joke: "a mathmagician calculates the volume of a ball by integral; a physicist calculates the volume of a ball by water displacement; an engineer just looks up the part number in {mcmaster}"

Where they can be a little tough is searching for things you don't know the exact name for. I needed screws that have a smooth section to run through a bushing with a fairly tight tolerance. You know: turns freely but doesn't rattle. I spent hours looking until I finally found what I was looking for (shoulder screws).

https://www.bedelstein.com/post/mcmaster-carr

Mcmaster.com is the best e-commerce site I've ever used

https://news.ycombinator.com/item?id=32976978

(1402 points | 2022-09-25 | 494 comments)

iancmceachern > I'll gladly pay 2, 3, 5, even 10x the price to get it from McMaster. The service, the CAD models, I have what I need the next day.

For example, I needed to replace a bent gear axle for my lathe during the height of supply chain issues in the past few years. The part was proprietary to the vendor, who did not have any spares on hand and was awaiting an order from their manufacturer in China.

The top search results on McMaster for “axle” yielded both axle stock and pre-fabricated axles that would likely be great solutions in other scenarios, but ultimately neither of those categories contained a part that would solve my issue.

However, third on the list of results was a category for “axle bolts”, which makes sense based on my use of one of those strings in my search. But “axle bolts” weren’t a category of things you can find by manually navigating the menus to barrow down your search. Following the link to that category actually presented you with a list of products under the category of “shoulder screws”. Within these, I found a part that fit the bill for a temporary fix!

I found it incredibly useful that it helped me navigate through industry terms that I wasn’t familiar with. It almost seemed akin to Netflix’s highly specific “shadow” categories such as “90s sitcoms with female leads” or similar.

Actually (and perhaps it already can), a ChatGPT model that could help me design projects with specific tolerances by recommending parts from sources like McMaster would be very useful.

For example, I want to build a simple hoist with a working maximum weight of 1 ton. Which grade of steel bolts should I buy that are most effective for that application? What thickness of steel square bar do I need?

There are fairly straightforward ways of calculating what a material is capable of and modeling its performance using simulation software, but a passing grade doesn’t tell me that my choice of grade 12.9 bolts is less cost effective than grade 10.9 bolts, which are significantly cheaper.

don't tell anyone, they'll "modernise" them and fuck it all up.

If I'm looking to buy some 316 stainless bolts, I'd like to see links to the applicable nuts for that size/material/threads/etc. For certain sizes, the nut selection can be limited and might not meet my needs. Then, I have to start over with 304 or something else. In my most recent case, I had to order some of the components from a different store.

I like how rockauto puts heart symbols next to the commonly purchased parts.

How many times have I found something on Amazon, bought it, loved it, and go to buy another and it's just entirely gone, not even a suggestion of what a replacement might be.

I couldn't find the screws I wanted, tho'.

Are HN users even representative customers of McMaster Carr? Let alone of any other e-commerce site?

I wish Amazon did the same and offered more useful and accurate filtering. +/- operators would also be great (I know you can google site:amazon.ca +headset -bluetooth but it doesn't always work well).

Generalizing anything from it onto the general internet population seems like thinking about education starting from a great calculus course: some useful lessons can be learned, but you do need to acknowledge that the average problem is very different.

And in the end we're left with: make a fast website, clean UI, intuitive flows.

Sure, most of their products are black or metal, and grayscale works just as well in those cases, but in others, I'd like to use the millions of colors of my display to get a better sense of what I'm buying.

I love everything else about the site, though.

The problem is that no one wants this, so we don't even have templates like this anymore. We used to ~10-15y ago and those would still work perfectly.

So speaking of - this is probably the best place on the internet to ask - does anyone know of something like that?

hn: the most amazing site in the world!!

With JavaScript it's rather good though.

That's not to say that the The McMaster site is in any way bad. It is visually simple, relatively free from distractions, and straightforward, and served its target demographic well. It frustrates me to no end when marketers (not designers, generally) insist on shoving crap in people's faces because metrics show the hard sell works.

That said, their design was made for a specific type of shopper and is not remotely generalizable to everyone else.

People used to looking at screens of code all day, and those who know e-commerce platforms inside and out might not miss the abject lack of visual hierarchy and very obvious visual cues. The overwhelming majority of users would.

Also, if the color schema impedes usability, the problem is the design, not color. Having all of the images in grayscale is great for selling machine parts or technical equipment... And pretty much nothing else. Color is an incredibly important part of how most people choose products. Removing it creates a ton of work for the majority of users who need it. Trying to find one particular type of soap you forgot the name of but it has that green stripe across the label... Forget it. Also, I'm really not sure why so many people have such a hard time acknowledging that branding is an important and legitimate way for companies to communicate about the things they sell, and an important part of how most shoppers orient themselves in marketplaces.

Many people shop without knowing exactly what they need, and displays/carousels/suggestions help people figure it out. That's why they're there.

If visual flourish or whimsy impede usability, that's also a problem with the design and not a problem with visual flourish.

Most people shop at grocery stores instead of discount clubs, and discount clubs instead of restaurant supply warehouses. Why? Most of the products are equivalent or better the further up you go, dramatically cheaper, and presented in a progressively less gussied-up and more information-focused buying experience. Most people in the US have the storage space, too. One big reason is the look and feel. It's just a more pleasant overall experience. Seeing the colorful packages on the shelves, having a more intimate space to shop in with music playing rather than a utilitarian corrugated metal box. Perusing magazines during checkout. That's why Piggly Wiggly easily snatched the market out of the hands of traditional counter service provisioners and small single-product vendors. As a chef, it is the opposite of what I need. Purveyors sold me goods using an interface even more straightforward than McMaster: a printed text list with a place where I could indicate the quantity I needed. Anything more complicated would have been an impediment. Regular shoppers probably wouldn't even consider it.

So this article should be retitled to express why it has the best UX for information-only shoppers who know exactly what they want that are very used to looking at content without dead-obvious visual hierarchy and don't care how anything looks as long as their bullet pointed requirements get met. Like it or not, that doesn't describe the overwhelming majority of shoppers.