top of page
FEATURE NAME
Configurable Furniture Product Page
✅ Journey Mapping
✅ User Flows
✅ Competitive Analysis
✅ Prototyping
📈 Reduced redundancy by 21%
Company: Z Gallerie
Role: Senior UX Designer
THE PROBLEM
Z Gallerie has customizable furniture pieces, meaning you can select orientation, fabric type and colour, leg style, etc, but each variation had it’s own product page, making it challenging and frustrating to compare options (you would end up with many tabs open with different configurations only to have to switch between them to see difference in image and price).
MY ROLE
As the Senior UX Designer, it was my responsibility to research solutions through competitive analysis, work closely with stakeholders who were most familiar with the physical products, gather requirements and communicate functionality with Engineering to determine feasibility.
MY IMPACT
The new Product Page reduced variant nested pages by 21%, meaning merchandising teams were more effectively able to manage Out of Stocks, Backorders, Sale variants and product information on one parent page rather than 10+ variant pages.
MY PROCESS
COMPETITIVE ANALYSIS
VALIDATING THE UI
WEST ELM
CB2
ANTHROPOLOGIE
SUMMARY OF SOLUTION
The most common format for products with this complexity was having each configurable section in it’s own accordion.
This also benefits mobile since the components won’t need to be resized, they will just stack vertically.
BENEFIT TO CUSTOMERS
✅ They are able to easily see a summary of the elements they are able to customize
✅ The product price is triggered to reflect their selection, which manages expectations
✅ They can play with configurations to modify price-point and see examples
BENEFIT TO STAKEHOLDERS
✅ Ability to test having some accordions opened and others closed based on data
✅ This page acts as one source of truth for the product, no longer having multiple product pages for each variation
REQUIREMENTS GATHERING
STAKEHOLDER REQUESTS
WHAT
Keep the CTA above the fold
Act as template for cross category product pages (not just custom furniture but also lighting, decor, bedding, etc)
Be a component that could be used interchangeably through the site to maximize ROI
Have sections with unique IDs for easy testing and data gathering
Clearly define selections and SKU in the cost breakdown for easy customer service support
WHO
CEO
Merchandising Dept.
Engineering Dept.
Data Analytics Dept.
Customer Experience Team
DESIGN SYSTEM UI
COMPONENT UI
DESIGN SYSTEM STRATEGY
Going into this project, we knew that a Design System would be necessary in order to build customizable components for the merchandising team to use across all categories. So taking into account different components for swatches (image only swatch, image and title selection, title only selection, etc) with various labels for product information.
See Full Design System
RESULTS
CONCLUSION & LIFT
The original product page added a lot of friction to not only the customer experience but also made the job of our internal teams harder to do.
Taking on this project solved a series of problems:
1. Consolidating configurations to one page meant the user didn’t have to navigate multiple tabs to determine the selections they wanted, converting 50% faster than it was prior.
2. The Merchandising team no longer needed a parent page with multiple nested pages to account for product variants, allowing them to create 5x more new product pages in the time it used to take to create 1
3. The Engineering team was able to allocate their time to bigger lift tasks since the customizable components were more user friendly and self-serve for the Merchandising team who needed less support in page building
bottom of page