My Projects

TVFPlay caters to all those who want to have a premium content experience, but cannot find anything worth watching in the traditional channels.

My Role

User Research
User Interviews
Journey Mapping
Wireframing
Prototyping
Design & Documentation
Interaction Design
UAT & Dev Support

Platforms

Android
iOS
Web
Mobile Web
Apple TV
Android TV
Fire TV

Year

May 2016 - Jun 2020

Problem

Consuming content is about choice. The question we tried to answer is why should people come to TVFPlay to watch content and not on YouTube. Apart from the obvious content quality & technology angle, are there any product innovations that we can do to differentiate ourselves from the herd? How do we create the FOMO?

Key Drivers

As the density of the online content increases and consumers are overloaded with choices. Since TVF is known for it's content, getting users to visit the website or the app to watch any new show or standalone video was never going to be a challenge. The ability to discover and recommend deeper content was the key to success along with the video player user experience. I based my designs to deliver upon the following areas.

Mood Search

Due to our limited content availability, we needed an unique method for user to search for content. Based on some earlier studies, we hypothesized that interest in a search task would be positively correlated with the current mood.

Personalization

Offering users with smart recommendations based on their watching habits while enabling tailored content consumption within the context of their lifestyle.

Download & Offline

Downloading content was identified as the primary user behaviors. One tap navigation to the downloads module alongside the offline downloaded content browsing functionality was the key to user satisfaction.

How was the web content consumption back in 2016?

Before getting started, I wanted to get a clear overview of who our users are, what are the current behaviour patterns and their motivations. I also wanted to understand the current competitive paradigm. Here are some research techniques I used for doing so.

Method #1: Competitive analysis

I compared the live TVFPlay website with the likes of Netflix, Fullscreen, Hotstar, Hulu, Voot, & Mubi using common factors such as the key features, access, login, navigation, content browsing experience offline/online & a lot more. I also did the same exercise for the landing page & the video player.

Method #2: User Interviews

By performing remote user interviews, I learnt about the existing user behaviors for the original content discovery. Findings included studying device usage, existing webseries market and user preferences for watching shows. Some of the learnings are shared below.

Method #3: Reviews on app stores

I went through thousands of reviews and comments left by users on Play Store and Apple Store, and further categorized them under buckets and highlighted them in terms of importance. This was some crucial feedback that helped me identify various pain points and areas of improvement.

Method #4: Usability review

I involved a few of my design friends to help me with the expert usability review. Key parameters assessed during this study were related to the website features/functionalities, homepage design, navigation, search, control/feedback, forms , performance etc. Some of the learnings are shared below.

“About 90% of users felt that they have already watched all the TVFPlay videos that are currently on the app, so nothing “New” to watch there”

Well, that does sound scary but unfortunately it wasn't the only issue that surfaced during the research phase. There were a number of issues related to the website, video player, download, offline mode, content discovery, notifications. The live app was designed by a handful of engineers so there was no UCD or design thinking involved. Since our engineering was solild, the product was functional. We had to go back to the drawing board & start from the scratch. Thankfully we had some kick-ass product managers who used the research to draw a product roadmap that included the website revamp, android & iOS app redesign, new app for iPad & separate TV apps for Apple TV, Android TV & FireTV.

Study Report (.pdf)

Synthesis: Design variations

Based upon data from in-person interviews, competitive analysis and user reviews, I organized my observations and categorized them using a customer journey map. At TVF, we believed in creating a wide range of design variations. Our general process was iterating & circulating concepts with peers and building towards high confidence proposals, effectively prototyping and storytelling at various fidelity levels throughout the design sprint.

Balancing user needs with business goals

The initial user research uncovered various areas of opportunity, such as content personalization and discovery based on genres, moods, or a combination of the same. However, for the MVP, I kept in mind the business goals and organizational capacity and decided to focus upon some key areas, including simplifying user experience around user on-boarding, shows discovery and alerts management, and thereby, meeting user and business goals including key engagement and user retention, with a strong focus on personalization & easy discovery.

Brainstrom

Organize

Prototype

Our design process

Setting up the structure

I refined the concept with research outcomes in-line with our business goals and went through a few rounds of iteration using hand sketching.

Ideas to action

I sketched countless ideas and brainstormed various possibilities with my product team and created low-fidelity wireframes and prototypes to test. Usercrowd app was our go to tool for any static & dynamic prototype testing.

Creating Design System

A Design System was built to accommodate scalibility, so components can work well alongside each other, at the same time, render well on various device resolutions.

Dark color scheme

I intentionally chose a dark theme for the app since our users tend to engage in the app much later in the day, and in a room with dimmed lights, and thus a brighter theme would have been too harsh on the eyes.

Sketch symbols

I started by building a comprehensive components library within Sketch that would later reflect in various parts of the app, i.e., colors, typography, setting the grid etc. This included icons, buttons, form elements, error and empty states, show cards and content cards. For achieving vertical rhythm, I used an 8pt grid system (fonts set at 4pt, UI set at 8pt).

Interaction Design & Documentation

A solid documentation is the key to ensure the design gets executed as planned. Interaction design & documentation for each micro & page to page interaction goes a long way towards maintaining a world class design. It helps developers and also the decision makers to get a glips inside the designer's mind. I have been animating since my college days. The softwares and the process of animation have come a long way since then. I mostly use AE or Principle app to create the interactions and later document those. Here's is an example of an interaction documentation that is given to the development team alongside the PRD at the time of design handover.