Product Page

noun, /ˈprädəkt pāj/

Core content and primary selling page for an e-commerce site

Responsive Showcase Mockup SamsungResponsive Showcase Mockup Samsung

Create a responsive product page experience


A content hierarchy was established using business objectives and competitor insight.

1. Product Name

2. Featured Product Image

3. Additional Imagery

4. Price

5. Star Rating & Reviews

6. Product Variants (i.e. size)

7. Product Description

8. Add to Cart

9. Find In Store

10. Product Features

11. Product Specifications

12. Product Reviews

13. Product Support

14. Product Accessories

15. Product Comparison

16. Similar Products

17. Shipping Information

18. Product Number

As part of the larger redesign, a content-heavy, responsive product page was needed that could be both flexible and scalable to account for varying content types with varying amounts of content.

Flexibility + Scalability

To achieve content flexibility, I opted for a page layout where the primary content groups are modular, stackable sections. This way, for products that do not have all content groups available, the design is not compromised.

To achieve content scalability, I added a "show more" interaction pattern within each content group. Layering content this way ensured the overall design of the page was maintained regardless of content depth.

Lastly, because this was to be a content-heavy page, ease of scannability was important. Content grouping and prominent labeling ensured users could easily find what they're looking for.

Fixed Left Nav

Featured Reviews

Content Grid

Product In Context

Elements from both the "Fixed Left Nav" concept and the "Featured Reviews" concept were combined in the final product page design. A slimmer design was achieved for the left-hand nav, which allowed us to use the right column for primary product content and CTAs.

Visual Designs

[unex_ce_button id="content_xkbyukic8" button_text_color="#ffffff" button_font="regular" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#212121" button_padding="15px 60px 15px 60px" button_border_width="1px" button_border_color="#ffffff" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#000000" button_border_hover_color="#000000" button_link="" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]SAMSUNG.COM[/ce_button]