Retail search & watch

I have omitted and obfuscated confidential information in this design case study. All information in this example is my own and does not necessarily reflect the views of Amazon.

Just Search

Retail search & watch

Encourage customers to continue their research with additional video content.

Project Details

  • Company: Amazon
  • Product: Experiment
  • Year: 2018
  • Tools:

"Shopping is a journey, not a destination"

Amazon Video Shopping Experience would like to partner with Amazon Search Knowledge to validate hypotheses on the effectiveness of video in search results. Search Knowledge team’s charter is to surface knowledge content that helps customers make product purchase decisions and the Video Shorts team’s charter is to acquire and surface videos relevant to Amazon customers. We believe our team goals are aligned and Video Ads can support the Search Knowledge.

My role

Myself as UX lead, a product manager, a software development manager and stakeholders in the Amazon Search team that included a design principal, product manager, and a senior UX designer.

  • Product strategy
  • User research & analysis
  • UI design & prototyping
  • Usability testing

Challenge

Amazon customers find it difficult to find products that have many options and competitive offerings. For example, research conducted in Q4 2017 indicated that out of 100 people that start searching for a TV on Amazon 5 will actually make the purchase. Providing a realistic product preview experience utilizing videos along with an effortless browse experience will help customers evaluate products effortlessly and make the final purchase.

  • Over 50% of internet users looked for videos related to a product or service before visiting a store” (ThinkWithGoogle).
  • Online shoppers who view product videos are 1.81x more likely to make a purchase than non-viewers.
  • “Some 86% of internet users polled were swayed by video to purchase a product. Text proved to have about half the power of video, with only 44% of respondents inspired to purchase a product after reading” (eMarketer).
  • “Compared with other formats, video was almost twice as effective at driving sales across categories including electronics, fashion, food/beverage, health and beauty, and travel, and especially at retailers Amazon and Walmart, according to the study” (eMarketer).

Customer problem

Customers do not have an easy way to view product videos today without navigating into the detail page. Based on the positive signal from the current search experiments, we find value in surfacing videos more broadly within search.

Our hypothesis is that by surfacing video in search product results, we make it easier for customer to watch video(instead of clicking on DP) and take decisions quicker while in search.

“Why do I need the 4K? What is best for movies and tv vs gaming?”

Objective

Improve the Amazon search experience where customers are overwhelmed with variety of details. The goal is to enable customers to find and purchase the product that fits their needs with the support of high-quality videos of product demos, reviews, recommendations, and buying guides.

  • Make the discovery process for videos simpler and fast.
  • Present the option of watching a video without intrusion within the search results page.
  • How can we present video content while keeping user's in the same experience?

Discovery

Research & usability study

The initiative got its start as a result of a study conducted in Q4 of 2017.

I used usertesting.com as a research and testing tool. The first study consisted of 30 minute sessions with up to 5 participants that consisted of shopping behavior questions.

What was tested

Both desktop and mobile experiences at Amazon.com.

Image shows Desktop search experience.
Desktop search experience.

Finding

Customers want a immersive, realistic and, effortless product preview experience on search using desktop rather than mobile.

"I guess that I do prefer to do research activities on a desktop or laptop, it’s more ergonomic, I don’t feel like I’m losing my eyesight. I can use my keyboard shortcuts, you know those little comforts make it so much easier to do." Participant

Competitor Analysis

What's out there?

Let's take a look at what other retail sites treat the addition of video into their pages after searching for a product. It took me several hours to find something similar to what I was looking for. It seemed like it was not a usual pattern in the retail world.

One example that I found was at Alibaba.com. They use video and images at the same level. User can switch between views with the help of navigation buttons. The video icon indicates that after the jump users can watch a video related to the product. There is not inline playing or lightbox to present the media.

Alibaba video addition to result pages.
Alibaba video addition to result pages. The video icon indicates that after the jump users can watch a video related to the product. There is not inline playing or lightbox to present the media.

The next source of inspiration by JCPenney presents a play icon that allows customers to access the video. Once you click on the icon the video substitutes the image and plays. One issue that I experienced when analyzing this approach was that I could understand how to stop the video from playing. I wanted to go back to the image of the pants but I couldn't.

Alibaba video addition to result pages.
JCPenney addition to result pages. Once you click on the icon the video substitutes the image and plays.

User journey

How can we provide an easier way to watch videos (instead of clicking on DP) and take decisions quicker while in search?

Customers search for an item and they need to click on the product to be able to see what videos are available on the product detail page for reference.

Image shows Search + Product detail UX
Search + Product detail UX.

Ideation

First experiment

The following process shows the results of adding for the first time video content to the results page at amazon.com. The first experiment consisted of adding one video into the Grid and List view.

