Amazon Video Shopping Experience

Video Lightbox

To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of Amazon.

This lightbox serves as a tool to browse, view and discover video content within Both, desktop and mobile versions are available for these purposes. The following design case focuses on the redesign of the mobile version.

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

So why did we do this?

Our video lightbox got negative reviews because users weren’t enough engaged with the viewing, browsing and discovering experience. Based on the content of the reviews, we hypothesized that users were dropping off after watching part of the first video.

The goal is to provide customers with guidance content on how to select and evaluate products and then encourage them to continue their research with additional video content on mobile. This project will employ the Amazon philosophy of Mobile First. As a result one of the primary goals of the this project is to increase engagement in video views on mobile.

  1. Friction-free browsing through video content.
  2. Engaging UX.

Understanding the past experience

The old lightbox version was important for the launch of the video viewing experience during a period, however it needed new concepts and the application of the new brand guide.

Old experience
Previous experience.

In the former lightbox experience, customers click through to a lightbox page that shows a single video player at the top and a horizontal carousel of video thumbnails below. The lack of visibility of the rest of the video options decreased the level of engagement. Also, the uncommon pattern used for this navigation influenced customers to leave the screen after watching a video.

I decided to follow the Lean UX Design Thinking process to make sure that my design decisions were supported by user research and feedback.

UX design thinking
UX Design Thinking process.

Who is our user?

We began by exploring our assumptions about the experiences of user browsing, viewing and discovering video content via mobile. Listing them instilled awareness of the ways we were biased, where we were correct, and more importantly, where we were wrong. For example, our first reaction was to separate viewing from browsing. After speaking to our users we would end up finding a better approach.

With this improved awareness, we crafted an interview table. We wrote the questions to prompt the interviewees to tell their story in their words. The intention was to get these people to tell us what was important to them when browsing, discovering and viewing video content.

The first round of interviews quickly produced a number of distinct trends.

Pain points

Armed with a list of primary pain points for our users, we conducted a few more interviews with an updated table of questions to gain context around said pain points.

Key insights:

From there we took all of our findings and created a user journey map with emotional states and thoughts annotated. However, even with a more complete mental model of what our users were going through, we still weren’t able to determine the specific problem we should be solving for our users.

Pain points
Mental model of what our users were going through.

Competitor Analysis

At the beginning of the project I conducted competitor analysis of other apps that allow users to watch videos via mobile. I look for positive and negative application behavior. I don’t want to reinvent the wheel, so analyzing features and interactions from other apps will help me to make better decisions during the ideation process.

Our competitors included Facebook, Youtube or Instagram.

Facebook and YouTube navigation
Facebook and YouTube navigation.

We found that the most common pattern used in other video platforms provides vertical navigation when browsing videos.

Defining the product

Now that we understood our users and narrowed down the specific problem we were going to solve for them we could decide how we would go about it. An app definition statement will help me to identify what features I think users might like to have to make the viewing and navigation simpler and more efficient.

  1. Video duration. How long is the video.
  2. Provider. Who is the owner of the video.
  3. Provider badge.
  4. Customer review label. Is this video from a Customer or a Seller?
  5. Timestamp. How old is the video.
  6. Feedback. Link to the Report section.

Video fixed playing at top of screen.
Scrolling feed navigation.

Detailed design

Communicating design

For each feature phase, I went through cycles of requirements, consensus, approvals, detailed specs and handoffs.

My process involved sketching and white‐boarding concepts and flows with my PM partner and then translating these directly into hi‐fidelity design comps. Since I was working with many existing design patterns, it was relatively easy to move straight into hi‐fidelity designs.

Detailed design of the two navigation concepts.

Thinking Big is always part of my design process. I wanted to propose to leadership and stakeholders experiences where new design patterns were involved. The goal with this new approach consisted of thinking about ways that we can keep the user engaged with the video viewing experience and helping to make the final decision about purchasing a product.

