PDP Redesign
Simplifying information and optimizing hierarchy
Project Overview:
This business needed to redesign their custom filters page to reflect a more standardized product display layout. The primary goal of this effort was to narrow down the hierarchy of the page to make the custom filter process more streamlined. While the client initially wanted a minimal design effort, they came back to us for a full redesign phase based on the findings in our evaluation of the site, and from the data provided by the research team.
My Role:
Primary UX Researcher and Designer
Scope:
6 Week Client Project
Opportunity:
The site has different filter options, including a large selection of standardized filter sizes. These make up approximately 85% of all products sold on the site, with Air Filters being the top category. What I learned from further analyzing the data, was that the custom air filter page alone made up 30% of that total. Before making any recommendations, I did a more detailed study of the custom filter page and found it had a high bounce rate, low add to cart rate, and bad usability scores. I brought these findings to the clients attention, and set a task to improve the effectiveness of the custom filters page.
Since this was a new client, I wanted to examine the site as a whole before diving into more specific research for this test. For this, cretaed both a Journey map for a user, as well as a user flow map through the site. From this I gained a better understanding of how this test could positively impact not just the page, but the entire funnel as a whole.
Process:
I began by breaking the data into two categories, those for returning users, and those for new users. My primary goal here was to determine not only the type of user to view the page, but how they arrived on the page. What I discovered was that the vast majority of users landing on the page were new, and the majority of them landed on the page directly from a search result. With this data, I knew that the page would need to provide users with more information than just the filter options, and thus realized keeping the tooltips was necessary.
I then performed a competitor analysis study, which led me to the conclusion that most sites kept their custom filter pages the same as their standard PDP pages. What I noticed though, was that other sites kept very little information on the page, removing value props and reviews etc. Since I had already discovered a large portion of users land directly on the page, they wouldn’t be aware of perks like free shipping.
Competitor Analysis
Solution:
Having acquired the data I needed I moved forward with creating a wireframe mockup to present to the client. I wanted to emphasize that this new design would reflect a more standardized ecommerce PDP layout, similar to existing layouts on their site, while still retaining the information from the current page. I also wanted to highlight that we would include additional elements like reviews and value props to provide users who land on the page additional information about the site.
Final Design:
After 2 weeks of gathering research, completing the design process, and meeting with the client, the final design came to fruition. The page reflects a typical ecommerce PDP page, with a product image, a buy box, and reviews. I also modeled it after the existing PDP pages on the site so existing users would have an easier time navigating it. The client had expressed some initial concerns that the add to cart button was below the fold, so I worked extensively with the dev team to introduce a functionality that collapses sections once they are selected.
Mobile Functionality
Results:
The redesign of the PDP page increased the Add to Cart rate by 9% and we saw the Bounce Rate drop by 19%. More users were staying on the page, and proceeding through the funnel to the cart. After it was implemented, I gathered more data and found that users were having on average a 20% easier time navigating the page while taking 18% less time to checkout. The results of this test led to the partner signing on for 3 more large scale testing efforts.
