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.

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.

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

 
 

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.

This structure allowed our team to work efficiently and learn continuously to bring us closer to a products that augments the Wayfair shopping experience.

 

INFORMATION ARCHITECTURE

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:

  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

IA Layout.png

finalRP.jpg
 

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.

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.

 

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.

move chair.gif
zooms.gif
 

Pre-StyleD Rooms

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!

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