THE CHALLENGE
Upholstered furniture is one of West Elm’s strongest merchandise categories. The product detail page for these products was 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 in summer 2020, 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.
MY ROLE
As Principal UX Designer, I drove the end-to-end design process from strategy, concepting, and visual design to implementation and launch.
COLLABORATORS
2 Product Managers
2 UX Designers
1 Researcher
1 Scrum Master
3 Development Teams
PROJECT CONTEXT
This initiative began with little definition beyond the directive to improve the primary detail page without overhauling the overall template. On this highly trafficked page, customers had to select up to five custom attributes before adding to cart. Some pages offered over 1,600 combinations.
upholstery product page before enhancements
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 kicked off a fact-finding phase to focus our scope by identifying which problems to prioritize for our customers, 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 (n=10); extensive stakeholder interviews with business owners and retail store associates; and 12 in-depth moderated customer interviews. We also reviewed A/B test data and two existing surveys of 200 online customers.
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 solving for easy selection and swatch guidance. The other areas became follow-on roadmap initiatives.
DEFINED OBJECTIVES
Make it easier for customers to select a SKU, improving CVR, RPV & customer satisfaction
Help customers understand the huge selection of fabrics, improving CVR, RPV, free swatch orders & customer satisfaction.
IDEATION & PROTOTYPING
Having framed our objectives and success criteria, 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. Highlights summarized below.
EASY SELECTION
Pain point: Customers felt intimidated by seeing all the selection options presented upon page load.
before: desktop view
before: mobile view
Solution: With guided steps, our 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
Pain point: 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
SWATCH GUIDANCE
Pain point: 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: New designs offer customers the option to group swatches by type of fabric, as well as shipping speed.
new designs: display swatches by fabric type or shipping speed (mobile OPTiMIZED view)
NEW DESIGNs: DISPLAY SWATCHES BY FABRIC TYPE (DESKTOP VIEW)
Solution 2: Visual filter affordances give customers the ability to narrow their fabric selection set by key attributes.
NEW DESIGN: filter modal helps customers narrow fabric choices
NEW DESIGN: indicator lozenges let users easily cancel each filter
Solution 3: New designs add a fabric detail pop-down window with key details and a close-up fabric image.
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 in May 2020, we continued to launch features incrementally over several months to an enthusiastic reception among our brands and stakeholders.
Our success measures showed overwhelming gains, with an 6% lift in CVR (conversion), a double digit engagement lift, and a 1.2% revenue increase. Business stakeholders were eager to plan enhancements around the additional opportunity areas we identified in the process. Over the next quarter, we rolled out the upgrades to the websites for five additional Williams-Sonoma Inc. brands including Pottery Barn, Pottery Barn Kids, Marks & Graham, Rejuvenation, and Willams-Sonoma.
CLICK IMAGE BELOW TO PLAY VIDEO:
Screen capture video of the new page design.