ZEE5

About ZEE5

ZEE5 is a streaming platform that operates on both a subscription-based model (S-VOD) and an ad-based video-on-demand model (A-VOD).

The platform offers online streaming of films, television programs, Originals, Live TV, music, and much more, including content produced in-house. ZEE5 has launched content across twelve languages in India, available on Web, Android, iOS, Smart TVs, and other devices.

Problem statement

ZEE5 needed a mobile app as well as a responsive website to improve their subscription model and increase users on both the Subscription-based Video on Demand (S-VOD) and Ad-based Video on Demand (A-VOD) platforms.

The existing streaming experience across various devices was cluttered and cumbersome, making it difficult for users to navigate and find content seamlessly.

We were engaged to highlight crucial services and functionalities that matter most to users, and to create an intuitive user experience that is equally exciting and engaging.

Challenges

Solution

We decided to create an app for both web and mobile, where users can spend less time choosing and more time enjoying the content they love.

1. Display relevant content based on the users' demographics, enabling them to find and stream the right content quickly.
2. Collate content from international and regional streaming platforms, bringing everything together under one roof.
3. A unified search experience with both voice and text input across all platforms, including Live TV, shows, and more.
4. A standardized level of recommendations across platforms, built upon and enhanced by the recommendations provided by the streaming platforms.
5. A dedicated settings section to easily manage all subscriptions and payments.

Design process

Our approach to breaking down large projects into manageable chunks. We use this process to define the steps needed to tackle each project and hold onto all of our ideas and sketches throughout the process.

Research

User research

As part of our user research, we examined data to understand usage patterns on the website, identified problem areas, and devised a plan for improvement.

Qualitative research

We interviewed 4 to 5 users to understand how they access streaming services and manage subscriptions before watching a movie or show. We also explored their need for a better overall experience. Through qualitative research, we were able to uncover key user problems and needs. Below are some of the questions we asked.

User personas

A user persona is a representation of the goals and behavior of a hypothesized group of users. In most cases, personas are synthesized from data collected from interviews with users.

User experience mapping

The Experience Mapping method helped our clients understand the experience a customer has with their product or service. Using this method, we were able to identify and optimize key customer touchpoints to deliver a better overall experience.

User flows

User flows easily communicate the flow of the product to the stakeholders and provide a general view of how the interface we’ve created is intended to work in its most efficient form.

Wireframes

A wireframe is a low-fidelity, simplified outline of a product that focuses on structure and functionality before visual design.

User interface design

We followed the ZEE5 brand styles and guidelines — including imagery, colours, iconography, and typography — and designed the app for iOS, Android, and Web.

Design system & Style guide

We created a comprehensive design style guide from scratch for the app and web platform, defining reusable components and design standards. This ensured consistency across development and design teams while streamlining the implementation process.

What we did

Subscribe button

The home screen is the landing screen for the user post-on-boarding, registration and subscription. There will be subtle differences in the landing screen for a subscribed and a non-subscribed/ guest user. For non-subscribe/guest users there will be a subscription teaser in the top navigation and a ‘GET PREMIUM’ option in the carousel. These are not displayed for the subscribed user.

Advertisement banner

This will be shown only to unsubscribed/guest users. On tapping this banner their subscription journey will begin.

Select plan

This step displays various language packs adjacently, there by giving all the same priority. To get a discount on subscription rates users can apply a promo code. Depending upon the selected pack the user can choose the duration of the subscription.

Account Info

Post pack selection, users are prompted to add the account details such as email ID, details of social logins (example: Facebook) as well as the mobile number to be used for verification.Once the user adds his/her mobile number they receive an OTP to confirm the same.

Payment

At this step users can check the account summary and choose the mode of payment. Once they opt to pay users can get a receipt and an option to download an invoice. The app asks other ancillary information such as address and secret questions to aid in account security.

What we achieved

Post the redesign, ZEE5 has witnessed the following positive impact in subscription and ad revenue.

What did I learn

This product was built from scratch and designed across different breakpoints, ranging from large TV screens to small mobile devices. This project helped me greatly understand how online video streaming platforms work. During the design phase, I learned about different device breakpoints, image and video ratios, and much more.

Throughout this project, I came to realize how video streaming platforms have transformed the internet market. Nowadays, video streaming is no longer limited to OTT media alone — I can see how online education has e volved as well, with people learning and educating themselves through these platforms.