INTERIOR DEFINE
Category Pages
A redesigned template that makes it easy for customers to filter and explore products across many categories. View the live design here.
Project Overview
ABOUT INTERIOR DEFINE
Interior Define is a made-to-order furniture company that specializes in creating sofas that meet customers’ needs. Customization options include collections, configurations, fabrics, legs, sizes, and more.
MY ROLE
As the only product designer on this project, I led user testing, competitive analysis, and research into our new site platform’s capabilities. I worked very closely with our VP of Product and engineers from a consulting firm that was working on a re-platform of the site.
THE PROBLEM
The category pages were not optimized for the easiest shopping experience, and many customers were having a hard time finding what they were looking for. Additionally, a complete re-platform of the site was in the works, so the new design had to fit the framework and only require a minimal amount of customization to save resources.
Opportunities
ONE
While the large image banner at the top of the page was visually pleasing, it took up a significant amount of space, pushing any actual shopping tiles below the fold.
Some users commented that they didn’t realize they were on a shoppable page for a while.
TWO
The icons on the filters helped users who were unfamiliar with furniture terms to identify the configuration.
However, the horizontal scrolling made it difficult to explore all of the options, the filters did not follow as the user scrolled for easy updates, and many useful filters - like size, features, or materials - were not available.
THREE
Along with the large top banner, the collection banner also took up a significant amount of space that slowed users from getting to the shopping tiles.
There also was a lost opportunity to link to each collection's page, where users could find out more detailed information about the collections.
FOUR
The number of products shown for each collection made for a very long page since there around about 20+ collections in total. This made it very difficult for users to not only see every collection but also compare and contrast.
Final Design
-
Filters were expanded and moved to the left column. This allows the shopping tiles to be at the top of the page while also making the filters accessible as the page scrolls.
-
Since the configuration icons were found to be helpful to understand each type, they were kept and refined.
-
The ability to sort by price or collection was added.
-
Collection headers were made smaller, but more useful with real-life imagery and links to each collection page.
-
I created a collection page using CMS and linked to it at the top of the page to help new customers compare collections before jumping into shopping.
Want to try out the new design for yourself?
