The Hole

Video streaming platform

Client

Medium Quality

Is the largest publisher of the Russian YouTube producing a wide range of shows.

Challenge

Creating an Individual Video Streaming Platform

It’s 2020, and while content is consumed and created on mobile devices, YouTube still doesn’t provide a vertical video option.

Medium Quality wishes to create a streaming platform for content that can easily be watched on a mobile phone. For instance, mobile first shows originally filmed vertically. Ordinary horizontal videos should automatically be cropped to fit the vertical format when a phone is rotated.

Moreover, MQ needed to go beyond the scope of YouTube to bring as much diversity into their content as possible: besides the usual videos there had to be interactive quizzes and series where viewers can choose how the plot turns.

Launch of the app was timed with the season 3 premiere of “Vnutri Lapenko” (Russian, “Inside Lapenko”). Expected load at release was 20% of the show’s audience on Youtube.

Solution

Groundwork

We ran a CJM workshop where we built a user journey map together with the MQ team describing actions and psychoemotional states of a client, aha moments, constraints and ways to reduce them with the future product at each touchpoint.

As we went along, we worked out a monetization model — paid screenings of the show a week before its official premiere on Youtube.

UX/UI Development

The project had no name or branding when we got started so at first we created a general design concept.

Then the project got its name — The Hole — and branding. We referenced the name with the help of animation in the UI design, for example, by screen transitions.

The Hole branding in the app interface

We started our work on user experience by examining UX of other video players. An insight we came across was that the “skip forward” button should be set to 30 seconds, while “skip back” should be set to 10, the reason being that users skip forward when they’re bored and skip back to watch or listen to something once more.

Handy player offering recommendations what to watch next

The Choice of Flutter

MQ have high demands for user experience: smooth UI and screen transitions were crucial to the app. That’s why we suggested developing it using a cross-platform technology — Flutter: it’s good at providing smooth apps and animations in addition to saving you 40% of the budget compared to native app development.

The only thing we were doubtful of was whether Flutter could cope with a video player. That’s why within two days we put together a demo for iOS and Android, checked playback and skip forward/back speed in HLS-videos and made sure it was possible to build a custom UI with additional controls based on a player plugin. It all worked out: clearly, no issues were to arise.

Back-end Development

We chose Kotlin, Spring, and Kubernetes to develop the back-end. 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.

  • Maximum response rate: the closer content is to its consumer, the faster a product works.
  • Potential AWS and Google Cloud blocks are no threat to the service.

Back-end Optimized for Expected Load

According to our estimates, the servers of The Hole should be able to process 25 thousand requests per second to cope with the expected load.

We’ve 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. Having been optimized, the back-end can steadily cope with normal loads.

In order to estimate an expected load under varying conditions, we also monitor back end response time at the client end. The app utilizes Firebase Performance Monitoring — measuring response time of each API request. That way we can identify areas of concern in production and know where improvement is needed.

Web-app

We’ve developed a web app to manage content on React + Ant Design. The app enables the company to publish videos and send user notifications, add meta-information and gather real time viewership statistics.

Page of a show in the web app

Analytics

We had to implement real time analytics and find a way to create customized reports and display them in the web app. We couldn’t use standard analytics systems: they present data with a delay.

In order to receive real time analytics on video content we had to deploy our own storage for user events. So we chose the cloud OLAP database by Yandex — ClickHouse. You can find this DB under the hood of AppMetrica.

The app submits user events on interactions with the videos to ClickHouse, while all the other user events of interest go to AppMetrica and Firebase Analytics. This is a standard choice of analytics we use in other projects as well.

Access and manage episodes on the home screen

Beta Testing

Before launching the service we provided our app to a test group. MQ published an Instagram post encouraging followers to take part in beta testing and that’s how we got 5000 beta users.

Results

  • We’ve become a reliable tech partner for the client
    MQ — are creative TV crew and producers. Cool creative guys who brought Comedy Club and successful projects on Russian TV and YouTube to life. But they had never made IT projects before that, that’s why we were the ones to help with technical matters and design. The resulting project became the meeting point of our two worlds. Both we and MQ are proud of it.
  • We finished a project in a very short time
    At first we told the client that it would take a month to design the app and three months to implement it. And that’s how it turned out to be: we’d met the deadlines. Now we know for a fact how long it takes to create your own YouTube.
  • After its release the app managed to cope with the load
    The app has 5000 beta users.
  • The service has a long-term roadmap
    Within the first week of its beta-release users shared dozens of cool ideas on how the project can expand. We’ve arranged for systematic feedback and prioritized new functions about to be implemented together with the client
  • We’ve met the challenge and created a YouTube
    It was an exciting and difficult challenge for our team of engineers. Architects and developers really enjoyed working on it and are now looking for more😉
Request a free consultation with our experts & estimate your project
Esimate Project
Обсудить проект