Feb 22
Adding Playback Speed feature on Disney+ Hotstar
Overview
Watching movies is a way to spend most of people's free time. There are different ways to enjoy it. Some people want to increase their productivity by watching movies at a speed above normal or schooler working on a task to review a movies. One feature that can help them is playback speed.
Playback speed is a feature that allows users to speed up or slow down video or audio media.
Disney+ Hotstar is a streaming service dedicated to show international and Indonesian hit movies. Currently within the Disney+ service itself there is no feature to choose the playback speed of the content they have, compared to their competitors such as Netflix and WeTV which already have this feature.
Problem Background
According to Howard A. Rosenblum, CEO of America’s National Association of the Deaf, he stated that the playback speed feature alone could help deaf people who might prefer a slightly slower text speed. On the other hand, according to Everette Bacon, board member at America’s National Federation of the Blind, many people in the visually impaired community can understand and appreciate audio playing at a much faster speed than most people with vision might be comfortable with.
Apart from its needs in certain communities, myself as a streaming service connoisseur feel that the playback speed feature is very important, especially when I watch a TV series that already has many episodes, but unfortunately Disney+ Hotstar does not yet have this feature in their mobile application. Besides that, sometimes I like to watch movies with speeds between 1.25x-1.5x so that I watch more movies/tv series.
Research Planning
Before starting my main research, I did a customer review analysis using the reviews on google play, with the results that many users were disappointed or at least just gave suggestions for Disney+ Hotstar to add playback Speed feature on their product.
Methodology
In this research, I used 4 approaches, namely:
- In-depth Interview to 5 subject
- Customer review Analysis
- Journal review
- Competitor Analysis
Criteria of Subject for In-dept Interview
Interview subjects must have the following criteria:
- Men and women with an age range between 15–45 years.
- Aware of the playback speed feature in similar applications.
- An active online movie streaming application user in the last 3 months.
Research Guideline
My interview guideline was made based on the background of the problem and pre-research from the results of the customer review analysis.
Data Collecting
Interview
Interviews were carried out using Zoom and WhatsApp Call to 5 subjects who matched the predetermined criteria. The interview schedule is adjusted to the availability of the subject in the time span 25 February 2022–02 January 2022.
Competitive Analysis
In this competitive analysis section, I look for the advantages and disadvantages of competitors or similar applications from Disney + Hotstar be it generaly or design wise, namely Netflix, WeTV, YouTube, and Viu.
Netflix
Netflix was chosen because this application is one of the largest streaming applications like Disney+ Hotstar, besides that Netflix itself already has a playback speed feature so we can see which part is good and which part isnt and latter add or avoid those element on our design.
WeTV
Similar to Netflix, WeTV was chosen because this product already has the playback speed feature, not to mention a lot of their content is free so its easier for me to reach.
Youtube
Youtube as the largest streaming service in terms of the number of users is well known in the community, on average my interview subjects are also familiar with the playback speed feature from Youtube, and nowaday they also have some movies in their library to be rented.
Viu
Viu just like Disney+ Hotstar, doesn’t have a Playback speed feature, that’s why I choose this application as Disney+ comparison. From the results of the customer review itself, it can be seen that many users want the Playback speed feature to be added to Viu just we have seen in Disney+customer review.
Journal Review
A movie consists of 3 elements, namely images, sound, and writing. Majority of humans able to absorb stimuli in the form of images better than sound and writing. But that doesn't mean humans can't absorb sound and written stimuli quickly, it just takes practice to get used to it.
“…with practice and early exposure, the general population might achieve fast listening rate, and save themselves listening time”, says Bragg and co.
In line with the opinion of Bragg and colleagues , Pastore’s research results also show that there is not much difference between the speed of 0% (normal) and 25% (1.25x) in absorbing facts and problem-solving.
Define
Affinity Mapping
After i conduct my research, the next step is to organize the insights i have collected through affinity mapping.
User Persona
User Persona is a fictional character who represents the target user of a product. User personas serve to provide a real picture of users for product designers to make it easier to understand them, the goal is that products are made based on what users need. For this case study, I created 2 personas, male and female, with different personalities and detailed information, but with relatively the same needs.
User Persona 1
User Persona 2
User’s Journey Map
User’s Journey Map is a visualization of an individual’s relationship with a product/brand over time. Its own function is as a tool for designers to see the product from the user’s point of view with the ultimate goal of improving the user experience in using the product.
Problem
The following are the results of the analysis through affinity mapping and insights from subject friends who support the background of this research problem, including the following:
I realize Disney+ Hotstar users need the Playback Speed feature for some situations.
“Pernah pake yang lambatin buat nugas”.
“Yang nyepetin buat speedrun tv series”.
“Buat scene yang terlalu cepet dipelanin”.
From my finding subject feel that the main advantage of Disney+ Hotstar is that it is cheap~free because the product cooperates with one of the largest providers in Indonesia (Telkomsel).
“Dapet gratisan dari Telkomsel”.
“Karena dapet gratisan dari paket (Telkomsel)”
“Biasanya terpaksa kalo pake yg legal asal gratisan mah”
Besides that, there are also other advantages of Disney+ Hotstar, namely the film library which is quite large and complete.
“Film yang dicari emang ada disitu (Disney+)”.
“Streaming service cukup lengkap”.
Recommendation
Based on the results of my research that I have done, I conclude that this feature is needed by users to either speed up or slow video down.
Ideate
User Flow
User flow has the primary role of mapping out a series of paths that traffic will take to a website or Apps to help achieve company and product goals. Here is the User flow navigation on Disney+ after I add playback speed feature.
Information Architecture
Information architecture is information that is displayed in the form of charts, columns, or structured designs that are interrelated to make it easier for others to understand. Below is shown information architecture of Disney+ navigation flow from opening the app to activating the playback speed feature.
Wireframe
A wireframe is a layout of a web page that demonstrates what interface elements will exist on key pages. It is a critical part of the interaction design process. Here is the wireframe that I’ve made for this particular case study.
While of course our bread and butter is the playback speed addition, I also add some redesign to other areas in this apps such as the movie overlay, movie player, and menu bar base of our finding from competitor analysis.
Mock-up
High-fidelity design is basically our final design of product that we want to publish to users, of course the process itself isn’t finish yet but this is the most telling design of our final product before we conduct a test to users.
Design System
To make things easier for us before we create our final design, we compose our product’s design system so that we can reuse these component for latter.
Homepage
In this page I only do some minor change like:
1. The original menu bar feel redundant with Disney+ button in it so I swap the place with Home button and swap it with watchlist button. After that I redesign the Home button so it will stand out compared to other button.
2. This is the new Watchlist button that I add to this menu bar. The main purpose itself of course so users can navigate to watchlist page faster since that is the place where users can access bookmarked movies or tv series.
3. And this last one is a new addition to this page, this will give users easy access to genres that previously only available accessed from hamburger overlay on left top, and of course this also serve the purpose of replacing the Disney+ button in menu bar in a way.
Film Overlay
I did some overhaul in this page so its faster to navigate and give easy access to similar movies/tv series.
- Now genres is tap-able so users can access those genres easily (genres shown depend on related movies), and also I remove the movie summary.
- Here I only change the “WATCH” button placement and size, the reason is so the page wont feel empty and since its bigger, its easier for users to tap.
- Here I remove the info button since it has exactly the same function as the “WATCH” button, after that I add download button so users no need to navigate to the movie page to download movies and episodes button (for series only) for them to choose which episode to watch. And lastly I move the watchlist button (+) to the top-right of this page.
Film Page
- Here I remove the text from setting button and move the placement.
- I change the button icon to a more universaly used one and move it to the bottom of the video player since its also the more universaly used placement for maximizing button.
- Lock button purpose is so when the button tapped, the screen will locked and prevent users from accidentally press other button so their watching movie experience wont be disturbed.
- Here I breakdown the setting and audio & subtitles button to a smaller and specific function. And of course we also add our playback speed button here.
- This function as movies recommendation for users, similar to what Youtube have in their product.
Playback Speed Feature
And here is our creme de la crème, the playback speed feature. There is nothing fancy here just adding a playback speed button to the video player Hpage and give it an overlay. There is seven speed option from 0.5x to 3.0x. According to our research, different user has different use of this feature, from slowing down the movie so they can analyze the movie easier, to increasing their productivity so they can spare more time for other activity.
Prototyping
Not much to say in this section other than here we can see our navigation flow of this apps from homepage to changing speed when we watch the movies or tv series while improving some of Disney+ design along the way.
Limitation
Since this is like my second time making an UI/UX case study, there’s some bits that I miss or straight up fail to do when researching and redesigning this product. Of course mistake is part of our growth as a human being and I’m not afraid being wrong in my learning process. I do wish to create a better and more comprehensive case study in the future. Some of mistake and limitation I feel in the making of this case study.
- While I do bring up deaf and blind community, I actually don’t have any link to those community, so there is some data especially about accessibility that I cant provide in the research.
- I wish I had data traffic of Disney+ competitor that show how often people use their playback speed feature, but I do understand why they aren’t publish those data.
- I am an amateur when it come to designing stuff, so there is so many mistake and inconveniece while redesigning this apps.
Reference
https://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
https://elemental.medium.com/is-life-better-at-1-5x-speed-f5ae46c293c6
https://www.sciencedirect.com/science/article/abs/pii/S0360131511002351
https://uxplanet.org/a-beginners-guide-to-user-journey-mapping-bd914f4c517c
