Northwoods Blog

Designing Your Manufacturer Website, Part 3: The Product Detail Page

August 15, 2017


This is the third article in the Designing Your Manufacturer Website series; follow the links to Part 1 and Part 2.

To review, manufacturer website catalogs have three types of pages:

  • Product List Page – Lists your products or product families; these pages have filters that enable users to narrow down to the specific product that fits their needs.
  • Product Detail Page – Uses a pre-determined page layout to display all the details about a single stock product or product family.
  • Custom Product Page – Is usually designed individually for each custom product, in order to describe configuration options available to the user.

On their website’s Product Detail Pages, manufacturers can display more comprehensive information than dealer websites, because manufacturers can optimize for their own types of products. Dealer websites often serve a much wider variety of products, so their page designs tend to be more generic and less thorough.

Manufacturer product listings probably don’t need user review ratings, Add to Cart buttons, shipping information, and pricing, common elements on dealer ecommerce sites. With no need to funnel users to the Buy Now button, manufacturers can  optimize the page for users seeking detailed information.


Prioritize Your Information

The first step in designing your Product Detail Page is to list all the information you need to display. Then arrange the items hierarchically, with the most critical information at the top and the least critical at the bottom. It should look something like this:

  • Product image(s)
  • Product name
  • SKU #
  • Differentiating features (bullets) important to your users
  • Product certifications
  • Calls to action (Find a Dealer, Contact Us, Add to Wish List)
  • Videos and other marketing resources
  • Detailed specifications
  • Optional product features or SKUs
  • Technical resources
  • Marketing copy description
  • Applicable markets
  • Cross-selling (related products or accessories)

By the time users get to the Product Detail Page, they want specifics. Don’t impede them with the niceties of marketing language. Promote major differentiating specifications first.


Wireframe Your Page

After you determine what you need to put on the page, the next question is where. At the top of the page, the product image commonly sits on the left, with the product name, bullets, and call to action to its right, as in this example from www.hedonline.com:


Designing Your Manufacturer Website


Customers do want comprehensive information, but don’t overdo the bullets. Readers can’t easily process more than eight, and they will lose important points amid the clutter. The further down the page you go, the more you can expand on details and nuances of the product.

Should you organize the rest of the content in a tab layout? Tabbed content has many advantages.  Because less appears on the page all at once, page content becomes easier to grasp. Users can easily scan the types of content, which are specified on each tab.

This tabbed layout, from www.nerconconveyors.com, is a good example. You know immediately that photos, videos, documents, illustrations, and industry information are readily available.


Designing Your Manufacturer Website


However, it is also a best practice not to “hide” content. With tabbed content, users must click on something to get to certain information. Generally, that’s bad. But many designers and users are okay with tabs as an exception.

Another potential downside: Tabs don’t always adapt well for mobile devices. That depends on your particular design and how many tabs you need.

A very long page, with content listed under headings, is an alternative to tabs. The Product Detail Pages on www.Dispense-Rite.com are great examples. A user can easily scroll down the page and see all the content.

One could argue that users work harder when they scroll to survey content. But people are accustomed to scrolling long pages. The layout is easy to scan very quickly, and long pages are very mobile-friendly.


Designing Your Manufacturer Website


Ultimately, to tab or not to tab depends upon the nature of your content and your personal preferences.

When companies have less information to show, they can get more creative with layout. Note, for example, the excellent scanability and mobile adaptability of the column format on Product Detail Pages at www.umarkers.com.


Designing Your Manufacturer Website



Images and Videos

Generally, the more images and videos you have for a product, the better. Do you have a particularly sexy product shot or video? Great!

But resist the temptation to put it first on the page. Remember, the user may not even know the basics about the product, or what it looks like. Open with a simple, clear shot of the product. Impart all the critical points, so the user can determine whether the product comes anywhere near what the user needs. Jump that hurdle first, then persuade with the sexy video.

People like the ability to see several images quickly and zoom in on them for details. They like image scrollers, such as the one below, again from www.umarkers.com. It gives users everything they need and occupies very little screen space.


Designing Your Manufacturer Website


Placement of videos can be trickier. You might want to feature them prominently, but after showing the basic product photo, product name, and bullets, little open space might remain at the top of the page. Alternatively, you can place videos in the image scroller, as you would a still photo. Or you can embed them lower on the page.

From defining your purpose, to designing product list pages and product detail pages, this three-part series has armed you with the basics needed to design a manufacturer website. But of course, the design is only the beginning. You need a strong digital marketing strategy to get new users to your site, and once they’re there, the site needs to be optimized for user experience in order for them to stay engaged. But while this process may seem long and difficult, it is worthwhile. Just get started, and it won’t be long until you see what value a well-designed manufacturer website can have for your organization. 

Patrick Bieser

President, CEO & Founder of Northwoods

Patrick Bieser is the Founder of Northwoods and an expert in website usability and design. He has spent the last 20 years honing his software development skills by day and website design skills by night. He is also the product manager behind the Titan Content Management System (CMS). Someday, Patrick hopes to become a Youtube sensation by launching the first videos focused on product training to go viral.

Read Patrick Bieser's Blogs

Ready to Learn More?

Contact us with any questions, comments, or suggestions.

Northwoods Web Solutions

1572 E Capitol Drive

Milwaukee WI 53211


847-752-1095 (Chicago)

Microsoft Partner SIlver
© 2018 Northwoods - all rights reserved.