ZEE5

Designing the new OTT platform for mobile, web & TV

  • My Role

    My Role

    Senior UI Designer and User Research

  • Tools Used

    Tools Used

    Adobe XD, Sketch, Adobe Photoshop, Adobe Illustrator

  • Duration

    Duration

    Twelve week sprint
    3 months

  • Team

    Team

    1 UX Designer
    2 UI Designers

  • My Contributions

    My Contributions

    UI Design
    Design Presentation
    User Research
    Prototyping
    Interaction Design
    Animation

About ZEE5

ZEE5 platform functions on a subscription-based streaming service(S-VOD) and Ad-based video on demand (A-VOD).

The platform offers online streaming of films and television programs, Originals, Live TV, Music, etc. including those produced in-house. Zee5 has launched content in India in twelve languages available on Web, Android, iOS, and Smart TVs, among other devices.

Problem statement

Zee5 needed a mobile app as well as a responsive website to improve their subscription model and increase users on the Subscription-based Video on Demand and Ad-based Video on Demand platforms.

The existing streaming experience across various devices was clutter and cumbersome.

We engaged to highlight crucial services and functionalities that are important to users and create an intuitive user experience that is equal parts exciting and engaging.

Challenges

challanges

Solution

We decided to create an app for web and mobile where users can spend less time on choosing and more time enjoying to stream the content.

  1. To show the relevant content as per the users’ demographic to stream the right content fast.
  2. Collate content from international and regional streaming platforms under one roof.
  3. One search with voice and type for all platforms, like Live TV, shows, etc.
  4. The standard level of recommendation across platforms, which is built over the recommendation provided by the streaming platforms.
  5. Settings to manage all the subscriptions and payments.

Design process

Our approach for breaking down a large project into manageable chunks. Use this process to define the steps needed to tackle the project, and remember to hold to all of out ideas and sketches throughout the process.

design-process

Research

User research

As a 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-5 users to understand how they access streaming services over subscriptions before watching a movie/show. We also found about the need to experience. By taking the qualitative research, finding user problems and needs. Below are some questions we asked.

user research

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 personas

User experience mapping

Experience Mapping method helped our clients understand the experience a customer has with their product or service and with this method we have identified and optimized the customer touchpoints for a better experience.

user experience mapping

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.

user-flows

Wireframes

A wireframe is a low-fidelity, simplified outline of your product.

wireframes

User interface design

We have followed the ZEE5 brand styles and guidelines like Images, Colours, Iconography, Typography etc. and designed the app for IOS, Android and Web.

UI-design-11

Style guide design

We built the Design style guide from scratch for the new App and Web. We defined all the reusable components and design guidelines. 

We defined design guidelines for the Dev team and in-house design team so they can adhere to the guidelines and develop the design in a consistent way.

styleguide

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.

mobile-image

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.

impact-data

What did I learn

The product is built from scratch and designed across different breakpoints like TV to small mobile devices. This project helped me a lot to understand how online video streaming platform works. In the design phase, I learned about different device breakpoints, image and video ratios, etc. 

Through out this project I came to know that how video streaming platform has changed the internet market. Now a days video streaming platform is not limited to only OTT media, I can see how online education has changed and people are learning and educating themself through this platform.

Product is live on