I was approached by ZAGG to redesign their product page template. We incorporated the new header and made other changes based on user feedback and goals around increasing engagement and adding a bundle feature. We also made the following changes:
• Clean up styles to make the product selection area more readable and scan able
• Clean up styles to make the product selection area more readable and scan able
• Make space for the eventual inclusion of Klarna
• Show a proposed delivery time
• Add a ticker to showcase a particular sale to drive urgency
• Redesign the options section so the user could more easily select product options
• Add a ticker to showcase a particular sale to drive urgency
• Redesign the options section so the user could more easily select product options
• Create a bundle section where adjacent items are added to the cart with the main purchase
• Give the CTA section more hierarchy and options for payment
• Give the CTA section more hierarchy and options for payment
The finished design was selected and approved after multiple options and prototypes were presented. I worked with the dev team closely to give them details around styles, margins and spacing so they could do their job quickly. I also created a new component overview that acted as a guide to build individual components.
Desktop Product Page
Mobile Product Page
Component Overview