Summary
CITY Furniture, a South Florida-based furniture retailer is rapidly growing its e-commerce site. As part of an optimization project, our design team was tasked with improving various touchpoints on the site. This case study will cover our work on the Product Listing Page (PLP) to enhance user experience, move customers down the funnel, and drive conversions.
Through a series of thoughtful changes—including updating the PLP menu, reworking product cards, and improving filter usability—we achieved a 3.5% increase in conversion rates, a 3.2% reduction in bounce rates, and a 6.4% increase in average time spent on the page.
01 Understanding the problem
Initial Research
To pinpoint issues with City Furniture’s PLP, we initially conducted a heuristic evaluation. We broke down the experience by looking at error prevention, consistency and standards, user control, and overall efficiency of use. What we found told a clear story: based on our scores the PLP was overwhelming and hard to use. We predicted that users were frustrated, and it reflected that in our analytics reports. Higher than average bounce rates, low engagement with filters, and plenty of abandoned sessions. Below are some examples:
Cluttered Navigation
Top-heavy menu structure consumed valuable screen real estate
Inefficient product display
The grid layout made products feel cramped, reduced image sizes, and had redundant listings
Complex filtering
Filters included rarely used options and lacked intuitive organization
In short, the PLP wasn’t just hard to navigate—it was getting in the way of users finding what they needed. Below is an example of the before (desktop).
Screenshot of the PLP before.
Mapping potential solutions
With a rough understanding of these pain points, we got to work putting together a series of hypotheses and plans to execute improvements. We started by brainstorming ways to simplify the PLP:
1. Moving the menu
Moving the sticky menu to a left-hand rail instead of the top for desktop. This mirrors standard placement that feels familiar to users.
2. Rework product cards
Furniture is a big investment, so users want to see it clearly. Reducing items per row and using color swatches to reduce items per page.
3. Reimagining filters
The current filters have vague labels that confuse users and odd active states. We planned to streamline the options to make the filtering experience clear and helpful.
Based on the data we collected, we identified these three areas as the most promising for improving the PLP. This gave us a clearer direction on where to focus our efforts and dig deeper with further research.
02 Research
Quantitive insights
We analyzed 500+ user sessions with heatmaps and recordings to see how people interacted with the PLP. The data showed clear trends: users scrolled quickly past similar products, hesitated with filters, and often left after applying too many. They also seemed confused by the top navigation, bouncing between categories before choosing one.
Collaborating with UX research
Our UX team added qualitative insights by interviewing 5 CITY Furniture customers from different backgrounds. Key pain points emerged:
Overwhelming navigation with too many options
Frustration over what looked like duplicate products (often just color variants)
Difficulty finding items with filters
One participant put it perfectly: 'I feel like I'm seeing the same sofa twenty times just because it comes in different colors.'
Competitive analysis
Our competitive review of five top furniture retailers revealed key PLP insights: The strongest performers displayed just 2-3 products per row on desktop and used dynamic filters that adjusted to different categories with relevant options. These findings validated our redesign strategy—addressing user frustrations while incorporating proven industry approaches.
03 Design Process
Workshopping and stakeholder alignment
Through collaborative workshops with designers, PMs, and developers, we organized research findings into an affinity diagram. This helped us identify and prioritize four key design initiatives.
Navigation restructuring
Product grid optimization
Color variant consolidation
Filter system refinement
Early sketches led us to a left-side menu. After testing lo-fi mockups and paper prototypes, we finalized an expandable, intuitive layout aligned with user expectations.
Product grid optimization
For desktop, we reduced items per row from 4 to 3—giving furniture imagery more space. Mobile kept its 2-item row. Stakeholders agreed this balanced discoverability and visual appeal.
Color variant consolidation
Devs estimated the effort to group color variants under single products (with swatches). Though technically challenging, strong research backing made it a clear win for user experience. PDP updates were factored into the plan.
Wireframes
With every stakeholder on board we jumped into mocking up the designs. Since we were working with our already established design system we opted to go straight into hi-fi designs with the components we had in hand. We only had to add a couple of new components like color swatch options, and filter pills.
Designs at different viewports
Misc annotations
New components
Product card updates
As we were getting into the thick of the design we focused on creating some additions other than just swatch options. CITY Furniture wanted to highlight specific attributes or a products popularity. To showcase these features we opted to use badges and product callouts.
Badges would be visually prominent by utilizing colored text and sit underneath product images. Below is a guide we created for how badges would be utilized.
Mobile challenges
When it came to tackling filters for mobile we ran across an interesting challenge. The previous view of filter functionality was all done on the PLP. This was problematic as there was already so much information present and adding on filter complexity in close proximity made it a very confusing experience.
Also when selecting a series of filters we needed a way to visualize the already selected filters that customers made as they were exploring other filters. For example if I am a customer wanting to see only brown leather sofas I want to make sure that all three of these options are actively selected before confirming all filters and updating the PLP. This would make sure I don't forget the combination of filters I need.
After some design exploration we put together a filter overlay that housed all functionality relating to filters and settled with a preview at the bottom of the filter preview that shows the selected filters as you're browsing filters (filter-ception).
Working in tandem with devs
As we were designing we worked closely with the dev team so that they were aware of the final direction everything was taking, and to help us point out any issues that maybe were unforeseen before. Having relevant teams be a part of the process from the start and throughout really helps avoid any surprises and personally I think is one of the most efficient ways of building digital products.
Multiple pulse checks a week were common before and after formal design reviews.
04 Final Designs
PLP rows
A clean, spacious layout with 3 items per row (down from 4), giving each product room to shine without overwhelming users. (Desktop only)
Left-hand nav (desktop)
A sticky left-hand filter rail that’s easy to access but stays out of the way, replacing the clunky top-menu approach.
Product Cards
Larger product cards (1:1 ratio) with better imagery and prioritized details (like badgiong and swatch options), making it easier for customers to feel invited to evaluate pieces at a glance.
Filtering experience
Intuitive filtering with clearer labels and visual feedback, so users know exactly what they’ve selected. The pills highlight selections made with the option to eliminate them one at a time or all at once. This approach is especially helpful since the amount of drop-downs can stack below some users desktop view heights.
Filtering experience (mobile)
The same idea was carried over for mobile as well. The pill selections are visible on the PLP and the filter view (as mentioned earlier).
05 Reflections and continued iteration
The overall agile environment the team worked with in this project really gave us a faster, more flexible workflow–and a final product that truly reflected the team's and business' shared vision. This worked great because:
No surprises: Constant collaboration meant fewer last-minute fire drills.
Faster iterations: Small, frequent handoffs kept momentum high.
Shared ownership: Devs contributed to the design’s success, and designers understood technical trade-offs.
This wasn’t just a redesign; it was a testament to how good cross-functional teamwork can make great digital experiences feel effortless.
As the PLP was being updated we immediately saw the difference in customer behavior while shopping. As well as feedback we could use for further updates. This has been an ongoing project at CITY Furniture that our design team is still tackling. Since the initial design changes the team has continued to evolve the PLP. Check out the latest version on our live site here.