INTRO

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

Duration
November 2018 - Present

 

the Problem

Understanding Why We Need 3D

2Droomplanner.png

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?

 

Value Proposition

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.

Goals

  1. Create a tool to remove the guesswork around style and size.

  2. Augment Wayfair’s tech stack with 3D capabilities and models

  3. Launch a 3D Room Planner tool by the end of Q1 to help us learn and refine

 
 

Scoping and Timelines

Creating a Road Map to Align Teams

RP MVP Roadmap.jpg

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.

 

INFORMATION ARCHITECTURE

Defining the Actions & 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:

  1. Understand what actions they can take

  2. What will happen when an action is performed

  3. 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.

All Actions.png
Grouped Actions.png
 

INFORMATION ARCHITECTURE

The Layout of Web Tools

To understand how to best layout all the actions and groupings of actions. We studied other tools across the internet that were used by our customers. We were looking at how were actions grouped together, where on the screen at they placed, how do they set expectations of how they work, and how do they interact with each other.

We found that a lot of web tool relied on a very consistent pattern of:

  1. “Actions Drawer” on the left: this supports browsing, understanding the capabilities of the tool, and picking a task of actions

  2. Output Area: this is the primary interaction area where depending on what is picked on the left this area responds to it, the user can manipulate and spends the majority of time in this area.

  3. System level Actions: these includes account, views, saving, and zooming. Depending on the tool this is where the user can do system level actions that are associated with their account and output area views.

IA 2.png

The same patterns became visible in numerous e-commerce websites. These websites employ a left hand filtering panel that then displays output on the right hand side.

IA 3.png

Taking this information, we applied it to our layout of Room Planner.

IA 1.png
finalRP.jpg
 

Camera Movements & Mouse Interactions

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.

With a click and drag, the room is moving vs. the camera.

With a click and drag, the room is moving vs. the camera.

When scrolling the camera is zooming into the room, BUT the camera is not moving from its point.

When scrolling the camera is zooming into the room, BUT the camera is not moving from its point.

 

Contextual Product Toolbar

The item toolbar reveals actions that are specific to product selected. We wanted to keep in contextual to the product, first not to have irrelevant actions on the screen at all times, and also to disclose actions when they were nessecary. This improves the users ability to understand what actions are associated with certain triggers.

Additionally, when thinking about panning of products, we decided to remove the toolbar to remove the noise on the page. Also giving the user more control of where they are placing the product.

move chair.gif
contextual toolbar design.png
 

Helping Users Find a Style

One thing that came up frequently during usability testing: some users felt a blank room was overwhelming, and didn't know how to get started. So we integrated templates on the homepage, so if users were uncertain about the tool or even how to plan a room, they had an was entry point to get started. Having these templates gives our user a base to work from, understand how to layout furniture, and discover a style for their home!

templates.png
 
1ab350ec.png

🎉 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

 

Measurement MOde

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.

Having a measurement mode for the user to toggle on.

Having a measurement mode for the user to toggle on.

In this mode, the user can view room dimensions, product dimensions, and also have a grid to support layout planning.

In this mode, the user can view room dimensions, product dimensions, and also have a grid to support layout planning.

 

💡REVA’S LEARNINGS

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!

room_design.png
Screen Shot 2019-04-23 at 9.46.26 PM.png