Northwoods Blog

Designing Your Manufacturer Website, Part 2: The Product List Page

June 08, 2017

Designing Your Manufacturer Website, Part 2

Design practices for manufacturer websites are unique, for reasons described in the first article of this three-part series. We suggest reading  “Designing Your Manufacturer Website, Part 1: Defining Purpose” and then moving on to Part 2.

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.


Designing Manufacturer Website pt 2We focus now on designing the optimal Product List Page. The examples come from the Dispense-Rite website, unless otherwise noted.

Page Components

The purpose of the Product List Page is to help users navigate to the Product Detail Page(s) that fit their needs.

The Product List Page is not for learning specifics about individual products. A great Product List Page  shows only the information the user needs to get to the correct next page. The faster users pass through your Product List Page, the better.

In three stages, the Product List Page narrows a selection of thousands of products down to five to 10.


Stage 1: Choose a Product CategoryDesigning Manufacturer Website pt 2

Users entering your website’s product catalog need a simple first step to start narrowing down. Clicking a product category in the global navigation provides that step. It lands them at a Product List Page that contains a subset of products from the catalog.

A large number of items on the Product List can overwhelm the user. So we direct the user to Stage 2.






Designing Manufacturer Website pt 2Stage 2: Filter Products

On the Product List page, the user selects attributes in the filter, which instantly shrinks the number of products shown on the screen.

Filters should not shrink the results set to a single product, but to a number small enough – usually five to 10 -- for a person to easily scan and compare.








Stage 3: Browse Remaining ProductsDesigning Manufacturer Website pt 2

After filtering, the five to 10 products should appear in the middle of the screen. Users can quickly determine which product best fits their needs.

Make scanning easy for the user. Supply strong images and clear product names.







Product Families

We usually recommend listing each individual product, as opposed to families of products, on the Product List Page. Most ecommerce sites follow this convention, so users expect it.

Listing every individual product speeds up the selection process, because it allows users to click directly to the specific product they need. Individual listings spare them clicking into a product family and then clicking again to view an individual SKU.

Some manufacturers, however, need to present their products as families. It makes sense, for example, for The Vollrath Company to show its fry pans as a family of products, as in the screenshots below. Vollrath offers many families of pans, and each family contains several SKUs. If Vollrath were to show each individual SKU on the Product List Page, the array of choices would overwhelm users, even after filtering.


 Designing Your Manufacturer Website Part 2


To take a middle approach, list the individual SKUs on the Product List Page, but then link to the other items in a product’s family as “related items” on the Product Detail Page.

The right choice depends upon your products and the particular needs of your customers. You’re seeking the right combination of navigation, filters, and product family groupings that make it easy for  users to narrow down to a reasonably small number of products on the Product List Page, after all filtering.

Product Naming Conventions and Images

Product names are among the first markers that differentiate products in the minds of users. Consistent naming boosts users’ speed and comprehension as they scan your product pages.

Consider this list of ceiling light fixtures from www.todaysdesignhouse.com. Item names follow a formula: (1) number of bulbs the fixture holds (“2 Light”); (2) mounting style (“Ceiling Mount”); and (3) any other differentiating factors (“with Pull Chain”). The darting eye always finds the same arrangement of information, so scanning is quick and easy.


Designing Manufacturer Website pt 2


The lighting example also shows the importance of images. The look of each fixture is as unique as its functional characteristics.

Product Information to Display

Show only the most critical differentiating features for each product on your Product Pages. This listing from www.pactiv.com lists the Material Type, Color, and Dimensions -- just enough information to let the user know which product to click for further details, but not enough for a firm buying decision.


Designing Manufacturer Website pt 2


Exactly what information should you display? This is unique to each company. Determining what to include and what to leave off requires intimate knowledge of your market, products, and customers.

Minimizing Redundant Information

One danger of the Product List Page is listing the same differentiating factors in your filters, product names and product information. Minimize this redundancy. If, for example, you list different colors as your page filters, and the user can see the colors in the product pictures, don’t include color as part of your product name or other product information.

Aesthetic Design Tips

Common conventions place filter checkboxes on the left side of the page and products to the center-right in a grid or list layout. The rest of the design and layout details vary according to what information you need to display and your brand’s look and feel.

When designing your page, study as many similar websites as you can. What conventions are common on those sites? Stay within those conventions, and users will find your page easy to navigate.

The Product List Page is no place to be creative. Invent new approaches only if you absolutely must.

Don’t add graphical elements -- lines, background colors, miscellaneous shapes, etc. -- unless they are necessary to create visual separation. This page hits users with a lot of information, so don’t add clutter.

An Underestimated Effort

Your main takeaway from this article: Designing a Product List Page is about information architecture, not aesthetics. Another takeaway: This is not a trivial undertaking.

Changes in information architecture can have far-reaching effects. They can imply changing data or even the entire way you arrange your product hierarchy. They could easily require changes to your Enterprise Resource Planning (ERP) and other systems. They could involve half the people in your company.

What’s next?

After creating a first version of your Product List Page design, you can start designing the Product Detail Page. Design of both pages will likely involve some back-and-forth and multiple revisions. The process involves lots of decisions, many of them interconnected, as you move certain pieces of information up or down a page level.Which brings us to Part 3 of our series: “Designing Your Manufacturer Website: The Product Detail Page.”

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.