top of page

Product Detail Page Redesign

UI DESIGN

RESEARCHED AND DESIGNED THE UPDATED PRODUCT DETAIL PAGE DESIGN FOR BURTON.COM.

COLLEEN WADE: UI DESIGNER, MORGAN MALTBY: UX DESIGNER, EMMA LECHNER: DEV PRODUCT OWNER, MEG TRACY: MARKETING PROJECT MANAGER 

CHECK IT OUT LIVE ~ HERE

Image-Gallery.png

Image Gallery

DESIGN SOLUTIONS

Final design includes a 2-Up image gallery that scrolls to the bottom of the buy block. Horizontal images and video on autoplay can be utilized within this design. This solution helps better incorporate brand content into the image gallery. Fit model size and height data is visible and scrolls with image gallery. 

Buy-Block.png

Buy Block

DESIGN SOLUTIONS

The upper area of Buy Block includes the display of Breadcrumbs, SEO title (suppressed on mobile), Product Name, Product Price, Active Promotions, and Link to Reviews. Images are utilized as the color selection in order to better represent products. Horizontal scroll for color selection on mobile. Apple Pay and alternative payment method information added. This design is customizable stylistically and also designed for Anon and MINE77 product usage.

Sliders.png

Benefit Sliders & Icons

DESIGN SOLUTIONS

Product benefit sliders were created to visually display product data for customers to compare and contrast product. These benefits include Warmth, Waterproofing, Breathability, and Windproofing to distinguish technical soft goods. These were measured in percentages. Sliders are also utilized across Burton hard goods to easily display and distinguish snowboard personality and ideal terrain usage. 

I designed icons to simply display different product benefits as well. The most relevant icons per product are featured above the benefit sliders. 

Product-Details.png

Product Features

DESIGN SOLUTIONS

In the previous PDP design, product features were mapped to images, which created visibility issues for mobile and tablet. The solution we came up with was to consolidate the product features into a bulleted list, place it within the buy block in a condensed view for mobile, and work to optimize the product copy. 

Final Comps

bottom of page