Ricoh Inc.
Product Listing Page & Product Detail Page Redesign

Enterprise e-commerce UX · Design Systems · Content Modeling · Stakeholder Alignment

 

The Short Version

A legacy product listing page with stagnant engagement. A lean agile team. A component-first approach that redesigned one page and improved the whole platform.

My Role

Product Designer. Led discovery, wireframing, stakeholder alignment, design direction, and cross-functional coordination from concept through shipping.

The Problem

Three things were broken:

  • The facet filter disappeared when users scrolled. On a long product catalog it was functionally useless.

  • Product cards had three bullets each but the content varied from card to card. Comparing products meant reading every one carefully.

  • Nothing was scannable. Users had to read to find basic specs like paper size or printer type.

Analytics confirmed it. Engagement had been flat for months with no upward movement.

How We Found It

  • Pulled analytics to establish baseline engagement on the page

  • Ran competitive analysis against category-leading product listing pages

  • Conducted unmoderated user testing alongside the UX Lead — users navigated Ricoh and competitor PLPs and told us what they noticed, what they preferred, and what mattered most when evaluating products

  • Presented findings to the product owner, merchandising, content, and brand teams before any design decisions were made

The Approach

Came to the first stakeholder meeting with a wireframe already built. Knowing the team responds to visuals, showing the direction was more effective than describing it.

The design was deliberately lean. We worked with existing Salsify data, existing imagery, and existing back-end infrastructure. Highest impact, lowest lift.

One decision that had platform-wide impact: I consolidated three separate image types — tile, hero, and first gallery image — into one unified asset. It reduced content burden on editors and made product pages consistent across the board.

The facet filter was redesigned using existing back-end logic, keeping it primarily a front-end change with targeted enhancements rather than a full rebuild.

Throughout the process I worked closely with our Product Manager to make sure every design decision fit within the development team's sprint schedule.

 

Getting Alignment

Brought brand in early to confirm visual direction before high fidelity began. Worked with merchandising to map Salsify data fields directly to Figma, making sure content, design, and development were working from the same source of truth before anything went into the Jira board.

Every decision was framed around shared KPIs. The goal was never to redesign anyone's territory. It was to move numbers everyone already agreed needed to move.

Shipping It

Moved into high fidelity with the Visual Designer, ensuring every component aligned to the design system and met global recognizability standards.

Designed the full future state first including chips and on-page search, then scoped back to phase one for development. Showing stakeholders the full vision before pulling back to what would ship first gave everyone confidence in the direction.

I stayed involved through every environment — development, staging, and QA — before it reached production. Catching issues early in the cycle meant a cleaner ship.

Components Built for the Platform

Every component was designed for reuse across the site, not just the page it was born from.

  • Facet Filter Designed for the Product Listing Page (PLP). Built for reuse on the Resources page and other catalog-style pages across the site.

  • Table of Contents (TOC) Navigation Born out of the Product Detail Page (PDP) redesign. Deployed first on the Resources page as a live test to validate how users interact with it before full Product Detail Page (PDP) implementation.

  • Homepage Hero Banner Analytics showed slots 2 and 3 on the homepage carousel were getting minimal engagement. Redesigned from a rotating carousel into a full-width edge-to-edge hero banner with sub-feature items surfaced within it. Brings secondary content into view without requiring any user interaction. Recently shipped. Analytics in progress.

Product Detail Page (PDP) — In Progress

Currently in the wireframe phase. Individual components are being designed and validated independently for use across other site surfaces first. When the Product Detail Page (PDP) is ready to ship, the components will already be tested and development-ready, speeding up execution and reducing the QA burden significantly.

Designing for the platform, not just the page.

Results

  • +27% Increase in product engagement (51.5% vs 40.7%)

  • +5% Lift in request-a-quote conversion rate (1.09% vs 1.04%)

  • 50%+ Reduction in editor page-build time following content modeling work

Homepage hero banner recently shipped. Analytics in progress. Table of Contents (TOC) live on Resources page. User interaction data being collected.