Product Listing Pages (PLP) are the primary way customers browse products on the current Brady site. Every link in the main nav takes you to one of these filterable pages instead of directly to a product page. This can be great for browsing but hinges on the subcategories and filters being obvious and helpful. Too often, the sidebar was confusing or getting ignored, making the browse experience more frustrating than necessary.
Designed across whiteboards, sketchbooks, Sketch, and HTML/CSS.
All the reading we did supported a method of subcategories being surfaced with some form of visual flair. After a lot of competitive research, and internal back-and-forth, we settled on using application photos (or, when we didn’t have them, product groupings), that are cropped to a circle to differentiate them from our product images which are square. Those two choices give us an easy to spot differentiator between categories and products.
With that decision made, we leveraged Google Optimizer to test our plan to get validation from our customers. We picked one of the highest visited label categories, coded a simple example of what we had planned, and released it to half of the audience.
What we found was people often clicked the visual subcategory before scrolling to the product listing beneath, thus giving users a much more manageable, specific listing when they did start scrolling. Success!
We didn’t want to stray too far from the research and testing, but had some issues to work out like where to put info that would be displaced by the new visual categories, how the accordion should look/function, and what to do about sidebar filters which now were duplicative.
We worked out these issues and more via Sketch and UserZoom to keep things moving quickly and found that more info put into the cards was less scannable and therefore too cluttered. In the next updates, we simplified back to just the image and title.
With the plan validated, designs approved, and development handled by our dev team, we focused on reviews and iterations that came up during the process.
We’ll find out soon, but as of now, we’re actively monitoring the impact this has on browse and discovery, as well as our external SEO. We have promising early results, and findings will certainly be worked into future updates.
One thing we want to loop back on is the photography used for these subcategories… since there were so many images needed on a tight schedule, many low-priority areas reused old images that need some work to bring them up to our new Brand & UI standards. Luckily that’s outside of the dev-teams backlog, instead managed by content and merchandising. So, as they get time, those will be changing and updating regularly.
Instead of making yet another Substack newsletter, just sign up for an old-fashioned email blast whenever I remember to write it.