B2B

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

Released on 
Jan 19, 2022
 • 
5 min read
Written by
James Burghes

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.

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).

Top Maschinen navigation

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.

Top Maschinen homepage

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!

Top Maschinen homepage

Next in line is a selection of top products.

Top Maschinen homepage

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.

Top Maschinen homepage

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.

Top Maschinen footer

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.

Top Maschinen product listing

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.

Top Maschinen product listing

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.

Top Maschinen product listing

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.

Top Maschinen product listing

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.

Top Maschinen comparison list

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.

Top Maschinen brand listing

Brand Page

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

Top Maschinen brand page

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

Top Maschinen brand page

And some additional company information at the bottom.

Top Maschinen brand page

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.

Top Maschinen product page

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.

Top Maschinen product page

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

Top Maschinen product page

Cart

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

Top Maschinen cart

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.

Top Maschinen 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.

Top Maschinen checkout

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

Next steps 

Feel free to reach out to get a slide deck on:

  • What to ask from a UX agency?
  • UX deliverables & SoW scope
  • Go-live plan for your marketplace

Vendo lets you launch a marketplace at a fraction of a typical cost and within weeks instead of months. Vendo comes with a built-in storefront that allows you to go live in a matter of days. However, if you require a more custom storefront layout, we'd need your UX input in the form of branding and layout designs. To make it easy for you, we have a customizable storefront template ready for customization and guidelines for your designer. Feel free to review our other UX case studies or contact us to discuss next steps.

About Author

James is an account executive and customer success agent at Vendo. If you decide to reach out to us, you can be sure he’ll be the first the respond.

Try out our fully functional free trial for 14 days.

Start a Free Trial

Get the latest to your inbox

Thank you! Your submission has been received.
Oh no! Something went wrong while submitting the form.
Start A free trial

Try out our fully functional free trial for 14 days.

No credit card is required. It only takes a moment to sign up and gain full access to the platform and its documentation. Feel free to requests a guided demo as well.