West Elm is a $2 billion-dollar home furnishings company. The brand’s responsive website offers a vast assortment of consumer merchandise from furniture to lighting and decor.
THE CHALLENGE
Upholstered furniture is one of West Elm’s strongest merchandise categories. The product detail page for these products were packed with content and interactions that had been added over time without considering the overall customer experience. In anticipation of a major upholstery marketing campaign, the brand committed to investing in an extensive enhancement of this complex page. I led the design effort to redesign this experience in less than two months.
PUBLIC LAUNCH 2021
MY ROLES
Principle UX Designer
Design Strategist
Visual Designer
ADDITIONAL TEAM MEMBERS
2 Product Managers
2 UX Designers
1 Researcher
1 Scrum Master
3 Development Teams
BEFORE ADDING TO CART, CUSTOMERS HAVE TO SELECT UP TO 5 CUSTOM OPTIONS INCLUDING SIZE, COLOR, FABRIC & FINISH. SOME UPHOLSTERY PAGES OFFER OVER 1,600 COMBINATIONS!
upholstery product page before enhancements
PROJECT CONTEXT
This initiative began with little definition beyond the directive to improve the page without overhauling the overall template.
To hit target dates, we had under 8 weeks to hand off designs. To complicate matters, West Elm shares a code base with 5 brands under parent company, Williams-Sonoma Inc. We would have to gain alignment from the sibling brands before development could begin.
I SET OUT TO FOCUS OUR SCOPE BY DEFINING WHICH PROBLEMS TO SOLVE FOR OUR CUSTOMER, AND HOW TO MEASURE SUCCESS.
DISCOVERY
To begin, our team held business stakeholder interviews, and ran an unmoderated study for feedback on the existing design. We audited comparable e-comm experiences, and referenced data from a past A/B test we had designed. We also unearthed past research—interviews with in-store sales staff, and a survey of 200 recent sofa customers. To prep for later in our process, our researcher began to recruit recent West Elm furniture customers for a moderated study around our future designs.
OUR RESEARCH INCLUDED AN AUTOMATED USER STUDY; STAKEHOLDER INTERVIEWS; AND IN-DEPTH CUSTOMER INTERVIEWS. WE ALSO REVIEWED A/B TEST DATA AND CUSTOMER SURVEYS.
INSIGHTS
I synthesized the research into succinct problem statements to focus the team around what our customers need most, and to organize potential scope into manageable buckets.
These 4 customer pain points translated into opportunity areas that became a framework for brainstorming, and a tool for gaining stakeholder buy-in. After weighing impact vs level of effort, our team narrowed our scope to EASY SELECTION and SWATCH GUIDANCE. The other areas became future roadmap initiatives.
IDEATION & PROTOTYPING
EASY SELECTION: Make it easier for customers to select a SKU, improving CVR, RPV & customer satisfaction
SWATCH GUIDANCE: Help customers understand the huge selection of fabrics, improving CVR, RPV, free swatch orders & customer satisfaction.
Having framed our design problems, the UX team worked through several rounds of solutions and iterations, incorporating feedback from user studies as well as the product & engineering teams. We were able to quickly get executive sign-off on an extensive list of enhancements, and I’ll highlight some of them below.
OPPORTUNITY AREA: EASY SELECTION
PAINPOINT: Customers felt intimidated by seeing all the selection options presented upon page load.
before: desktop view
before: mobile view
SOLUTION: GUIDED STEPS
New designs simplify the default view, and guide customers through each step. As a user completes each step, the next step opens.
new designs at desktop width
new design at mobile width
details view of easy selection enhancement
OPPORTUNITY AREA: EASY SELECTION
PAINPOINT: Text-heavy dropdown menus, with little variation in typography, made it difficult for users to make sense of important information.
before: selection accordions open
before: selection summary, accordions collapsed
SOLUTION: New designs add visual cues, color contrast, and differentiation in type styles to support quick scanning.
new designs
OPPORTUNITY AREA: SWATCH GUIDANCE
PAINPOINT: The assortment of over 200 fabrics was unwieldy for customers to navigate, and difficult to comprehend. With swatches grouped by shipping times into only 2-3 buckets, a user had to scroll through many screen-lengths of a monolithic grid.
SOLUTION 1: VIEW BY FABRIC
New designs offer customers the option to group swatches by type of fabric.
new designs: display swatches by fabric type (mobile OPTMIZED view)
NEW DESIGNs: DISPLAY SWATCHES BY FABRIC TYPE (DESKTOP VIEW)
SOLUTION 2: FILTERS
New designs give customers the ability to filter fabrics by key attributes.
NEW DESIGN: filter modal helps customers narrow fabric choices
NEW DESIGN: indicator lozenges let users easily cancel each filter
SOLUTION 3: SWATCH DETAIL VIEW
New designs add a fabric detail pop-down window with a close-up fabric image, and key details.
NEW DESIGN: SWATCH DETAIL POP-DOWN (DESKTOP VIEW)
NEW DESIGN: SWATCH DETAIL POP-DOWN (MOBILE VIEW)
IMPLEMENTATION & LAUNCH
After a fast & furious process of research, design iteration, and presentations, our team handed off hi-fidelity visual designs, spec sheets, and interactive InVision prototypes for development. My team worked daily with the engineers to fine-tune and troubleshoot, joining reviews, demos, and test-a-thons. After an initial big release, we continued to launch features incrementally over several months to an enthusiastic reception among our brands and stakeholders.
OUR SUCCESS MEASURES SHOWED OVERWHELMING GAINS. THE BUSINESS STAKEHOLDERS WERE EAGER FOR MORE ENHANCEMENTS AROUND OTHER OPPORTUNITY AREAS WE IDENTIFIED IN THE PROCESS.
Screen capture video of the new page design.