How to Onboard Users to Augmented Reality
At Wayfair, we’ve been on board with augmented reality (AR) from day one.
But how would we onboard our users?
Earlier this year Apple introduced ARKit, a revolutionary framework that enables developers to build their own augmented reality (the “AR” in ARKit) apps for iOS. With it, animations and images can be overlaid on top of an iPhone or iPad’s real-time camera view, projecting the digital world onto the real world (think: Pokemon Go). As an ecommerce company, we’ve known that AR could go a long way in solving one of the biggest pain points consumers face when shopping for home furnishings online: the question of how an item will look and fit in their home. Having already built an 3-D AR experience on Tango more than a year ago, when Apple announced ARKit we just needed to figure out what to build, when to launch it, and — most importantly — how to best onboard our iOS users so they would actually use it.
We knew that our experience with AR would give us an advantage in building something quickly, so once the when was confirmed, the what came naturally. ARKit would be launching with the release of iOS 11, and we wanted to have an AR build submitted to the App Store and available for users on day one. If we could bring our View in Room 3D feature to iOS in time, we’d be one of the first companies to introduce AR to a mass market of millions of potential users. The other challenge was that Apple hadn’t released ARKit Human Interface Guidelines and there were no competitors to analyze or work off of.
Despite tight time constraints, I knew we couldn’t pass up the opportunity to showcase Wayfair’s long-held position as a pioneer in the AR for e-commerce space. Between the potential flood of impressions and anticipated media buzz, the marketing could practically do itself! With that, our team of app product designers and developers jumped on the iOS ARKit train and went full steam ahead. Choo! Choo!
So what did we end up building?
In 2015, we started to look ahead and began to brainstorm how AR could best solve our user’s needs. Given the pain point I mentioned earlier, we decided to build a product that allows users to place 3D, true-to-scale renderings of products in the context of their own homes. Imagine being able to see how a new piece of furniture would look and fit in a room before you buy it . This functionality would give Wayfair a competitive advantage in the e-commerce space, and would get us closer to emulating the in-store shopping experience that much of our customer base is used to. In fact, we could even surpass the in-store experience by taking the furniture to them!
And with that, we created…drum roll, please…View in Room 3D!
How ARKit Works
ARKit works by combining information from an iOS device’s motion sensing hardware with the real-time camera view. In doing this, ARKit can recognize features in the scene image and track differences in position.
View in Room 3D works best if the user’s phone is angled and in motion to detect feature points, which can then determine where to place a product. It seems easy enough, but between Design, Product, and Engineering, we couldn’t decide on the best way to get the device to find a plane — Move it, but not too much! Angle it, but not at the floor! — and we each had different perspectives on how to translate this to our users. Thus the onboarding battle began.
Method #1: Gamification
Design’s perspective was that we should try to make a gamified onboarding experience that asks the user to do a few setup and calibration steps before being launched into the experience. We explored multiple games, but our favorite one pictured below required users to move the Wayfair pinwheel from one side to the other until the place is detected.
The problem with this was that it prevents our customer from getting straight into the viewing experience. Also, the customer could potentially be confused as to why they are being asked to move a pinwheel when they just want to view a product in 3D. We gave ourselves an A for effort, but we quickly moved on. Game over.
Method #2: Copy
Engineering believed that plane detection would be registered whenever the phone was moved slightly from left to right then stopped in place. What better way to get users to do this than to tell them directly? This meant that we would need to message something like “Move your phone from left to right and then hold steady” at the start of the experience.
Our UX Copy team wrote onboarding copy to test this on users. What we found was that, when told to move the phone side to side, users would comply, but they would quickly become annoyed if the plane wasn’t detected as soon as they held the phone steady. The miss on our end was that the phone needed to be angled. Also, we quickly realized that the phone steady bit was a fallacy and not a technical requirement of ARKit, so we pivoted away from this.
Method #3: Video & Copy
Given what we learned from our previous attempts, Product and Engineering pitched that we needed to show and tell people how View in Room 3D works. We could do this with an onboarding video. Even though I was on the fence about creating a video, I did want to see if it would help our customer. We needed to get this right in time for launch, and ARKit user testing was riding on my shoulders — I would do anything to ensure we were driving towards results. Additionally, with the video came updated onboarding copy instructions from Product Design and UX Copy. We tested a version of copy that read, “Tilt and move your camera side to side” and then after the plane is detected, “Tap to place your product” with a large arrow. So a few positives came out of this test.
The positives:
• Customers were able to find a plane more successfully than previously
• Customers were less annoyed by the setup and were actually delighted because they thought it was simple
The negatives:
• Some of our customers actually thought the onboarding video was the experience and not the View in Room 3D experience — oy vey!
• A few customers seemed to be waiting for the video to become the experience and expected it to do something — that’s not good!
Conclusion
The different perspectives I spoke about were perspectives and views from Product, UX Copy, Product Design, and Engineering. Everyone came to the table with an idea and or a solution to help solidify making the customer experience better with each opportunity we had. No one really had the best solution right out of the gate, but by iterating together we were able to come up with a method that worked.
The design you’re about to see is the first release of View in Room 3D. In future updates, we’ll allow users to add multiple products to the screen and record their experience for later viewing. In the meantime, enjoy the current View in Room 3D by downloading our app in the AppStore or by watching this video below.
Special thanks go out to Arpit Gupta and Trevor Collins on the Product Team, Amanda Morrison and Catherine Groux from the UX Copy Team, and all the iOS Engineers on the project.
Interested in joining the Wayfair product design team?
Check out our open positions here.
