Hotstar — A small case study

Photo taken from http://onefilmfan.com/wp-content/uploads/2017/12/

It is 9pm in an Indian household and everyone is starting to have dinner and is really excited for the next episode of their favorite game show, Dus ka Drum. But, guddu ke papa is still outside, stuck in traffic, and he will have to wait for the next day to watch the episode he might miss today or search for it on Youtube, which was not common amongst our parents and grandparents at that time. Meanwhile, Guddu is in hostel without a TV and is gonna miss the last few death overs of the India vs Pakistan cricket match. This was pretty normal and common in India 4 to 5 years back, before Hotstar entered the Indian market.

Why is it special?

Hotstar home screen (desktop website)

Hotstar, one of the most used streaming apps in India, changed the way how Indians consume content, and how they watch their favourite TV shows and sports. They started before there was something known as Jio in this country and almost no one was used to watching their daily soaps on an app which uses the internet. No one thought that an app like this could work in India, and now here they are, churning big profits every year and giving competition to giants like Netflix and prime video.

Their great marketing team and the simple to use app were one of the very few reasons why the app worked in India. They started with a free version (we love free things don’t we), and then slowly started charging for content they knew we can’t live without.

I never really thought of writing this article, but only because I use the app a lot, and noticed how the already existing Hotstar app (which is amazing, by the way) can be improved, I thought of giving it a shot. Since, a lot of people forget the difference between UI and UX, I will state that again. I am not gonna make any major design changes to the app in terms of looks (UI), but I will rather focus on the how the user experience and the flow of the app can be improved.

First, the good things …

Yes I am gonna nitpick in this article, but we can’t ignore the fact that hotstar did a lot of things right, which we no one thought of before

Since almost everyone in India was used to watching their shows on TV (and not on any single channel, mind you), it was a major design challenge for hotstar to make them shift to using hotstar, slowly. BUT HOW?

  • So this is what they did, instead of using the word “Shows” everywhere, like any normal media app would, they focused on using ‘Channels’ and ‘Languages’. With such a huge number of channels and shows available, and almost every Indian wanting to watch most of them, they did the right thing by telling the user that they have multiple channels aboard (even though they were all of star network).
  • They took advantage of the diverse population in India and had a separate Language section right from the beginning. If they started by focusing on only one language, it would have been difficult to get people who speak different languages, later.
  • This is not exactly a part of UX, but this was very important for Hotstar. Their marketing team focused on the fact that people can watch the missed episodes on the app (Hi, Guddu ke papa!). Now, getting people to shift from TV was a mammoth task, but Hotstar got it right. It was tough for them to urge people to just leave TV (which even they didn’t want people to do), and shift entirely to the app. Through this campaign, they slowly started building an audience for their app. Moreover, their ‘Go Solo’ campaign made people realize that they carry a potential TV in their pocket and can watch whatever they want, even if their friends don’t watch the same stuff!
  • Usage of the word “TV” and not “TV shows” in the menu. Indians loved TV and it made them feel like home. (watch TV on an app? YESSS!).
The navigation bar in the Hotstar app
  • This is not an old feature, but I love how they implemented this. Instead of hiding the language option behind a settings button in the video player of live cricket matches (which a lot of people might miss), they show the language options at the bottom of the player, which is indeed very practical. Plus, the fact that the whole scorecard can be checked without leaving hotstar also adds up to user retention. Moreover, the new chat section on the match screen is a wonderful idea. It makes me more interested in the match, and won’t let me leave even if i get bored from the match!
The decision to show al the language options on the video player for the first time is superb.
  • When a live match is going on, that is mostly the first card that shows up on hotstar and is the center of attention. Moreover, they also show the score on that card itself (which always makes me want to click it and watch the match).
Score of the current match being shown on the hotstar home page.
  • Not forcing the user to log in to watch something, especially, when it initially launched. We all are lazy people and Hotstar knows that!
  • SPECIAL FOCUS ON CRICKET. SPECIAL FOCUS ON CRICKET. SPECIAL FOCUS ON CRICKET

Something is missing? Maybe.

  • Now here I am , watching an episode of The Silicon Valley’s 4th season. The episode has finished and there is a one minute long end credit sequence, which I want to skip (obviously!) and want to jump to the next episode directly. But, I can’t do that from this screen. The bottom part shows me all the episodes of the first season, and it shows a list of all the seasons below that. So, to jump to the next episode from here, either I should wait for it to end, or I should search and click on the season I am watching, and then search and click on the episode I want to watch. Sorry, but the fact that I can jump to the next episode with just a single click is the reason I just enjoy prime video a lot more (which is not very well designed in the first place!)
The current layout when an episode is being viewed.

HOW TO FIX THIS?

1.) Show all the episodes of the current season below the video player. When clicked on see all, all the episodes appear on a new pop up window and from there one can navigate to other seasons too

2.) Show a next episode button on the video player.

(L-R) 1.) Video player with te next episode button. 2.) When clicked on ‘See all’ on the previous scree, this pop up appears 3.) A drop down appears on clicking the season number so that the user can easily choose some other season too.
  • The channels tab is great, but…..I wish there was a filter at the top to choose the language also?
  • A similar problem with the languages tab, I can choose my preferred language (great), but I can’t choose whether I want to watch a movie, or a tv show, or which genre.
  • The lack of a filter is felt throughout the app. When I choose the genres tab, I can only choose the genre, and not the language or the type of content I want to watch, and I will have to look for my favourite show from a huge pool of content, or if I don’t know what I want to watch, well….good luck because It displays TV shows and movies from all the available languages.
Just adding two simple filters add the top will solve all the problems.
  • The weird continue section. Sometimes it shows up, sometimes it doesn’t. Bug? Won’t say so. Its been there from the very beginning because it shows up on the desktop website but not on the mobile app.

I would really be glad if hotstar and the super talented Mr. Gaurav Joshi could work on these things, and made their already existing great app even better. Since this is my first article, would love to get feedback, and also if you have something to add to this article, do let me know!

Peace!

📝 Read this story later in Journal.

👩‍💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.

--

--

--

Product Designer 🐝

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Notes from DevXcon SF 2018

Increase your conversion rate and revenue by optimizing your images.

Total Image size (JPG/PNG)

Ownership

Green + Digital= How You Do It!

Celestial Citizen Ep.

Key Web Design Trends for 2017

An Introduction into UI and UX and their differences

Case Study — Amazon Prime Video Redesign

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Divyanshu Nandwani

Divyanshu Nandwani

Product Designer 🐝

UX/UI Case: Service Central — Artisan hailing app

Boiling down to the Design, Information architecture, User flow, Wireframes and Design.

Case Study Miimosa: Ironhack Final Project

UX Case Study: Jago Last Wish

Design Thinkin Framework