Product Detail Page Optimization

Optimizing the GFS Product Detail Page

Gordan Food Service (B2B eCommerce)

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

Role: Senior Product Designer

Timeline: 2024

Platform: Responsive Web

Collaborators: Product Managers, Engineers, Ordering Team

Context

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

The original experience struggled with content density, weak hierarchy, and inconsistent buy section visibility, making product evaluation slower during ordering workflows.

I redesigned the PDP experience to improve scanability, strengthen product context, and simplify purchasing behaviors across desktop and mobile ordering flows.

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

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.

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

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 responsive behavior and layout consistency across breakpoints.

Outcomes

The redesign delivered measurable improvements:

Add-to-Cart Rate

↑ 12 %

Time Spent on Page

↓ 10 % (faster decision-making)

Bounce Rate

↓ 11 %

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.