I was tasked to design carousels for the Sheets product listing page (PLP) to guide users in their shopping journey. The site experience team would A/B test the different carousels on the live site to gather insights on how customers shop. The learnings from the test would inform the new filters that would be used on a future site re-design and migration that would launch on September 2023.
Role
UI Design
Project Type
Responsive Web Design, UI Design
Team
1 Site Experience Sr. Analyst
1 Developer
Photography: Michael Rogers
The Problem
Users didn't have an easy way to filter products on the Sheets Product Listing Page (PLP). The old Sheets PLP had one carousel at the top that housed filter from different sub-categories. The imagery was inconsistent and there was little to no education on different types of sheets fabrications (Percale, Sateen, etc.), which is something that a lot of first-time bedding customers are not typically knowledgeable on.
The Goal
To make it easier for users to shop, I would design visual carousels that would live at the top of the Sheets PLP to help users narrow-down the sub-categories in a quick and easy way. The carousels could help guide users in their shopping journey to easily find and shop products based on their specific wants and needs.
Research & Analysis
Unfortunately, the site experience team did not have the budget to conduct proper user interviews, so instead they conducted a competitive audit of what information other brands had on their Sheets PLP's. It was common for brands to break out the different sheet fabrications (Percale, Sateen, etc.) at the top of their Sheets PLP's. Through heat maps and click-through-rate data, they also found that it was common for users to shop by bed size (Twin, Queen King, etc.) and sheet type (sheet sets, flat sheets, pillowcases, etc.).
User Pain Points to Solve:
1. Allow users to quickly and easily filter products to sub-categories based on shopping needs.
2. Educate new customers on all the sheets fabrications the company offers.
Wireframes
In the beginning I experimented with different layouts and typography. The design had to fit in the current site's environment and work around limitations in max-width, and pick up existing global styles. At first I thought it would be okay to design each carousel differently, but after a few rounds, it became clear that the page would look cleaner if all the carousel designs were consistent. While designing, I also wanted to avoid making the carousel section too long because I didn't want to push the actual product grid too far down the page.
The Grid
For the grid design, I opted for a five column grid with 25 px gutters that could be used on all the different carousel modules. I felt that using a 12-column grid made the carousel images too small or too big--pushing the product grid too far down the page, which we wanted to avoid.
The five column grid worked well because there were exactly fives items for the Shop by Type and the Shop by Size carousels.
Each module has consistent bottom and top margins to easily re-order and modify the carousels depending on which ones performed better.
Final Product
Results & Takeaways
The carousels were tested on the live site from March to July. The carousel was paused in preparation for a site migration to a new platform that went live in September 2023. After the site migration, we will continue to optimize and design improvements for the shopping experience.
Looking back at this project, I wish I could have suggested more layouts during the wireframe phase that weren't carousels.