Amazon

Amazon

Computer Vision and Augmented Reality Mobile App

With Amazon Product Preview, Amazon customers can see how products will look in a real world setting using their mobile phone. Product Preview is an augmented reality feature within the Amazon Mobile app, which helps customers visualize products in their environment using the camera on a mobile device.

Amazon Product Preview was a collaboration with designers, researchers, product managers, and engineers to create a cohesive experience for the customer while using computer vision technology: SLAM, 3D object tracking, and illumination estimation.

Product Design

UX/UI Design

Usability Tests

User Stories

Task Flows

Wireframing

Visual Design

Amazon

Background

Amazon customers were ordering large TVs through the Amazon marketplace and the majority of TVs were returned because they were either too large or too small for the intended space. The TVs were often damaged during return shipping and this became costly. We created Amazon Product Preview to improve the customer's confidence in their purchase decision and help solve a business problem. With Product Preview, a customer can see in the camera view of their mobile device, a virtual product properly sized and placed in their surroundings.

Amazon
Amazon

Process

Starting with Amazon customers' personas, I created user stories. I listed all of the important features and tasks that a customer would want to explore in the experience. I then created several verisons of the task flow. Once the task flow was finalized, I began sketching interfaces. Working closely with the engineering team, we created several mockups and prototypes for the interface. After sketching, I designed wireframes and then pixel perfect mockups.

Amazon
Amazon
Amazon
Amazon
Amazon
Amazon
Amazon
Amazon
Amazon
Amazon
Amazon
Amazon
Amazon
Amazon
Amazon
Amazon
Amazon
Amazon
Amazon
Amazon
Amazon
Amazon
Amazon
Amazon
Amazon

Usability Studies

Working with Design Manager and UX Researcher, we came up with a research plan for the second round of usability studies.

We tested several Product Preview prototypes in on-site user testing in people's homes. The testers were all Amazon customers, lived in the San Francisco Bay Area, and were currently looking to purchase a new TV.

Amazon
Amazon
Amazon
Amazon
Amazon

Dollar bill as target

Before entering the AR experience, customers had to print out a custom printed fiducial, or target. During usability testing, we discovered that customers were having difficulty with printing the custom paper target. Many customers did not have a printer at home and some just did not understand that the AR experience needed a "target" for the technology to work properly. As an option to printing the custom paper target, we introduced using a common everyday object: a dollar bill. Because of its smaller size, the dollar bill was not as accurate with sizing of the TVs, but 57% more customers used the dollar bill over 43% that used the custom paper target.

Amazon
Amazon

Tutorial

Because augmented reality was a fairly new technology at the time, we invested time in designing and creating a lightweight but informative turorial on how to use the feature. For version 1, I created an overlay tutorial that was accessible at any time by tapping the "?" (help) icon.

After our first usability study, we discovered that customers did not understand this overlay style tutorial, and designed a scrollable, illustrated tutorial. This tutorial tested really well.

Amazon
Amazon
Amazon
Amazon
Amazon

Launch and Impact

We immediately saw an increase in TV purchases (up 50%) and a significant decrease in TV returns (down 95%). In addition, in the first 6 weeks of the launch of the dollar bill as target, the trend of new successful customers per day increased in the average number of new successful customers from 16 to 39 (+144%) per day.

Amazon
Amazon

Brand Identity

I also created a brand identity for Product Preview. Since the internal name for this feature was FEZ, I used the image of a fez hat as a main visual. I created an illustration of a fez hat and added the Amazon smile (arrow) underneath to stay consistent with the Amazon brand. I created t-shirts and posters for the FEZ team after our initial launch of the feature.

Amazon
Amazon
Amazon
Amazon
Amazon