Designing the new OTT platform for mobile, web & TV
Senior UI Designer and User Research
Adobe XD, Sketch, Adobe Photoshop, Adobe Illustrator
Twelve week sprint
3 months
1 UX Designer
2 UI Designers
UI Design
Design Presentation
User Research
Prototyping
Interaction Design
Animation
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.
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.
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.
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.
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.
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.
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 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.
A wireframe is a low-fidelity, simplified outline of your product.
We have followed the ZEE5 brand styles and guidelines like Images, Colours, Iconography, Typography etc. and designed the app for IOS, Android and Web.
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.
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.
This will be shown only to unsubscribed/guest users. On tapping this banner their subscription journey will begin.
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.
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.
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.
Post the redesign, ZEE5 has witnessed the following positive impact in subscription and ad revenue.
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