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.
Encourage customers to continue their research with additional video content.
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.
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.
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.
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?”
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.
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.
Both desktop and mobile experiences at Amazon.com.
Customers want a immersive, realistic and, effortless product preview experience on search using desktop rather than mobile.
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.
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.
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.
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.
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.
This first experiment consisted on adding one video card into the Grid and List view within the product results page.
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.
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.
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.
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.
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.
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.
Working with usertesting.com, a second usability study was conducted on desktop. I developed 5 HTML prototypes that we used for tesing.
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.
Launched experience for the Search Results on the List view.
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.
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.
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.
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.
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.
I created design docs providing the devs the CSS styles to accelerate the dev phase and reduce coding time.
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.
