Mastering Product Detail Page Design with the “Cross Method” for Clear Information Hierarchy

Introduction

Designers often endure endless revisions because product requirements are vague. The author introduces a practical framework called the “Cross Method” to organise the information hierarchy of a product‑detail page.

Part 1 – Who Is Responsible for Repeated Changes?

Product managers frequently request changes based on feeling, while designers feel frustrated and blame themselves. By juxtaposing multiple draft versions, the author discovered that the root cause is unclear information priority rather than design flaws.

Part 2 – Origin of the Cross Method

Inspired by Eisenhower’s four‑quadrant matrix, the author replaced the “urgent” dimension with “must‑show”. This yields four quadrants: important‑must‑show, important‑optional, optional‑must‑show, and optional‑optional. The resulting diagram is shown below.

Part 3 – Applying the Cross Method to Build the Hierarchy

All elements of the product‑detail page (over 30 items) are first listed, then classified into the four quadrants. The highest‑priority quadrant contains the product image, name, price, and primary call‑to‑action.

Part 4 – Visual Design Based on the Hierarchy

Each quadrant is further split into tiers, and visual treatments (size, colour, weight) are adjusted accordingly. Examples include bold, warm colours for price, larger buttons for primary actions, and greyed‑out text for low‑priority information.

Part 5 – Visual Review

The final design reflects the hierarchy, with consistent iconography, typography and colour. The author notes that many earlier decisions were based on feeling; the Cross Method provides a logical, repeatable framework that makes the design process smoother.

When information hierarchy is unclear, designers should first clarify the “must‑show” versus “optional” status of each element, using the Cross Method to avoid endless revisions.