In the Coupang product detail page design of the classic H-shaped pet harness, we organize the content around connection locations and size selection. Through dark blue column entries, white background descriptions, and real wearing photos, product identification, partial descriptions, and scene information are arranged at different levels, allowing readers to continue to understand the products in a clear order.

Design challenge: Separate different reading tasks

This set of product detail pages should not only retain the identity of the classic H-shaped pet harness, but also accommodate different themes such as connection positions and size selection. Instead of letting each picture carry all the information repeatedly, we separated the whole, parts and scenes, and controlled the distance between titles, pictures and descriptions.

Our design strategy

We use dark blue column entries, white background descriptions, and real-life photos to establish a continuous visual language so that the subject can be clearly identified from the background. The title uses an obvious font size and weight hierarchy, and the supplementary description is relegated to the next level to avoid decoration, photos and text competing for attention at the same time.

In terms of content organization, we divide chapters according to the themes of real works: use larger pictures to establish overall relationships, use parts and diagrams to explain details, and then use bounded text areas or lists to organize supplementary information. Long pages create pauses through color blocks, cards, and white space between groups, and chapter switches can also be identified during continuous reading.

Product Overview: Columns divide different information

We use dark blue horizontal bars to connect product overview, color display and structural description. The white background keeps the colors of the webbing such as red, orange and blue clear, and long pictures gain reading rhythm through partitions.

Connections and sizing: diagrams and tables for left and right division of labor

We show the connection locations side by side above, and the dog measurement chart and sizing chart below illustrate selection information. The yellow circle line is close to the corresponding position, and the picture and text maintain a direct relationship.

Outdoor photos: four grids to unify different postures

We organized the photos of the two dogs into four grids, with common margins connecting different ground backgrounds. The traction position remains visible and the reader can observe the direction of the harness against the body.

Close up shot of light-colored dog: emphasizing the webbing line

We use one large picture and two small pictures to show the red and blue webbing, keeping clear intervals between the pictures. The close-up view brings into focus the intersecting relationship between the fasteners and the back.

Another group of wear: continuing the same photo structure

We show another dog with a similar size picture combination, with blue webbing protruding from the warm coat. Unified photo proportions allow adjacent modules to be continuously compared.

Deliver and design value

Through this version of the product detail page, we establish a continuous reading path around connection locations and size selection. Dark blue column entries, white background descriptions, and real wearing photos connect different chapters. Image scale, text level, and white space work together to distinguish priorities, allowing product overviews and partial descriptions to complement each other.

Develop a clear Coupang visual expression for your product

You can provide us with product links, existing materials, and key points that need clarification. We will combine the product structure, style and usage scenarios to plan the appropriate picture group or product detail page content and layout.