Different views challenge

There are two types of views that users can use when displaying results on a page. Grid view and List view. Both have different real state to share for the addition of videos within the experience.

List and Grid view for searchfin results
List view and grid view.

This first experiment consisted on adding one video card into the Grid and List view within the product results page.

What do we need?

First, a video card

The Video Card will be used to surface buying guides, recommendations, how-to, product demos, unboxing, and product reviews.

the Video Card to display recommendations from authoritative sources along with Reasons to buy will help customers make confident and informed purchase decisions.

Video card
Video card.

Wireframing

How to show one video result on the Grid view.

Grid view challenge

Based on user feedback, title, duration, video provider and, of course, a very descriptive screenshot of the content of the video help users to have a clear idea of what to expect after selecting the video.

Video synopsis

Due to the extra space that the video card shows within the grid, I suggested adding some video description like in the concepts 1 and 2.

Grid Concepts
Grid view - one video. Concept 1
Grid Concepts
Grid view - Concept 2

Challenge - no synopsis

Due to technical constraints, the synopsis of the video can not be provided within the design.

Another round of ideation will help us to modify or think different when presenting the video experience.

Without video synopsis
Without video synopsis

Prototyping

Iterating to Hi-fi Mockups

How do we give our users a remarkable experience for Grid view?

The Coded Prototypes were an excellent way to rapidly iterate on design and build empathy for developers. Not only were good for commnication with teammates and stakeholders, they were a great way to gather quick feedback from users.

Challenge ahead!

Due to tech constraints, the ratio of the video thumbnail could not be altered. One of my ideas consisted of filling the card with the video thumbnail to provide a more appealing view to the content of the video. (See concept). However, this option has to be discarded from the proposal due to the impossibility of changing the ratio of the current video thumbnails. We had to use the current size without any alteration.

Usability study

Prototyping

Working with usertesting.com, a second usability study was conducted on desktop. I developed 5 HTML prototypes that we used for tesing.

Concept One

View Prototype

Concept Two

View Prototype

Concept Three

View Prototype

Concept Four

View Prototype

Concept Five

View Prototype

Communicating design

Design refinements & specification

I created design artifacts sharing the devs the CSS styles to accelerate the building phase and reduce coding time.

Sketch measure along with a limited UI specification was provided to the front-end developer within the Amazon search team.

redlines documentation

Deliver

Launched experience for the Search Results on the List view.

Image shows launched experience for Grid View.
Launched experience for Grid View.

A/B test

After launching in an A/B test the experience was not a success with some customers. Hypothesis for failure included lack of data quality in videos such as description of the video and also the "add" look and feel of the experience.

Experiment two

More than one video on the List view

The user needs to browse through a set of videos and possibly select one of them.

Also, limited to four, or five video cards help with discovering the content and finding the content in the carousel again later.

Image shows the carousel concept.
Video carousel.

Components

  • Video thumbnail.
  • Duration of video.
  • Video title.
  • Video provider.

The carousel approach makes more sense when adding video content to the page. The number of videos displayed (minimum five) and their layout provides a better experience to the user visually and content-based. More videos to browse and to pick from.

Image shows the carousel concept on the list view.
Video carousel on the list view.

Immersive prototypes.

Ideally, I would’ve liked to have created lo-fi wire concepts to test, but due to leadership request, the wires were transformed into hi-fidelity prototypes which I coded.

Image shows the carousel concept on the list view.
Concept that presents a color scheme for the different types of videos. They can be Customer Reviews, Buying Guides, or Product Demos. Video carousel proposal (Coded).

Testing

The HTML prototype exposed usability problems right away due to its fidelity to a real web experience. Also, the prototyping process was less time consuming because the code was completely re-usable when it came to the building phase.

I tested the new UI with five participants, looking for usability problems. We also talked to participants about what they would use video results for, looking for what kind of functionality is needed to solve the users’ real problems.

Detail view of the carousel
Detail view of the carousel.

Communicating design

I created design docs providing the devs the CSS styles to accelerate the dev phase and reduce coding time.

redlines documentation

Project Outcome

The video addition using a carousel in the search results page has had a positive impact on the search experience. The viewing rate has been significantly increased which means customers are starting to watch videos related to products while searching.

I have intentionally omitted confidential data here.

Launched experience for List View.

Learnings

  • The best user experience design will still fail without data coverage.
  • Don’t let politics limit what you can accomplish, by being customer obsessed and sharing my findings freely with the Amazon design community, my team and I were able to accomplish far more than we would have ever been able to do working alone.
  • The lines between UX and PM are sometimes blurry. Don’t hesitate to push for an experience you believe in.
Carlos Marin Burgos
Website Designed and Hand-Coded by Carlos Marin Burgos