Media consumption has taken some new turns in recent years. According to App Annie, TV viewers spent nearly 12 billion hours in the top 10 video streaming apps in the twelve months ending in July 2017.
TV audiences are rapidly quitting traditional cable and satellite TV in favor of mobile video streaming services, hitting some of the biggest US telecommunications companies – Dish Network, DirecTV, and AT&T – at the very heart. According to Fast Company, the TV industry saw its worst quarter in history in 2017, losing an estimated 72,000 pay TV subscribers.
Given the growing popularity of mobile video streaming services, we decided to find out how to make a video streaming app that includes some of the coolest features of the modern video streaming giant Hulu.
Born in 2007, Hulu is an on-demand video streaming service owned by Hulu LLC, which is a joint venture of Walt Disney, Time Warner, 21st Century Fox, and Comcast. Hulu was originally launched as a way for partner TV networks to stream their media content to computers; today, however, the service is present on almost every streaming device – from set-top boxes to smartphones.
Because of its close relationship with popular TV networks (Big Ten, E!, NFL Network, Esquire, and others), Hulu now offers more TV content than any other streaming service. Hulu even spices up their TV offerings with access to movie catalogs from their partner studios as well as their own Hulu original content.
So how can you develop a video streaming app like Hulu? To answer this question, let’s start with an overview of the feature set for a Hulu-like app and then proceed by discussing Hulu’s approach to business.
Onboarding is probably the most important part of a video streaming app since it not only welcomes and guides your users but also defines their media experience. So how does Hulu do onboarding?
When you first log into Hulu, the application guides you – whether you’re an existing customer or a new user – through an onboarding experience designed to tell you more about the app’s functionality and adjust the app to your preferences. After giving a few tips on how to use the application, Hulu welcomes users to go through a number of screens where they can share their TV and movie interests. For example, users can browse through categories – Crime & Justice, Sci-Fi, Late Night, Action & Adventure, News & Headlines – to pick genres they’re interested in.
If you want to let your users track favorite channels, the onboarding experience can let them set that up as well.
As usual, there are two ways to register with the application: via email or through a social account (Facebook). If you’re going to provide movie suggestions to your users based on their friends’ recommendations – like Hulu does – then registration via Facebook is simply a must.
Mind you, onboarding can happen before or after registration.
The next logical step after registration is to offer subscription plans. Hulu offers “a variety of subscription plans, starting as low as $7.99, or $39.99 for Hulu with Live TV.” However, we’re not going to talk about costs and commitments here. Instead, we’re going to explore the technical side of the matter – how Hulu implements payment functionality.
Hulu provides several payment options. According to their official website, users can pay by credit/debit card or by PayPal.
You can use either Braintree or Stripe to let users pay for your service with a card. Both services provide a wide range of client- and server-side SDKs that allow you to integrate different payment methods (credit cards, debit cards, special-use cards, prepaid credit cards) for web and mobile apps.
Braintree is the only payment gateway that allows you to accept both credit cards and PayPal via a single integration, however. When PayPal is integrated via Braintree, your customers can click on a PayPal button designed exclusively for Braintree merchants and then enter their PayPal credentials in a new window or lightbox.
For iOS subscribers, Hulu makes it possible to pay for the service via iTunes. In this case, the billing is handled by Apple (using in-app purchases). Users of Amazon and Roku devices can likewise subscribe to Hulu and be billed directly by Amazon or Roku.
First of all, accounts let your users manage their personal data, emails, and passwords. Second, they let users manage their payment options right in the app. Third, accounts let users manage their email and app notifications, Fourth, and probably most importantly, accounts can contain multiple user profiles to keep track of each person’s favorite shows and display personalized suggestions about what to watch.
Since 2016, Hulu has allowed users to create up to six profiles per account to separate each user’s viewing history and watchlist. Moreover, users can also create accounts for kids that block inappropriate content.
What is the Home section and what can you stuff it with?
The Home section is where the customer journey begins. Simply put, the Home section highlights movies, TV shows, sports programming, and other categories of content, and is customized according to each user’s preferences (thanks to a complex recommendation algorithm). It’s a place where users can easily find the content they’ve already watched and love as well as get recommendations on what may be interesting to them (in the case of Hulu, these recommendations are found in the Lineup).
Possible subsections of the Home section are categories like Sports, TV, Movies, News, Featured Movies, and Original Content (if you have any) – this kind of categorization may be helpful for users who don’t have a particular show or movie in mind but want to watch something right away.
The Home section is also a great place to feature content provided by your sponsors. For example, Hulu has a Magic of Disney section where users can find the hottest offers from Disney.
One more convenient section on Hulu’s Home screen is Continue Watching, where users can find movies and shows they’re in the process of watching and can pick up where they left off. In Hulu, there’s also the My Channels section, which shows content from users’ favorite stations.
If you want to take your users’ media consumption experience to a new level, you can let them customize the Home screen by adding or removing sections. For example, some users may be huge fans of sports shows and movies but at the same time may not want sections for News or Kids. A huge list of default categories creates nothing but noise. Moreover, these sections can be randomized, so users end up swiping endlessly to find what they’re looking for. Hulu could really work on improving their home screen, though.
Search and exploration
The Search section can help users find channels, movies, and shows. It might also show trending searches. Remember that your search functionality should be intuitive and user-friendly – ideally, it should be fine-tuned with autocorrect and autocomplete suggestions so your users don’t need to spend a lot of time recalling and typing in titles instead of enjoying the movies and shows themselves.
Algolia is a nice tool for implementing search in your TV and movie streaming app (by the way, they have a sample movie search engine on their official site). You can use the Algolia library to build robust, typo-tolerant, and predictive search that provides an excellent user experience.
Algolia cares about the developer experience as well, giving developers the opportunity to apply the library to different types of apps both for web (Vue, React, JS, and others) and mobile (Android, iOS).
The Watchlist (or My Stuff, as Hulu calls it) is a home for everything your users want to keep track of. Users can collect things they find interesting (movies, shows, channels, networks) by adding them to their watchlists.
Hulu also organizes the content you’ve already watched and the content that you haven’t finished. The Expiring category contains episodes that are expiring very soon so you know which movie or show you should devote your attention to first.
Hulu lets you record shows that are airing live to your personal cloud-based digital video recorder (DVR). But why not use local storage?
Saving content in the cloud has one great advantage over local storage – your users won’t be limited by their hardware capabilities, meaning that they don’t need to worry about how much space they have to save their recordings.
For businesses, offering DVR functionality may significantly increase their revenue. Hulu provides this feature at an additional cost of $14.99 per month. For customers, it provides the luxury of accessing their content anywhere, anytime, and on any device.
Hulu allows users to send a “picture” from your phone to a bigger screen (your TV set, for instance). This feature is known as wireless screen mirroring. Wireless screen mirroring involves sending information from your computer or mobile device to a TV screen or a monitor via Wi-Fi. So how can we implement this functionality?
The first way is to use the Google Cast SDK (which is designed to create applications that support Google's Chromecast HDMI dongle). This option enables developers to extend their Android, iOS, or Chrome apps to stream video and audio content to a TV set or sound system, in which case the app becomes a remote control to manage playback.
The second way is to enable screen mirroring using AirPlay (with Media Player APIs), which is basically an alternative to Google Cast that works only with Apple TV and supported iOS apps (and, surprisingly, certain HTC devices).
Many of your users won’t have unlimited mobile data plans or constant access to Wi-Fi, which is why you should let them choose between several video qualities. For example, you can provide low, medium, and high-quality streams so users can manage their streaming experience according to network conditions to stay connected to your service anytime and anywhere.
Multilingual audio tracks and subtitles are also very important if you want to reach a wide audience. For example, you can let your users choose between several of the most popular languages (or any languages spoken by your target audience) for both audio tracks and subtitles. This feature will also be helpful for users who are trying to learn a foreign language with the help of movies and TV shows.
You should also give your users the opportunity to rate and comment on the shows and movies they’ve watched to know what to expect from one or another movie or show as well as to share what they like (or dislike) on social networks. Not only does sharing make your app more social – it also works as a free promotional tool.
As of today, Hulu partners with a number of networks and mass media companies to deliver high-quality content to their audience. These companies include The Walt Disney Company, the BBC, Showtime, and 20th Century Fox. This approach allows Hulu to compete with services like Netflix and Amazon, which are focused more on creating original content than on licensing video from huge corporations. Recently, however, Hulu has also decided to pour more energy into creating original series.
According to Variety, Hulu spent around $2.5 billion on content in 2017. The streaming service, which won its first dozen Emmy nominations for its original series The Handmaid’s Tale in 2017, is planning to launch seven new original series in 2018.
Hulu’s investments in original content have proven once more that providing an entry point into the world of on-demand TV is not enough to attract prospective subscribers. These days, it’s very important to provide unique, high-quality content that users can’t find elsewhere. In other words, original content is what drives the demand for video streaming services.
Hulu Live TV
Original content, however, is not the only way Hulu is attempting to attract users. In 2017, the company also launched a live TV service that has the ambition to surpass live TV streaming giants like Sling TV, Vue, YouTube TV, and DirecTV Now.
Hulu’s service offers live streams from more than 50 cable channels, including ABC, CBS, and Fox, as well as a number of channels owned by Hulu’s partners 21st Century Fox, The Walt Disney Company, and others.
At the moment, it’s unclear how many subscribers have signed up for this service, but last year the company had 12 million subscribers to its on-demand offering according to TechCrunch.
As you might have already guessed, Hulu’s monetization strategy is built around subscriptions (in-app purchases). However, like any other broadcast television business, Hulu’s well-being also depends on revenue from its sponsors. That’s why Hulu inserts ads in all on-demand videos. These short video spots are placed before, during, and after videos, as well as during natural commercial breaks.
It’s known that Hulu splits its ad revenue with content providers and distribution partners. Unfortunately, there’s no precise information on how exactly Hulu distributes this revenue, though some older reports (from the beginning of 2010) claim that Hulu was at the time giving about 70 percent of its ad revenue to content providers and about 10 percent to its distribution partners for videos shown on their websites.
If you’re interested in finding out more about Hulu’s technology stack, you can check out this article by Andrew McVeigh – Hulu’s Principal Architect – in which he shares valuable insights on Hulu’s architecture, databases, libraries, and the languages they’ve used to build and constantly manage the application. Andrew promises there are more secrets to come.
Finally, here’s another great read on Netflix’s (Hulu’s main competitor’s) technology tricks that make the video service run (never mind that this article is a bit dated, as these approaches still work well).