productpage-thumb_2.jpg

Beauty PDP | UI

My role was to design a responsive product page for the brand’s E-commerce site. The product page highlights each skincare and beauty product with large beauty detail shots. To help share the story for what the brand stands for, we have relevant articles and posts that feature the product. In collaboration with a full stack developer, I also created a design system through a UI kit to be used across all pages of the site. 

20151111-beautycounter.com-ui-kit.png
line.png
product_desktop_00.png
product_desktop_01.png
product_desktop_02.png
product_desktop_03.png
product_desktop_04.png
product_ipad_blushduo01.png
product_ipad_blushduo02.png
product_ipad_blushduo03.png
product-ipad-cheek-04.jpg
 In mobile, product details are concise to accommodate for screen size.

In mobile, product details are concise to accommodate for screen size.

 Swiping comes into play to view other details and videos.

Swiping comes into play to view other details and videos.

 How to videos for specific products

How to videos for specific products

 Related news involve press articles, blog posts, and other social media news about the product.

Related news involve press articles, blog posts, and other social media news about the product.