They wanted to
Develop a new redesigned and offline-supported platform to replace the existing Sony Liv website used for video on demand and live streaming content.
We helped them
Create a Progressive Web Application (PWA) with reduced page load times, offline functionalities, and a series of new features.
About Sony Liv
Sony Liv is a subscription-based over-the-top (OTT) streaming service operated by Sony Pictures Network. Media companies like Sony launch OTT services to realize the revenue and profit margin potential of digital distribution. The cord-cutting trend among millennials and people from all generations is what led Sony to launch Sony Liv in January of 2013. Sony Liv is the media streaming platform of the broadcast network Multi Screen Media (MSM), and it offers over 5,000 hours of content spanning across genres in multiple languages. The service is available in India and Pakistan, and Sony Liv plans to expand to other countries over time. Sony Liv’s app downloads exceed 109 million, and users view over 25 million videos on a monthly basis across all channels.
Problem
Sony Liv’s first version web application was good enough to acquire millions of streaming media customers, but it had performance bottlenecks that couldn’t be addressed with the frontend framework version implemented on their web application. Their original web app was built with AngularJS 1.0, which was outdated at the time, making changes and updates to the product hard to complete. Sony Liv wanted to upgrade to Angular 5, which was the latest version when we started our engagement with them.
To support Angular 5, our team had to rewrite the frontend, so Sony decided to design and implement a new user experience as well. The existing design and the overall user experience of the website were outdated and needed to be simplified to attract new customers and retain existing ones. Because this upgrade allowed Sony to access the latest front-end features provided by the Angular framework, Sony could implement Angular’s Progressive Web App (PWA) features to provide offline viewing capabilities. This upgrade allowed Sony Liv to offer an experience similar to competing services.
Solution
Our engineering team developed a PWA with Angular 5, implementing a new user interface while Sony LIV’s team worked in parallel to provide new feature requirements and refinements. We started by developing a prototype application in Angular 5 with offline capabilities like the ability to save videos to view offline. Once we demoed offline viewing capabilities from a browser, we proceeded to build the full-featured Progressive Web App.
Sony LIV had both legacy and new APIs, which weren’t properly documented to be useful while developing the frontend application. So, our engineers reproduced various flows from the previous Sony Liv website to mock the behavior of each API. Close to the release date we agreed to with Sony, the approved design assets were revamped, which meant dozens of features our team implemented no longer worked as expected with the new design. Our team rallied and fixed the bugs caused by the design changes to deliver the product in the agreed timeframe.
Throughout the development process, we used Lighthouse to monitor the quality of our code and identify potential performance improvements. Lighthouse is an automated, open-source tool for improving the quality of web pages. The Lighthouse report showed an average of 75 - 80 out of 100 for the app during various stages of development, which is a respectable score for a streaming media app.
Results
Sony Liv shipped with an initial page load time around 2 seconds, and because we built the applications with lazy loading, the bundle files were as compressed and as stripped as possible. Sony Liv witnessed a 3X increase in monthly active users (MAUs) after launching the PWA version of their web application built with Angular 5.
.webp)
