Product Detail Page Optimization

Gordan Food Service (B2B eCommerce)

Improving Gordon Food Service’s B2B PDP with clearer hierarchy, better product context, and streamlined ordering workflows.

Context

The PDP redesign focused on improving product presentation, refining content hierarchy, and reducing friction in the shopping experience.

Role:

End-to-End Designer & PDL Implementation Engineer

Timeline:

Oct–Nov 2024

Problem

The legacy PDP created friction and confusion:

• Overloaded layout with poor hierarchy

• Unclear “Add to Cart” behavior

• Inconsistent product information

• Low engagement and slower conversions

These issues made evaluation difficult and reduced buyer confidence.

Solution

The PDP redesign delivered:

• Stronger content structure

• Larger, clearer product visuals

• A reworked “Add to Cart” section

• Design-system alignment for consistency and scalability

No existing platform solved on-demand barber staffing with clarity, trust, and speed.

Approach

Baymard Audit

Reviewed validated e-commerce standards for PDP structure, content grouping, and conversion flows.

Competitive Analysis

Studied B2B and B2C PDP formats for layout, hierarchy, and cart behavior.

Design Iteration

Explored multiple approaches to the buy section and product information architecture.

Validation Testing

Split-tested Iteration 3 against the existing PDP.

This resulted in a fragmented user experience that didn’t scale for future features or themes

Design Iterations

Iteration 1 — Fixed Buy Section

Persistent buy controls.

Feedback: Too intrusive, especially on mobile.

Iteration 2 — Vertical Buy Section

Improved structure but switching tabs added friction.

Iteration 3 — Fully Expanded Buy Section (Final)

Tabs removed, clarity improved, friction reduced.

Winner because:

• Faster evaluation

• Higher engagement

• Fewer decision obstacles

User Testing insights

Participants compared the old PDP vs the redesigned one.

Findings

• Faster scanning of product details

• Easier “Add to Cart” interactions

• Better content hierarchy understanding

• Stronger visual clarity

Final Designs

This resulted in a fragmented user experience that didn’t scale for future features or themes

Product Preview

Larger images, clearer thumbnails, improved angles.

Description Section

Structured, collapsible sections for highlights, attributes, and details.

Buy Section

Prioritized pricing, unit selection, and CTA visibility.

Responsive Behavior

Improved scaling and spacing across breakpoints.

Outcomes

The redesign delivered measurable improvements:

Add-to-Cart Rate

↑ 12 percent

Time Spent on Page

↓ 10 percent (faster decision-making)

Bounce Rate

↓ 11 percent

Next Projects

Designing AeT’s First Student and Educator Dashboards

Pearson (EdTech)

Turning raw performance data into clear, actionable insights across web and native.

Designing Multi-Modal Drawers for Pearson’s eTextbook Platform

Pearson (EdTech)

Improving navigation and content accessibility with a unified drawer system across web and mobile.