top of page
Electrician Fixing Light

Improving a B2B Ecommerce Site for a leading distributor of kitchen and bath products

B2B Ecommerce Responsive Design

Introduction

PDI Kitchen & Bath is a distributor serving plumbers, builders, remodelers, and interior designers across the Southeast. With a goal to grow ecommerce from 1% to 20% of total revenue, PDI needed a scalable B2B ecommerce experience built on Shopify Plus.

Problem: The existing ecommerce experience did not support how professionals actually purchase. Based on research findings, customers struggled with:

  • Finding known products through navigation and search

  • Filtering large product catalogs efficiently

  • Understanding product availability and backorders

  • Managing repeat purchases and saved items


Behavior patterns varied by role:

  • Plumbers prioritized fast reordering and access to order history

  • Interior designers relied on wish lists to curate products for projects 

​

Despite valuing secure checkout, many customers continued placing orders through sales reps. The site was not structured around real B2B workflows.

Goal: As the UX Designer, I owned the sitemap, navigation structure, and wireframes for the redesign. My goal was to create a clear, efficient ecommerce experience aligned to real B2B purchasing behavior.

Process: The UX team conducted research to gain insights on the PDI's customers. Having the research in the back of my mind, I had a collaborative onsite workshop with the client to figure out the navigation, PDP and PLP. Following the workshop, I had 2 sprints to complete.

Team: Executive Director of UX, UX Designer (Me), Project Manager, UI Designer and External Development Team

THE SOLUTION

The redesign focused on restructuring the experience around purchasing behavior.

Reworking the Information Architecture: I created a new sitemap aligned to updated taxonomy and B2B workflows:
 

  • Simplified top-level navigation

  • Reduced category overlap

  • Designed scalable mega-navigation

  • Prioritized product-first access

 

Based on plumber and interior designer behavior, Orders and My Lists were elevated into the utility navigation for persistent, high-visibility access.

 

To support both trade professionals and visually driven designers, I enhanced the mega menu by introducing imagery at the second-level category tier. This provided visual context for product groupings, improved scanability, and helped users quickly orient themselves within large assortments.

​

Modernizing the Product Card on the Product Listing Page (PLP): 

Product cards were redesigned to improve clarity and support faster comparison.
 

  • Clear pricing hierarchy

  • Availability visibility

  • Consistent, structured layout

  • Larger quantity controls 


To better reflect the breadth of PDI’s catalog, product cards were modernized to surface key variations — such as color options — directly on the card. This allowed users to preview available options without navigating into the PDP, reducing friction in high-volume browsing and reordering workflows. 

​

On the PLP, visual filters were added so customers could find commonly used attributes more quickly (improved scan ability)

​​

Strengthening the Product Detail Page (PDP): The PDP was redesigned to reduce uncertainty and support confident purchasing.
 

  • Clear variant selection

  • Prominent quantity and add-to-cart

  • Structured specifications

  • Visible inventory modules

  • Consolidated documentation access


Inventory and specs were prioritized based on research findings.​

​

Working with Shopify Constraints: Checkout and parts of My Account relied on Shopify’s out-of-the-box functionality, limiting customization. I collaborated with the Shopify dev team on what was and wasn't possible to design. Rather than over-design restricted areas, I focused on strengthening:
 

  • Navigation clarity

  • Product discovery

  • Pre-checkout decision points

TITLE OF THE CALLOUT BLOCK

Results 

Even though no metrics were available at the time of writing this case study, the redesign improved the site experience:
 

  • A scalable B2B information architecture

  • Improved product discoverability

  • Clearer filtering and product hierarchy

  • Better support for reorder and wish list behaviors

  • Increased alignment with real purchasing workflows

Like what you see?

Let's chat.

bottom of page