Thinking outside the box.

Some concerns were raised by leadeship about these two experiences. As a result, both were eliminated from the proposal.

I have intentionally omitted confidential data here.

As work began on defining the experience, discussions happening internally had never been more exciting. We had this chance to confront and properly challenge not only the Amazon leadership organization but also the entire Amazon design group. We were proposing a new video viewing experience across the entire organization.

A closer understanding

With the internal excitement around the project, the scope kept growing and we found ourselves in long debates around ideas and suggestions. We needed to pivot some of these internal suggestions around a more detailed solution. Early in the process, we sat looking at wireframes and sketches, talking about how we could translate some of our ideas into designs.

Discussions about the look and feeling and how the animations worked, ruled the process. We were spending more time arguing over specific details instead of using the results to determine a general experience.

“Prototypes are about testing ideas.”

Mobile prototyping with Axure RP

How do we give our users a remarkable experience?

Axure proved to be the best tool of choice for prototyping. Because of tight timelines, I chose to develop a high‐fidelity prototype which had both benefits and drawbacks.

On a positive note, the prototype was a powerful tool in creating transparency in the design process. My what you see is what you get approach strengthened my relationship with leadership and allowed me to gain feedback and approval from both my stakeholders and development team early on.

Using quick, prototype-driven iterations, we got a feeling for the experience. We could interact with gestures and get a sense of how some of these ideas were being used. As a result, it helped us figure out what we needed to focus on. Also, it allowed us to exclude things that would compromise the important parts of the entire viewing experience.


From the beginning of the project, I was focusing my work trying to understand the necessities of our customers. We conducted several Guerrilla tests to gather data regarding how users navigate and search for videos. The feedback obtained helped us decide between the different concepts that I was proposing.

We 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.

Guerilla usability test is “the art of pouncing on lone people in cafes and public spaces, quickly filming them whilst they use a website for a couple of minutes.” — Martin Belam.

“I like to watch a video while I can navigate on the screen.”

User feedback.

User insights


The two final concepts, based on video navigation, were the "Card" design and the "Fixed" design.

Four of the five participants indicated the preference of navigate through the videos while watching the video located at the top of the screen. This model allows users to be able to watch any selected video while the vertical navigation let them browse other media content without interrupting the viewing experience.

Fixed vs Cards concepts.

Based on the user feedback obtained during the sessions, I proposed to leadership to move forward with the "Fixed" model.

In order to obtain more accurate feedback from users, I uploaded the Axure RP files to a server. As a result, I was able to access the prototype from a mobile device providing a very realistic experience to the participants when testing.

Introducing the New Experience

Launching Is Only The Beginning

The design process for the mobile lightbox continues evolving. Many missing features were eliminated from the original design proposal due to time and technical constraints. Our team was quick to jump to the perceivably easy solution to design a new mobile lightbox.

I fought against this proposal, based on the rationale that eliminating some important features would affect the levels of engagement.

One feature that I thought it was mandatory for users consisted of being able to provide and browse video feedback. What is the point of presenting a variety of videos without a reference to the quality of the videos? Remember that the whole goal of this project consists of providing guidance when purchasing an item via videos. How can users know what videos are helpful?

The new experience

At the time of launch, I had difficulty accepting the reality of this new experience, because I knew where all the dead bodies were hidden. I knew which critical features were missing.

My dissatisfaction is not a case of perfectionism, but rather an insistence on quality. Quality that should never be compromised, even in the first version of a product. Quality is the responsibility of an entire organization and I have learned that awesome experiences are only possible if the whole team truly shares the same values and aspirations.

The new experience

Jeff Bezos’ famous saying at Amazon is that “it’s still day‐one”. For Video Shopping Experience, this could not be truer.

The redesign of the lightbox on iOS and Android has had a positive impact on the video viewing experience. The video engaging rate has been significantly increased which means customers continue to watch videos on mobile.

I have intentionally omitted confidential data here.