Product Page
noun, /ˈprädəkt pāj/
Core content and primary selling page for an e-commerce site
Client
Samsung
Task
Create a responsive product page experience
Role
UX Designer
Content
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 Samsung.com 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.
CONCEPT #1
Fixed Left Nav
CONCEPT #2
Featured Reviews
CONCEPT #3
Content Grid
CONCEPT #4
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
