Top Maschinen - a multi-brand machinery wholesaler UX case study

Since 1999, Top-Maschinen.de have been a multi-brand wholesaler of machinery, tools, and other equipment for metalworking, woodworking, welding, and more.

Their customers include large corporations, trade companies, universities, and private users.

{{blog-card}}

Navigation

Top Maschinen has a unique megamenu that highlights the top subcategories of each main category which, when clicked on, opens up further subcategories. 

The nav bar features a drop down menu next to the search bar which allows users to access their account, wishlist, and price comparison list. There is also a switch on the the top left-hand corner that lets them change between being a private or corporate customer (more on that later).

Homepage

If you’ve read our other blog posts, you’ll be familiar with the main banner slider at the top of the homepage. It’s the perfect place to showcase your top brands, newest products, and latest promotions.

Notice the orange contact button on the right - it follows the user wherever they go on the website. Given the complex nature of the products they sell, it’s worthwhile giving visitors the opportunity to contact their customer service team every step of the way.

Below we see a carousel of brand logos, a grid displaying top categories. One thing we don’t see is the navbar - it has vanished!

Next in line is a selection of top products.

Finally, a section dedicated to company info and their core competencies.

Notice how the navbar reappears when scrolling up - a neat way to maximize information displayed on the page without the user having to scroll all the way back to the top to discover products.

Footer

They made sure to include information about their shipping, prices, certifications, and accepted payment methods in the footer. All of these help to build trust and authenticity with their visitors.

Product Listing

The product listing displays a list of subcategories on the left-hand side, and gives filtering options above the listing itself.

Product cards contain a lot more information than we’re used to seeing, and not only allow users to add the product to their wishlist, but also to their comparison list (we’ll take a look at that later).

This page has an industrial feel to it which is perfectly suited to the products they sell and their target audience.

One interesting feature not commonly seen on PLPs is a ‘See More’ drop down that displays even more product specifications without the need to visit the product page. Again, given the nature of these products, this certainly adds to the user friendliness of browsing products on the platform.

However, some people may prefer to browse based on price rather than details, so Top Maschinen decided to include the option to switch to a more traditional grid layout.

Notice that there is not much of a distinction on mobile.

And now we can see the private-corporate customer switch in action - flipping the switch seamlessly converts the prices between tax included and tax excluded.

Comparison List

All the key specifications of the added products are presented side by side, allowing users to compare them at glance. On mobile, not so much, but it still does the job.

Brand Listing

Of course, Top Maschinen didn’t forget to list all of the brands whose products they sell as it is one of the many paths a buyer can take to finding the product they need. 

Different people have different tendencies when navigating a website, so when you have a huge variety of products to sell, it’s better to give your users a variety of ways to discover them.

Brand Page

The pages dedicated to individual brands are simple, but concise, with brief company description at the top.

Product listing, filtering, and a featured produced on the left.

And some additional company information at the bottom.

Product Page

While there isn't much of a difference here compared to a typical PDP, they did include anchor links that redirect to the product details and a PDF download of the product details.

Besides that, we see the add to comparison list and wishlist CTAs, as well as expected shipping times (in this case many months into the future).

For smaller items such as saw blades or drill bits, there are also bulk pricing options.

Unsurprisingly, there is a huge list of specifications, as well as contact information encouraging users to speak with a consultant. The PDF download is found right below the customer service details.

At the bottom, users can see a list of matching products which, in this case, are saw blades that fit the above band saw.

Cart

The popup cart UI is as standard as it gets - the price, empty cart button, and proceed to checkout CTA.

However, there is a secondary cart step where the user can view the order summary and make amendment, as well as view a carousel of products related to the items in the cart.

Checkout

The 5 step checkout process is presented with a clean, on-brand UI. Users are encouraged to register as there are a range of benefits they receive by doing, e.g., sales tax exemption.

Summary & Suggestions

Top Maschinen is a wonderful example of a website that sells to both businesses and consumers from one unified user experience thanks to the switch that allows users to toggle between a private and corporate client.

With such a huge product offering, they've done an outstanding job of making items discoverable by meticulously listing all subcategories in the main menu, implementing helpful filters on the PLP, and also allowing users to search by brand.

In terms of features and layouts, there isn't really anything obvious we could suggest that could improve the user experience. When it comes to B2B sales and the sale of machinery, in particular, flashy design layouts are typically of a little concern. Rather, the overall ease of use, performance, and how easily accessible the product information are of most importance.

It's an industry that's all about precision, specifications, and finding the right tool for the job - something that Top Maschinen has made incredibly convenient for the end-user by including a number of ways in which they can view product details and compare similar products to find the absolute best one for their needs.

UX deliverables guidelines

When it's time to upgrade your storefront design by using a more custom solution, here a few things to help streamline the process:

• All layouts should be designed mobile-first, desktop-second (but you will need both)
• Using pre-made components shortens the implementation time
• Layouts should be presented following the user journey in an orderly fashion
• All actions and menu or navigation states should be included
• All brand or icon assets should be in SVG format 
• UX design hand-over using Figma.com or a similar service is recommended
• UX questions & answers sessions should be included
• Follow up adjustments or corrections should be anticipated

{{blog-card}}