At Wayfair I’m part of a team building tools and exploring solutions to compliment our user’s furniture shopping & decision making experience. One of the projects I’m most excited share is the Room Planner tool.
We designed this tool to help our users build confidence in their purchase from Wayfair, so they knew that the products they ordered would fit in their home and match their style.
Tools and Methods
Information Architecture, Design Strategy, Planning and Scoping, 3D Design, User Testing, Interaction Design
November 2018 - Present
Understanding Why We Need 3D
Previously, Wayfair launched a 2D room planning experience that allowed users to pick a background, browse for furniture, arrange images on the background, and purchase products. But through user feedback, we uncovered some shortcomings that still kept our users from successfully completing a purchase.
Users couldn’t tell from a 2D interface how much physical space furniture would take up in their home and if pieces of furniture look good together?
Visioning for a 3D Room Planning Tool
Taking what we learned from the shortcomings of a 2D room planning tool, we helped it feed the vision of a 3D tool. It was going to help our customers remove the guesswork around style and size of furniture, by providing a 3D immersive planning tool. Each of these goals helped inform what features we wanted to build and the positioning of the tool within the user’s Wayfair shopping journey.
The challenges are obstacles we uncovered during the process of designing and building the product. The ones I’ve listed are the ones I found worthwhile to divulge because they uniquely offered me the chance to learn something new and grow my skills.
Create a tool to remove the guesswork around style and size.
Augment Wayfair’s tech stack with 3D capabilities and models
Launch a 3D Room Planner tool by the end of Q1
Scoping and Timelines
Creating a Road Map to Align Teams
Given the magnitude and manpower required to design, develop, and test a product with new technology and unique interactions, I worked closely with my product partners, dev leads, and various other stakeholders to build a timeline that would set us up for a phased MVP launch. At each phase the team would design and develop key features and run user tests to improve and refine interactions and functionality.
This structure allowed our team to work efficiently and learn continuously to bring us closer to a products that augments the Wayfair shopping experience.
Defining the Layout & Architecture
Room Planner is a tool, and a tool is something that “requires input from users; generate output to help them accomplish a goal; and assist them with decision-making, but aren’t essential to the purchase process.” (Natalie Rohrer, Content Strategist)
To ensure that Room Planner is helping our user it was important that the architecture helps users:
Understand what actions they can take
What will happen when an action is performed
How the actions relate to each other
So it was crucial that we accurately displayed, grouped, and messaged actions through out the tool. From visioning we had generated a key set of tasks the user could complete using the tool. We had then jumped into figuring how to group and display the actions, laying the foundational architecture of the tool.
Challenges of 3d
Interactions and Camera Movements
Most of the challenges around designing in a 3D are centered around the depth of view and the movement of the camera vs room. One of the benefits of three dimensional tools is the fact that everything is shown to scale and that things scales and move according to natural laws of physics. The problem is that most users don’t seem to understand all those considerations when interacting with the tool. We had to be mindful of how we helped our users understand the different views and movements of the camera, scene, and objects.
Zoom of Camera Vs MoVEMENT OF Room
On specific mouse interactions the room moves vs. the camera, we had a bit of challenge trying to map each mouse interaction to an appropriate room, scene, or camera movement. Through secondary research & testing we found that the most successful interactions include room manipulation on a click and drag and camera zooming on scroll. These interactions mimics what most users are used to experiencing elsewhere on the internet.
In the future, when we include translation around the room, we want to leverage anchor points around the room to allow the user to move within the room.
DEPTH OF VIEW
A key goal of this tool is to help our users understand fit and that means the user can not manipulate the size of the furniture. One issue we ran into through user testing is, helping our user understand that all products are made to scale and changes in size are natural of the depth of view. For example, if the chair moves father away the actual size of the furniture is not changing, but in fact it is moving farther away.
Helping Users Find a Style
Following the launch, according to our timeline we wanted to start testing a collecting user feedback. The tests were a tool to help our team understand what the tool is doing right and what we could further improve. One thing that came up frequently was: for some users a blank room can be overwhelming to get started. So we partnered with brands to add templates, each brand gets a chance to have a featured pre-styled template that has a collection of furntire inside it. Having these templates gives our user a base to work from, understand how to layout furniture, and discover a style for their home!
🎉 q1 Launch
Launches Help Us Learn
By the end of this Q1 we were able to release an MVP room planner tool that allowed our customers to do a set of create rooms and shop for furniture. This set of features gives the team a good set of basic functionality to build upon, and continue to refine and improve. This launch also allowed the team to have a product we can test and learn from.
The feature set we had targeted included:
Style and purchase furniture for a living rooms
View the room is three different modes
Place, rotate, move, and delete furniture
View items in their room
View details and add items to cart
Customize the room to look like theirs
Wait, What about Fit?
As a continued effort to improve the value of the tool and support user needs, our goal for Q2 is to address the issue around fit and layout planning. We are working to implement a view in the tool that allows users to better understand how to lay furniture out in the room, the dimensions of products, the space in-between furniture and the room, and clearance in-between products and the room.
We are still in the early design phase of this project. We are working to understand what tech can support, what user problems we want to specifically address, and the use cases we need to support.
Balancing the Speed of MVP with Usefulness of Product
Agile development processes are fundamental to the way to build tech and products these days. We are all about “build fast and break things,” so we can put products into our customers hands and start learning and refining. I think there is, sometimes, a delicate balance between creating an MVP and creating a product that is actually useful. Sometimes we get too wrapped up in the timeline and delivery of the product and if what we are pushing to build is still something the user wants to use. With aggressive timelines, we don’t give ourselves the time to consider all use cases and build full arcs of experiences. Now I don't have much of a solution to propose here, but I feel like the agile methodology isn’t an excuse to put out half baked products. We need to be more intentional around the timelines we create, the products we are building, and the full experience of what our user allows into their life.
I’ll end with some of my favorite rooms!