Amazon Video Lightbox

Role

UX Designer, Amazon Video

Timeline

2017-2018

Platform

Mobile App (iOS & Android)

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

The Problem

Product videos on Amazon were underutilized. Users had to leave the product page to watch videos, and the horizontal browsing experience on mobile was frustrating and led to low engagement.

The Solution

Create a focused lightbox experience that lets users watch product videos without leaving the page, with vertical scrolling for intuitive mobile navigation and related content discovery.

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.

Competitive analysis of mobile video apps including YouTube, TikTok, and Instagram

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.

Wireframes showing lightbox navigation concepts

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:

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

The Impact

35%

Increase in video views

2.5x

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.