Decked PDP Redesign
A user experience project to better communicate what the DECKED product is and create a user flow that is intuitive for the customer.
Timeline |
Aug. 2023 - Sept. 2024
Team |
Solo designer, E-commerce Team and 1 Engineer.
Role |
Re-design the product display page and its shopping interface.
Company |
DECKED
Problem |
Based on user data, the experience did not showcase the products well. Users were not being educated on exactly what they were getting when it came to the products, their features, the items included and fitment.
Solution |
Redesign the page for better readability, create a way for users to easily and clearly understand what they are getting. Make this design adaptable for other products and features on the site.
Tech Specs |
This Tech Specs section was redesigned to better serve the user. Reorganizing product specs and better calling out important information in a consolidated view.
Product Grid View |
This grid view allows the product images to be seen all at once and in multiple use cases. Users no longer have to click through mini thumbnail images to see the different images.
Product feature slider |
To communicate to the user the many features and benefits of the product we created a feature carousel that have images to visually represent each callout.
Design Features
Design Process
Research |
With the goal of creating a more intuitive buying experience for the user and communicating the use of the product visually, I sought out other brands that did this successfully.
Here are some of the brands that i discovered who used product grid layouts and industry standard UI elements. I referenced these when creating the PDP templates to make things adaptable for each product.
Sitemap |
The PDP pages for the DECKED website serve as a place to buy product but also learn about the product, its uses and features.
This site map shows the entry points to the product pages.
Wireframes |
The wire framing process was a multiple step process to rollout new designs onto the site. We focused on the right rail initially then moved into the feature sections. In the initial view below you can see the previous layout where i started with consolidating the use of gray colors.
