PDP Components

When approached by the merchandising team with ways to make the Product Details Page (PDP) more robust and customized, they already had a few ideas in place we just needed to find ways to execute visually. As such, we were able to do very light competitive research before jumping into design and dev.

Competitive research, mock-ups Via Sketch, and coded in HTML/CSS.

Three New Sections

Developers, aware of this project in advance, had given us three new sections to customize on the otherwise database generated PDPs. This allowed us to break the request into 3 chunks based on what made sense with the page flow and current organization structure.

The first section acts as an expansion of the Overview section, where we often highlight a video and link to secondary material (eg: relevant calculators). The second, sitting above the Specifications table and below the Overview, is a great chance to pull out something like size comparisons or top applications to make more visual. The last section, towards the bottom of the page, is reserved for a support banner that takes you to a printer’s specific owner/support page.

Printer Overview

Tape Overview

Padlock Overview

Software Overview

Applications Component

Support Page Banner

Beyond Printers

When we first launched these to test their viability, we focused on Brady Printers since there were fewer pages and more overlap between types (handheld, desktop, and industrial). As we tested and collected analytics it was quickly validated as an improvement so we have moved on to launching similar components in the Lockout Tagout section of the site (for padlock size comparisons) and are working on a software bundle breakdown for the Workstation kits.

In the future, most PDPs will have some mixture of these by default, increasing their usability and improving merchandising and marketings control over the pages as a whole.