New Product Page

The existing Product Detail Page (PDP) had been designed many years earlier, at a time when typical desktop screen sizes were significantly smaller. As customer behaviour and device capabilities evolved, the template no longer made effective use of available screen real estate.

GA data showed that 1920×1080 is the most common resolution, followed by other large desktop and tablet breakpoints. On these screens, the old PDP created large areas of unused white space.

To accelerate learning and reduce ambiguity, we built fully interactive static HTML prototypes that accurately reflected real layouts, breakpoints, and scrolling behaviour. These prototypes were used directly in user testing sessions, allowing participants to interact with the experience as they would on a live PDP, rather than reacting to static designs.

Key learnings from testing included clearer product understanding when imagery was given more space, reduced effort when multiple angles were visible without repeated thumbnail interaction, and increased confidence when key options and information remained visible while scrolling.

Beyond user testing, the prototypes proved invaluable for stakeholder alignment. Being able to demonstrate the experience at real screen sizes helped shift conversations from opinion to evidence, ultimately securing leadership buy-in and prioritisation into the seasonal plan.

The solution was built on the modernised platform, using Figma variables and componentised patterns to ensure consistency and speed of delivery. Storybook-backed UI components provided a single source of truth between design and engineering. The template was fully responsive, with a deliberate fallback to the legacy PDP at smaller resolutions where it continued to perform well, and was structured to scale efficiently across international sites.