Loading...
Amazon Amazon logo

Amazon Video Lightbox

This portfolio showcases my personal work and design projects. While some of the content may reference my professional experience at Amazon, all views, opinions, and designs presented here are my own and do not reflect the official policy or position of Amazon. Any data or information displayed is either publicly available or has been anonymized to protect confidentiality. This portfolio is intended solely for the purpose of demonstrating my skills and experience in UX design.

The Video Lightbox project seeks to enhance video views on Amazon by offering a more engaging and user-friendly way to browse, watch, and discover video content.

What's the purpose of the lightbox

Imagine This...

Emily is browsing the Amazon mobile app on her phone, searching for a portable blender. After typing her query and scrolling through the results, she taps on a product that catches her eye. On the product detail page, she notices a video thumbnail with a play icon among the product images.

Curious, she taps it, and a lightbox opens—dimming the background and playing the video in a focused overlay. The video demonstrates the blender in action, showing how it blends fruit, charges via USB, and fits easily into a gym bag. Once finished, Emily taps the close icon to exit the lightbox and returns to the product page, now more confident in her purchase decision

Objectives

The Lightbox project aimed to:

  • Increase Video Engagement:: Create a user-friendly interface to encourage more video watching and interaction.
  • Improve Navigation: Provide intuitive navigation, transitioning from horizontal to vertical, for easier browsing.
  • Enhance User Experience:Ensure a seamless experience with an accessible video player and uninterrupted browsing.
  • Boost User Retention: Improve video viewing and discovery to increase user retention and time spent on the platform.

What else has been tried

I performed a thorough analysis of other mobile video apps to understand their strengths and weaknesses. This helped me learn from existing features and interactions, and informed my decision to implement vertical navigation, which is the most frequently used pattern in other video platforms.

Wireframing

During the ideation phase, I focused on improving navigation to enhance the user experience. Competitor analysis showed that vertical navigation is commonly used in other video platforms, guiding my design choices. This led to two final concepts: the Card and Fixed designs. The Card design presents videos in a card format with inline autoplay, allowing users to navigate through videos while the main video plays at the top. The Fixed design replaces the lightbox with a vertically scrolling list of video cards, enabling users to explore other content seamlessly while the main video plays at the top.

Card vs Fixed

Evaluate

I partnered with my PM to evaluated the new UI with five participants. Interestingly, 80% of participants favored navigating videos while the main video played at the top, allowing them to explore other content seamlessly. Based on the feedback received, I suggested to leadership to implement the 'Fixed' model.

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

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

Design rationale

The choice to implement vertical navigation instead of horizontal navigation was influenced by several factors aligned with user behavior:

  1. User Engagement: Vertical navigation allows users to view a video while browsing others at the top, improving engagement.
  2. Visibility of Options:Vertical navigation provides a wider view of available videos compared to horizontal navigation, aiding discovery.
  3. User Preferences: Users prefer to browse videos while watching one, which vertical navigation supports.
  4. Competitor Analysis: Research shows that vertical navigation is prevalent in mobile video apps, making it familiar for users.
  5. Usability Testing: Guerrilla testing indicated that 80% of participants preferred vertical navigation, reinforcing its potential to enhance the user experience.

The Impact

The redesign of the lightbox greatly improved video engagement rates, with customers continuing to watch videos on mobile devices. However, due to time and technical constraints, many features from the original design proposal were eliminated. I opposed this decision, arguing that removing key features would reduce user engagement. One crucial feature was the ability to provide and browse video feedback, which helps users assess video quality and make informed purchasing decisions.

Challenges Faced as a Designer

During the project, I faced several challenges as the only designer on the team: Balancing various responsibilities was tough. I had to manage multiple tasks simultaneously, including designing interfaces, collaborating with team members, and ensuring effective communication. Effective communication was crucial to keep everyone aligned and my design concepts clear. Collaboration was key, especially when integrating designs with technical constraints, which often required adjustments.Managing feedback and revisions demanded attention to detail and adaptability. I had to stay open to constructive criticism while maintaining the integrity of my design vision.

More case studies

Image

Oracle Single Pane

Single Pane allows you to view multiple Jira SD instances within a single user interface. Gone are the days with a tab for each region(s).

Image

Building AWS Config

AWS Config was the first product in a new line of AWS cloud computing tools designed to assess, audit, and evaluate the configurations of your AWS resources.

Image

Microsoft Learn Advisor

Microsoft Learn Advisor use AI and your preferences and goals to create learning paths, ensuring you gain relevant skills efficiently.

Image

Visual Interactive Voice Response

The Visual Interactive Voice Response is designed to enhance user experience by allowing them to navigate support options visually, which can be more intuitive and accessible, especially for users who require hearing or speaking assistance.

Image

Creator Portal

Amazon customers can now add videos to their favorite products through the Related Video Shorts Widget on Product Detail Pages.