Prime Video Media Player | Web, iOS

The Problem

Jamie (the user) cannot change the episodes or seasons of her favorite shows while the content is still playing. She feels frustrated every time she has to close the media player and pick an episode or a season.

HMW

Jamie needs a way to change episodes/seasons without stopping the show first, therefore she can have a seamless experience and won't get frustrated

The Goal - Scope

Design a Prime Video media player feature for Jamie (the users), so she can have a seamless experience watching her favorite shows

Outcome

I designed a feature that enables users to switch back and forth episodes, and seasons on the UI, while the content is playing. Therefore, this feature offers a seamless user experience with less steps.

[ PROTOTYPE LINK ]

[ PROTOTYPE LINK ]

‍

‍

PART 1 - EMPATHIZE

‍

01. Conducting Qualitative Usability Testing / User Interviews to Find Out What People Think & Feel About the Current Feature

‍

I conducted qualitative usability testing/user interviews to eliminate my bias as much as I can. The goal was to observe and understand other users, in order to create a better user flow. The test is conducted with 5 participants. The one and only Steve Krug's guidelines are followed. To make sure the participants were comfortable with the platforms, we ended up using Microsoft Teams, Zoom, and Discord.

‍

‍

Methodology

The participants were asked to perform 3 tasks, and follow the think-aloud protocol as much as possible. When they stuck or got quite, as a Researcher I asked questions like "what are you thinking right now?" to have them think out loud again. When the tasks were done, I followed up with the user interview questions.

‍

User Scenario

You are on a vacation and you want to spend your time binge watching a TV series that has more than one season. It could be your favorite TV series, something you watched before or a new one.

‍

User Tasks

01. Can you open a show that has more than one season?

02. Would you change the season please? Could be next or previous season.

03. Now, would you change the episode on the current season please?

Key Findings

01. 2/5 people completed the tasks without having a problem.

02. Although tasks were completed, 5/5 participants showed a similar behavior as if they could change the episodes on the media player UI

03. 4/5 participants complained about the UI.

‍

02. Understanding the Market

Time is changing, we moved from CDs to DVDs, Blu-Rays and now the big thing is Streaming. According to Company Data and Business of Apps research in 2020, Netflix has 75 million subscribers in US. On the other hand Prime Video only has 50 million subscribers. This metric is important, because it shows how much revenue a product can bring.

Something to keep in mind is that the Prime Video subscription comes free with the Amazon Prime Account. So it is hard to assess how many of the subscribers' first goal was to stream.

‍

‍

03. Exploring Deeper to Understand and Satisfy Users - Competitive Analysis

Competitive analysis helped to understand the strengths and weaknesses of the competition, and where the Prime Video stands in the market. The competitive analysis is conducted on Netflix and Crave. Both platforms offer users to choose a different season or an episode on the media interface. The scope of the analysis was to if the user could keep watching the content and switch back and forth episodes or seasons. As of today Prime Video is missing that feature.

‍

‍

PART 2 - D E F I N E

‍

‍

01. Understanding the User - Persona Building

Based on the collected data, including the user Interviews and competitive Analysis, finally the high level persona is created. The first look for the persona is created using just a pen and paper.

‍

‍

02. Meet Jamie - High Level Target Audience

As a part of the design process, the primary persona is created. This tool helped with understanding user's needs, tasks, expectations, pain points and behaviors.

‍

‍

‍

03. Mapping the Journey for Jamie

Storyboard is created to show how Jamie successfully interacts with the new feature. Please excuse my drawing skills :)

‍

‍

‍

PART 3 - IDEATE

‍

‍

01. Trimming the Steps for Jamie - Efficiency Stored for the Same Task

Tied back to the Jamie's journey and I created a user flow. The iterated version of the user flow has lesser steps to meet user goals for the exact same task. The current app flow has more steps to meet user goals.

‍

‍

‍

02. Using the Assets From developer.amazon.com - Design System Notes

01. Amazon Prime have an established design system and UI Kit avaible, I used the avaible design kit.

02. The same color palette is used. Basically, I didn't need to design a style guide or design system.

03. Amazon Ember font is used

04. Lastly, I used Google's inspect feature to make sure everything is coherent.

‍

‍

‍

03. Tying Back to the Problem & Building the Solution - From Sketches to Hi-fi Wireframes

Tied back to the main goal and created my solution. The main goal was to iterate the current product without going too creative or experimental. Because, Prime Video is already out and have a current user pool. So, keeping the familiarity aspect within the product was crucial.

‍

‍

01. Web

‍

‍

‍

02. App - The First Version

‍

‍

‍

PART 4 - PROTOTYPE

‍

‍

01. Introducing the Solution for Web & Mobile

‍

A Prototype Demo

I prepared a prototype ad demo to see how it looks and feels in real life. (15 seconds video)

‍

‍

Tying back to the problem statement again, the current design is missing the feature. On the other side the new feature is implemented as a solution.

‍

‍

Mobile Prototype Demo

I prepared a prototype ad demo for mobile as well. Again the goal was to see how it looks and feels in real life. (13 Seconds Video)

‍

PART 5 - TEST

‍

01. Conducting Usability Test - User Interviews on the Design Solution

I conducted a qualitative usability testing - user interviews with 5 participants to find out what people feel and think about the solution.

‍

Key Findings

01. 5/5 people completed the tasks without having a problem.

02. 5/5 people clicked on the episodes icon to change the episode/season.

03. Clicking on the episode icon could be correlated with a user behavior that developed using other stream products.

04. 3/5 people did not find appealing the season switch transition on the mobile UI.

05. 4/5 people found the feature functional.

‍

‍

PART 6 - IMPLEMENT

‍

01. Working with the Current UI & Creating the Seasons Tab Version 2.0

‍

During the testing sessions, I quickly discovered that "seasons tab" did not really fit in and people did not enjoy the visual aspect of it. I quickly fixed the UI and prototyped once more. On the newer version This UI template is already being used for the "Subtitles" tab on the Prime Video app. I simply,

‍

‍

‍

‍

02. Final Version of the App Prototype

‍

I created the prototype using Xd, then brought it the After Effects for a simple mockup masking. (15 Seconds Video)

‍