Layouts & Components
Initial Research & Design: Product Pages
The Product page had recently been redesigned. It was now time to go back to the Product listing page also known as the Search results page. My initial task was to identify how customers interact with different product listing layouts. I completed several tests to see how customers perceive grid layouts versus list layouts. We also tested star ratings and pagination.
After three tests it was confirmed that users preferred the grid layout over the list. The grid was a clear winner each time. The main call out was that the users felt they had access to more products on their screen. The grid layout meant that they could potential find their item faster due to having more options within view.
How do rates affect customer behavior?
-
Test 1: Display or Hide Ratings
Quick assumption: ratings matter. We see reviews and ratings in all forms of commerce, but it’s always important to understand why. When testing no ratings versus displayed ratings, 85% of our testers mentioned that reviews play a significant role in their buying decision.
-
Test 2: Multiple Star Icons or a Single Star
The test results informed us that 75% of our testers placed more attention on the number ratings over the number of star icons. This led us to display a single star icon with a focus on the number rating.
Testing Pagination
I tested three types of pagination. These tests included the classic pagination, expanded view (similar to infinite scrolling) and a pagination/drop down hybrid. The goal was to find a single solution for desktop and mobile. The test results proved that classic pagination was easier to use and provided faster navigation between pages. The classic paginations approval rate was 80% for desktop and 45% for mobile users.
Wireframing Options
There were several wireframes for the Product listing page. The grid layout performed better on the tests, but certain stakeholders were not convinced since it would be a shift from the current design. We were also trying to condense the product cards in order to display as many as possible above the fold. In the end, the list layout was selected. The availability notifications (Pick up/Home Delivery) were removed due to technical complications which allowed the Product cards in the list view to maximize the space.
Current Day
The Product listing page is live and has gone through a few revisions since phase 1. I was involved primarily in the initial research and concept phase. Certain elements like the star ratings and pagination are consistent with my research. During the process, I learned that development complications can push you to rethink your strategies and recreate new solutions. An effective solution is one that aligns to your teams capabilities and strengths.
Example: Academy Product Listing Page
