Crate and Barrel Sectional Planner

About
Led the UX design of an easy to use, interactive web experience to help customers and store associates visualize the process of choosing a sectional sofa. I worked closely with a visual designer, software development teams, product management, and QA.
Results
Launched the experience in October 2017. Results have been phenomenal when customers use our new sectional sofa experience:
+ 4 Mill  increase in sales
+ 201%  increase in revenue per visit (RPV)
+ 150%  increase in conversion rate (CVR)
+   21%  increase in average order value (AOV)
Our Design
Introducing the Sectional Planner
Build the perfect sectional sofa with our new tool
Start with a collection
Choose from over 30 Crate and Barrel Sectional Sofa collections
Build your own
Add and remove pieces from our sets to create the perfect combination
See how it looks
Change your fabric and visualize the sofa in 3D
Design Process
Problem Space
In 2017, Crate and Barrel's eCommerce team roadmap focused on assisting customers through visualization. Thus, product management analyzed which product categories would have the most room for growth within the furniture department.

Sectional sofas were identified as the most likely product category to benefit from adding visualization to the shopping experience. Knowing this, I started conducting research to better understand exactly how we can bring value to customers who are shopping for them.
Petrie Midcentury Sectional Sofa - Crate and Barrel
Conducting Research
To better understand the needs and pain points of our customers, I conducted an initial survey to understand how they shopped for sectionals. Next, we conducted interviews and observed them shopping for sectional sofas. In addition to speaking with customers, we spoke with store associates to understand their perspective on how they sell sectional sofas in store.

Lastly, I conducted a competitive analysis to explore how competitors are selling sectional sofas and examined how configurators were being used cross-industry.
Ikea's Sectional Sofa Visualization Tool
Using Research to Inform Design
From our research, we uncovered some important findings:
  • Customers had difficulty understanding how much space a sectional sofa would take up in their room
  • Customers often lacked knowledge of what type of sectional sofa pieces worked well with each other
  • Customers often returned sectional sofas because they accidentally bought pieces that didn't logically fit together (for example: buying two right arm styled pieces)
  • Customers struggled with visualizing how their sectional sofa would look if they made a sofa that was larger than what was show online or in-store.
  • Customers wanted to see how sectional sofas actually looked in contextual imagery
Knowing this, we generated 5 key design concepts we wanted to explore:
  • Viewing realistic 3D renderings to help portray actual sectional sofa to scale
  • Offering a play space to add and remove pieces to see how big or small you can make your sofa
  • Helping them find the right pieces through recommendations and visualizing mix / match combinations
  • Engaging in a full-fledged experience that helps you from start to finish
  • Being able to view different angles of their sectional sofa
Sketching the experience for playing with the 3D rendered model
Sketching the experience for adding and removing pieces
Turning Sketches into Wireframes and Mockups
After sketching through various concepts, we started to finalize key design elements. One key decisions we made was to separate the visualization experience into two unique sections: building and visualizing. The purpose of this is to enable customers to focus on one thing at a time. Here's an explanation for both of them:
  • In build mode, we wanted to give customers the flexibility to add and remove any piece they liked, as long as they were actual logical matches. For example we created business rules such as, two right arm chairs couldn't be placed next to each other.
  • In visualize mode, we wanted to allow customers to see whatever they build come to life as a 3D rendered sofa. In addition, we wanted to allow customers to change the fabric and potentially see the sofa in a rendered room setting to help them see contextual imagery.
Wireframe of the Build Mode
Wireframe of the Visualize Mode
In addition to coming up with the visualization part of the experience, we had to consider how a customer might get to it. The tool will only be successful if we drive a high volume of appropriate traffic to it.

By examining the current flow for how a customer shops for a sectional sofa and speaking with customers, we decided the likely points of entry should be: the Sectional Sofa spill page, Sectional Sofa Collections page, and Sectional Sofa product pages.
Wireframe of the Sectional Sofas Spill Page, showing a Banner ad and the "Configure Your Own" button
Obtaining Real Customer Feedback
Now it was time to show our designs to our end users, so we turned our wireframes into higher fidelity mockups. For testing, we made sure to speak with customers and store associates. Each of these users had different reasons for interacting with it.

Our customer's primary goal was to use it as a research and visualization tool, whereas store associates would be using this to supplement their current sales process.
Mockup of the Build Mode
Mockup of the Visualize Mode
Test Findings
From our test sessions with customers, we found these key findings:
  • The design pattern for dragging and selecting pieces was confusing for many customers.
  • Customers weren’t entirely sure as to how to swap pieces.
  • The 3D model, changing fabrics, and room setting functionality were easily understood
  • Customers liked how they could only create actual Sectionals Sets (based on valid business rules)
From our test sessions with store associates, we found these key findings:
  • Our current designed experience matched the sales process of a typical furniture associate
  • Furniture Associates were excited and saw the value in using a tool such as this
  • By using this tool, they were able to eliminate the tedious process of cutting out pieces from a blueprint
  • The ability to view dimensions for the configured piece was extremely helpful.
Based on our research findings, we were able to identify that what we were doing matched the store associates process. Better yet, our tool's new features provided great value to them. For customers, there was still more work to do to improve the experience.
This is an example of the Lounge II Sectional Sofa Blueprint, something we wanted to digitally replace for store associates
Iteration and Test #2
For this next test, we focused on improving how a customer learns how to use it. We wanted to design something that was intuitive and offered affordance in terms of what to drag and where. Thus, we iterated by adding some helpful components to the design such as icons and hover states for swapping, removing pieces, and error states.

We ended up testing two different designs with customers to see how adding some of these components effected the experience. The primary differences in prototypes were:
  • Version 1 - included the trash can, didn’t allow swap, showed error icons
  • Version 2 - didn’t include the trash can, allowed swap, didn’t show error icons
Example of the test version 1, which included the trash can
Test Findings
When first shown the tool, users understood how the configurator allowed them to create their own sectional sofa by adding and removing pieces to/from the canvas.

The majority of users prefered Version 1 (including a trash can and error states) because in comparison to Version 2, it felt more smooth and the visual feedback was clearer. Users knew how to add pieces with ease, but were somewhat confused with removing pieces and swapping pieces.

Overall, users were able to discover and learn how to use the prototype after playing around with it for a little bit, regardless of which version was shown.
Iteration and Final Prep for Launch
Based on the user feedback, we decided to remove swapping. In addition, we made it so removing pieces could only be completed by dragging them into the trash can area. The trash can was also moved, since customers expected to it to be in the place of where they initially dragged from.

Now that the configurator experience was nearly done, we shifted our efforts to iterating on how customers found the tool. We explored various solutions and decided that a video demonstrating the potential of making your own sectional sofa would work well. After that, development started working, we helped with QA, and it eventually launched!
Example of a banner ad appearing on the mobile version of the Sectional Sofas Spill Page
Final Thoughts
This was one of my first major projects with Crate and Barrel. I spent several months in 2017 and lead the UX design for it. We launched this new tool in October 2017 and it's been performing fantastic over the past several months.

It was great to see all of our hard work and effort come to fruition. I had to learn how to work with extremely close with a visual designer, be responsible for the UX, make important decisions, and collaborate with software developers. I couldn't have asked for a more challenging project and I was so happy to be part of it!
Yes, you can buy a U-shaped sectional sofa!