Diana Ibrahim
Connect

Product Detail Page

For
Johnson & Johnson
Role
UX Designer + ResearchER

Overview

Johnson & Johnson needed a scalable product page template that could accommodate the diverse needs of all their brands. The existing template lacked the flexibility to support brand-specific content and functionality, which limited its adoption across teams. As a result, the company faced inconsistent user experiences and increased maintenance complexity.

Challenge

The main problems the existing template had were: 

1
Template was not scalable
Many brands required different functional modules that were not included in the original page template, such as a "Where to Buy" module or direct-to-consumer CTAs.
2
Layout was clumsy
The existing template featured a large product image on the left and accordions on the right but lacked guidelines for image sizes and content lengths. This led to inconsistent and inefficient page layouts.
3
Limit the use of accordions
The client opposed the use of accordions, believing they harmed SEO, despite evidence to the contrary. Therefore, any new solution had to present content without hiding key information.
Approach
To create a more effective, brand-friendly, and user-friendly product page, we implemented a structured, insight-driven process. We needed to understand the existing content and how users and internal stakeholders prioritized different types of product information.
Content Audit
We began by conducting a focused audit of all existing product pages to document and evaluate the types of content currently in use. The goal was to understand the range and consistency of product details across the site. Concurrently, we analyzed how other retailers presented Johnson & Johnson products. This competitive review provided additional context and ideas for improving content organization, language, and visual hierarchy.
Stakeholder Research
We surveyed internal content managers and brand stakeholders, asking them to rank product attributes by importance. These insights helped us prioritize content based on business goals and perceived customer value.
Established The Hierarchy
The survey findings were synthesized into a content hierarchy that organized information into primary, secondary, and tertiary tiers. This framework helped us streamline design decisions and maintain alignment with stakeholders as we moved into prototyping.
Redesign
With the content hierarchy established, we focused on creating a modular, responsive product page template that could adapt to the needs of any Johnson & Johnson brand.

We used Axure to prototype responsive wireframes and simulate real interactions, allowing us to validate layout behavior, content flow, and navigation early in the process.
Modular Layout

We transformed each content area into an independent, reusable module, giving brands the flexibility to tailor the template to their specific needs. This modular approach enabled each brand owner to assemble product pages aligned with their unique goals—without the need to start from scratch each time.

Persistent Navigation

To support extensive content, we introduced a sticky navigation bar that allowed users to jump between sections like Product Info, Ingredients, and Where to Buy. This reduced friction and improved usability by making the content easier to digest.

Testing & Validation

We tested a high-fidelity prototype and conducted hallway testing with real employees at Johnson & Johnson. We received positive feedback from our participants about the ease of use of our template. Additionally, the testing surfaced additional requirements, allowing us to make several final enhancements before handoff.

These updates ensured the final design was flexible, scalable, and easily adaptable.

Results

As of Spring 2025, the current Listerine product detail page still reflects the design principles and structure we introduced—evidence of a durable, adaptable system.
‍