Loelle's LookBook
VIR3DBlock.png

Wayfair View in Room 3D

"View in Room 3D" is an enhancement of Wayfair's "View in Room" core app feature. It allows users to "try products out" before making a purchase decision by superimposing a to-scale, 3D product image into their room. Users can walk around and manipulate these 3D models, which have been created with care by Wayfair engineers, giving them an even more realistic idea of how product appears in their home.

Product Designers: Lauren Elliott and Justin Henry (iOS and Android)

Skills: User flows, competitive analysis, user testing, InVision and Sketch

Press: Wayfair’s AR-Powered Shopping App Now Available to Tens of Millions of Consumers on iOS 11

Wayfair’s New AR-Powered iPhone App Lets You Preview Furniture in 3D

 

Objective

We made a number of improvements to the MVP of View in Room, but the goal of this project was to enhance the user's experience using augmented reality and 3D models.

Competitive Analysis (below)

  • Similar features were either complex (ie: product appeared in room to-scale, with dimensions), while other 3D models didn't appear to scale, leaving room for error/guessing on the user's part
  • Because users didn't always recognize what they could do in the View in Room MVP, tool tips like the ones used by Houzz were something we wanted to explore
  • Competitors like Houzz utilized filters as an entry point and tags on product cards to indicate the feature; other competitors like Overstock used a homepage banner to launch users into the experience
  • We landed somewhere in between in our final design
     
     
    Houzz

    Houzz

    IMG_0076.PNG
    IMG_0080.PNG
    Overstock

    Overstock

    overstock-2-576x1024.jpg
     

    User Flow

     
     

    Process and Opportunity Areas

    The View in Room 3D feature operated similarly to the 2D version seen here, however, there were three unique challenges to address with the 3D version:

    • Entry point: with the 2D version, we relied on Wayfair's "What's New" modal (and later banners) to promote the feature. With augmented reality and 3D models being so useful to consumers in this space, we wanted to give the feature more prominence, thus designed two possible entry points: a homepage banner or making 3D products a category of its own. These entry points will best test for future states, but for now, we designed product cards tagged with "3D," alerting the user that particular products have 3D functionality.
     
     
     
     
    • Mapping: We began designing first for Android, but with iOS in particular, it was challenging to design and accommodate the AR technology. These issues are addressed in the visuals below.
    • The technology required first moving the camera around to map the space, then the user tapping to place the product. In initial iterations, we used a grid visual to indicate when mapping was or was not complete. We also indicated where the object would be place according to object type and surfaces detected (see ceiling icon below).
    • Ultimately, the combination of grids, color and icons was too complex, while indicating where the object would be placed was uneccessary.
     
     
    01d.png
     
     
    • We worked earnestly with the developers to understand what the user needed to do to effectively map the space. This took many rounds of design solutions. One direction seen below was our attempt to gamify the mapping experience by prompting the user to line up shapes, ultimately making a diamond-like motion with their device.
    • We eventually shifted to error messaging in a dark bar and simplified the "Tap to place" messaging to simply an icon and text.
     
     
    02d.png
     
     
    • Tool tips: Data showed that users eventually pinched and zoomed in the 2D View in Room experience, however, they didn't seem to catch on to this functionality quickly in user tests. To assist the user in exploring the 3D models, we wanted to incorporate tool tips as the experience progressed.
    • Our tips began as icons, accompanied by text, and appeared kind of sporadically after the user placed the 3D product. Some of our PMs and developers felt it would be helpful to include these tool tips, while some of us felt eliminating these somewhat complex tips would allow the user to discover and explore how the 3D models work.
    • We also designed several onboarding options like the fourth screen below, to outline all the possibilities in the experience. This example, in particular, was an exploration of a question mark or Help icon, which would launch a modal of helpful tips.
    • Ultimately, we simplified tool tips entirely, as seen in the final direction below.
     
     
    Rotate.png
    MoveCloser.png
    05.1 Usertaps on Question icon.png
     
     

    Final Direction: UX/UI

    • Ultimately, we learned the motion necessary for mapping was a simple tilt and pan motion. After yet more iterations of icons and visuals, we landed with the direction below.
    • While messaging was helpful to teach the user how to manipulate and explore the 3D models, we pared the tips all the way back to just a few textlines at the top of the screen, avoiding awkward interruptions and poor timing.
     
     
    VIR3DPortfolio02.png