Video Streaming Platform the Hole

A Custom YouTube-Like Video Streaming Service for the Leading Producer of Online Content in Russia
Contents

Client

Medium Quality is one of the leading producers of online content in Russia and a member of Comedy Club Production — a Russian equivalent of Comedy Central and the largest producer in Russia. Medium Quality creates top-rated digital projects as well as projects on TV and in movie theaters. They also arrange world-class comic festivals, collaborate with the most popular artists and produce the best comedians in Russia. 

MQ have launched top-class shows on YouTube reaching a total audience of over 20 million viewers.

Project Idea

MQ had an idea of creating its own video streaming platform good enough to compete with YouTube. 

Their ambition was to have a video streaming service of their own that has a wide variety of content way beyond the format we are used to on YouTube. MQ were planning to have interactive trivia shows and series where viewers could pick a storyline the episode would follow. The plan was to engage the YouTube audience with this extraordinary content and gain new subscribers, thus expanding their own audience.

At the start of the project Medium Quality had 36 shows scattered all over YouTube: some of them were uploaded to large channels such as Labelcom, others — to personal channels of whoever was on the show. Therefore, there had to be a service bringing together all the shows made by MQ and providing the company with accurate statistics on each project.

Business Challenges

  • We had to develop a mobile app with UX of such high quality and tools so convenient that users would choose it over Youtube. The service had to be able to defy competition with Youtube and enable MQ to transfer a significant part of their audience to their own platform.
  • We needed to develop all the infrastructure required for the service to function: backend stable under peak load; customized CDN that will ensure fast data flow and not be demanding in terms of maintenance; an admin web interface to manage content and monitor statistics.

The Results

We have created and successfully launched the MVP version of the app and have been upgrading the product for a few months together with MQ. We are currently working on the retention rate, carrying out A/B testing, and looking for efficient ways to monetize the content.

The app is a success. The users are extremely happy with the UX, quality of the video player and how fast it’s response and download speed are. The resolution changes depending on how fast the Internet is and the video is cached. Videos can also be streamed to a TV. The mobile app has a user-friendly interface. 

The mobile app was developed on Flutter. Thanks to that we managed to reduce time to market and launch the product as soon as possible, cutting development time by 30%.  

Surf has created a platform along with the whole infrastructure: backend, CDN, administrative web interface enabling the client to manage the content and monitor stats.

Surf has developed for us a video streaming service, in which our users got access to more than 40 shows. Surf’s deep expertise in everything related to mobile development, the ability to work for a result and constantly improve the product, is surprising. Even after the release, we continue to work together on the application, update and improve it.
Roman Kolesnikov

Producer at Medium Quality

The Solutions

Comprehensive Product Concept

We had to answer the following questions:

  • What extra capabilities can we offer users (what features should the app have) so that the fans choose to watch their favorite shows in our app?
  • How do we promote the app? Where will the users learn about our app and download it?
  • How do we retain the users after they download the app and what further ways to monetize the app can there be?

In order to answer these questions we established user characteristics and built a Customer Journey Map for the audience MQ has together with their team.

Each touchpoint was followed by respective actions of the clients, the things they like the most as well as constraints and ways to get around them.

As a result we have designed a product the users like so much they choose it over Youtube. It has a friendly interface and many extra options Youtube doesn’t have.

We even found ways to monetize the app. One of them is paid previews, i.e. users can pay to watch a show a week before its official release on Youtube.

Shorter Time to Market and a Chance for Quick Product Growth

As with any other startup, it was crucial for the MQ’s new service to cut the time to market and launch the product as soon as possible. We did just that with the help of a cross-platform technology — Flutter. Thanks to that, time of development can be cut by 30-40% since the framework makes it possible to write a single code for both iOS and Android. 

Moreover, writing apps on Flutter is 40% cheaper than native development, it takes 50% smaller teams and results in 50% less bugs. 

A service built with Flutter has an equal quality of code and animation, the latter being particularly important for the client.

Latest Tech Stack for the Back End

The back end was written in Kotlin, Spring Framework, Kubernetes. It’s a modern Java stack we use to develop most of our back-end systems. 

Web servers and CDNs (content delivery networks) are hosted in Russia, which gives us the following pros:

  • Maximum response rate — the closer content is to its consumer, the faster a product works.
  • Local infrastructure is utilized, that’s why potential Amazon Web Services and Google Cloud blocks or friction are of no threat to the service.

Load Testing: Safety Buffer

According to our estimates, the servers of The Hole should be able to process 25 thousand requests per second in order to cope with the expected load. To check the platform for stability, identify areas of concern, and build a robust infrastructure we used phantom — a load generator — together with Yandex-tank. The choice fell on phantom because it managed to provide the number of requests per second we needed without consuming too much of the hardware resources.

We carried out load testing and measured how performance of microservices deteriorates under load. Thanks to that we managed to detect and eliminate several “bottlenecks” even before the project was launched.
In order to estimate an expected load under varying conditions, we also monitor back-end response time on the client side. The app utilizes Firebase Performance Monitoring to measure response time of each API request.

The result: the back end did an excellent job of processing a routine load of 25 thousand and had no trouble handling a load of 50 thousand requests, which is twice as much as planned. The client is always aware of any areas of concern within the app and of ways to optimize it.

Powerful Admin Panel

We’ve developed a web app to manage content using React + Ant Design and made the control panel look as much like YouTube Creative Studio as possible. This way it can be more familiar to the client’s content managers uploading the content to both media. Similarly to Creative Studio, the admin panel in The Hole enables you to publish videos, edit the descriptions, send user notifications, and monitor viewer statistics in real time.

Design and Animation

Medium Quality came to us with an idea — they neither had a name nor branding for the project. So first off we created a general design concept. 

Later on, the project got its name — The Hole — and branding. To reference the name we used animation.

As a result when you open the app it looks like this:

The Hole branding in the app interface

A Player That’s Easy to Use

The player was something we were particularly focused on. It had to be at least as good as the Youtube player. In Flutter we had no trouble integrating a video player SDK. 

The new MQ service now has a player that has extremely high download speed and response rate — resolution can change depending on how fast the Internet is, videos are cached, users have no troubles with downloading speed or skipping back and forward, and are pretty pleased with how HLS videos are streamed. What’s more, we gave the player a custom UI.

The video navigation we implemented is fast and smooth. We added a “skip forward” button set to 30 seconds and a “skip back” button set to 10. The reason behind the timing is users skip forward when they’re bored and skip back to look at something again or listen to a phrase that could have come up a few seconds ago.

Handy player offering recommendations what to watch next

Comprehensive Data for User Analytics

In order for user analytics to be fully comprehensive, we’ve integrated three analytics systems, each with its own unique features and strengths, instead of one:

  • Amplitude Mobile Analytics is a service with a user-friendly interface and a wide range of options to plot charts based on enormous amounts of data analyzed.
  • AppMetrica helps identify sources of traffic so as to understand where your users come from — Instagram blogs, advertising integration or descriptions under the YouTube videos.

We also use Firebase Analytics for A/B testing, to which a lot of attention has been paid in this product. We’ve always got a few hypotheses to test and run experiments that help improve the UX and user retention.

Access and manage episodes on the home screen
Request a free consultation with our experts & estimate your project
Estimate Project
Estimate project