Icebreaker Listing Page / Case Study
46% of icebreaker’s site visits start on the product listing page (PLP). This arguably made the page one of the most important. After many hours of research, several rounds of prototype testing, and a healthy amount of collaboration, the end result sparked excitement and huge support across the business (and from what I hear, a nice increase in page conversion, although it went live just after my departure, so I wasn’t around to see the ultimate impact).
my role: design lead / research and testing lead
Of all the projects I worked on at icebreaker, this one was probably one of my favorites. From the research and collaborative dreaming at the start of project, to the user testing and iterative refinement in the design process, to the teamwork with the developers to rein it in to something feasible, to evangelizing the coming change and being sure the right people knew what to prepare for, every aspect was thoughtfully considered and well executed.
sdsddsdsdsdsd
The Problem
Shoppers cannot find the product they are looking for and cannot easily see detail of the items.
My initial research learnings.
Filters were far too exhaustive. And exhausting.
On some categories, upwards of 20 filter groups were visible, and no more than 8 of them were ever used by most shoppers. The overabundance of choice left some too overwhelmed to select any filters at all.
The product page was too heavily relied on.
Because the product image was the most important thing for people, clicking back and forth from this page to the detail page was a repetitive and cumbersome task causing a lot of friction.
Repetitive or irrelevant information ignored.
Many users ignored certain information on the page that wasn’t relevant to this part of their journey. This meant we were using up valuable space for nothing.
What I explored and tested.
What’s the best filtering experience?
My initial concepts explored various filter layouts and interaction patterns. I tested these against each other and had users prioritize what filters were most useful to their needs.
How do we reduce the heavy reliance on the product page?
I tested several different sizes of images, and various ways to see more product images within the listing page itself with the goal to remove the need to go back and forth between pages just to view product imagery.
How do we use the space smarter that we did before?
I focused on the metadata and used testing to determine what was relevant to shoppers at this stage of the funnel. I wanted to create a system that intelligently displayed only the most useful and relevant information.
The final solution.
In the end, the primary focus of the page became the product, rather than the interface. Oolala.
What mattered most to shoppers – getting a sense of what the product looked like – drove our decisions. Now the images are much larger and can even be adjusted in size based on user preference. And rather than just a single image per product, there are multiple in an interactive carousel.
The filters were moved to the top of the page on larger devices (to free up extra horizontal space for the imagery), simplified to the ones users found most useful, and built into a smarter IA structure.
Shoppers could easily add-to-cart, compare, or save items for later directly from within the page. This made it less necessary to navigate between this page and the detail page, creating a more straightforward shopping experience.
Metadata was crafted more intelligently. For example, on desktop, rather than having products with star ratings of zero (meaning there were no reviews yet) we hid the stars and displayed a customizable tag like “New Arrival”.
The marketing content was more dynamic and designed to be easier for the business to maintain.
Scroll and hover states.
The build and execution.
We end up rebuilding the entire page from the ground up which allowed us to really dream big. But with big dreams sometimes comes big compromises to get an MVP out into the world. With some luck, we were able to get a super sexy MVP sliced up with nearly zero compromises to the intended look and feel.
Due to a high-degree of complexity, one feature that did extremely well in testing but didn’t end up making it into the build, was the ability to quickly add a product to the cart directly from within this page – a feature usually reserved for the detail page. (See this example in the bottom left of the last image above.) Despite the positive feedback in testing, we still weren’t confident people would use it enough in reality to justify a mammoth effort to implement it.
I left icebreaker right after the MVP launched, so unfortunately was not able to see the ultimate business impact the changes made.