top of page

Original PDP Design for Desktop

Original PDP Design for Mobile

New PDP Design for Desktop

New PDP Design for Desktop

Vera Bradley, New Day – PDP Design

I had the opportunity to be a part of Vera Bradley's "New Day" rebranding, part of which consisted of redesigning their website and e-commerce experience. My task was to design their PDP (Product Description Page) – following our New Day branding, create a captivating, new and enriching experience for new and existing customers, and collaborate with ETS, Customer Service, Developers, Product Management, UX, and Art Direction.

PDP.jpg

Figma Iterations of PDP for Mobile and Desktop

Original PDP Design

Concerns with original design

  • Product information is dull and generic

  • A lot of negative space on the left side when there's a lot of text on the right side describing the product

  • Why is the material important/why should the customer purchase?

  • There is too much real estate for reviews/ there's too much scrolling

  • How can capacity and functionality of product be shown?

goals/ideas for new pdp

  • How can we show patterns and materials in a new way?

    • Some silhouettes have 10+ patterns/solids, how can we show this without taking up too much room on the screen?

  • Can we make badging for different product sizes to easily switch between PDPs without going back?

  • Can we show the Description, Specifications, and Care Tips in a new way?

  • Highlight the material of the product and its significance 

  • Showcase featured five star reviews of the product

  • Incorporate grid of product images other than above the fold

  • Simplify reviews/FAQs

  • Reduce amount of product shown toward the bottom "You Might Also Like" and "Perfect Pairings"

New PDP Design

implementation

  • Followed New Day design system

    • iconography, colors, typography, spacing, buttons​

  • Created pills of different sizes products to allow a better user experience when looking between sizes

    • Primary, secondary, and default​

  • Designed an accordion style menu to show our selection of materials and the number or patterns they come in

  • Created a separate section for the Description, Specifications, and Care Tips to show its importance and not get lost

  • Created a dot matrix to easily indicate the product's capacity and specs if customer is passively looking

  • Macro image of material highlighting fabrication and detailing and description to differentiate between other materials

  • Curated customer reviews to feature what makes the product the best/different from our competitors 

  • Implemented grid of product images – on figure, texture, and features to provide more context

  • Reduced number of reviews/FAQs being shown on initial load and simplified design with less noise

  • Removed "You Might Also Like" and "Perfect Pairings"

    • Only "Handpicked Just for You" product row​

UI/UX | Web | Branding |

bottom of page