TV Guide Android App – Abdus Salam

TV Guide makes TV decision making easier, faster and more informative, making it the best place to discover what to watch, where to watch, anytime, anywhere. I led the ideation, strategy and design for its app across its Android and iOS platforms.

MY ROLE

User Research
User Interviews
Journey Mapping
Sketching
Wireframing
Screen Flows
Visual Design
Interaction Design

PLATFORMS

Android, iOS

YEAR

2017-18

Related: Design Systems for Multi-Platform Experiences

VIEW RELATED PROJECT ↗︎

PROBLEM

Today, TV is about choice, and for most of the viewers, there are a lot more choices than ever before. TV is now being watched in more than one place and being offered by more than one provider, and while this abundance of media content is good, the fragmentation of various sources and media devices has made it increasingly complex for users to discover and manage the content they are interested in.

KEY DRIVERS

As the density of the online content increases and consumers are overloaded with choices, the ability to find and access content across a myriad of services is crucial to the success of the app. I based my designs to deliver upon the following key areas.

UNIVERSAL SEARCH

A universal search that unifies content from multiple services and streaming providers (Netflix, Hulu, CBS, HBO etc.), providing a single point of entry to discover new content.

PERSONALIZATION

A watchlist that notifies users of any upcoming releases and content from services they are subscribed to, allowing curation of personalized content.

SMART RECOMMENDATIONS

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

What does the current TV landscape look like?

I wanted to get a clear picture of how our primary users went about discovering new shows and movies. In order to get a better understanding of their behaviors and motivations, here are some research techniques I used for the redesign.

METHOD #1:
QUALITATIVE & QUANTITATIVE DATA

By performing in-person interviews and conducting surveys, I learnt existing user behaviors for shows discovery and management. Findings included studying device usage, existing TV Guide market and user preferences for shows management. Some of the learnings are shared below.

METHOD #2:
USER REVIEWS ON APP STORES

I sifted through hundreds 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.

“Mobile respondents report higher levels of influence and are more dependent on their phones and social media”

The digitisation of TV has significantly changed viewing patterns, nature of content and its delivery. The interruptive ads of today have given way to more engaging content, as new technologies enable audiences to skip content that they don’t want to engage with. Certain programmes, however, still remain in linear form – including news, live sports and big events. Other than that, everything else is shifting to video-on-demand (VOD).

USER ATTITUDES TOWARDS KEEPING TRACK OF THEIR FAVORITE TV SHOWS (SURVEY)

SURVEY FINDINGS

“Genre selection and recommendations from friends & family topped the list of preferences for watching new shows”

A sample of the various set of questions asked from the participants is shared here. Items with the highest opportunity highlighted in red.

SYNTHESIS: JOURNEY MAPPING

Based upon data from in-person interviews, surveys and user reviews, I organized my observations and categorized them using a customer journey map. This helped me expose pain points and areas for improvement in the app along the entire user journey. It also helped spark discussions to help close knowledge gaps and acted as a catalyst for idea sharing and generation between team and stakeholders. Furthermore, I identified various touch-points by intent and task including aspects such as emotions and expectations.

BALANCING USER NEEDS WITH BUSINESS GOALS

The initial user research uncovered various areas of opportunity, such as content 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, discoverability for what to watch & where to watch, and watchlist gamification. The previous app also missed an editorial and discovery strategy. The redesign was an attempt to address all of these shortcomings.

BRAINSTORM

PROTOTYPE

ORGANIZE

(Left) Some shots of various brainstorming sessions and sketches from the project
(Right) A cat left in awe during a mapping exercise

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. I also came up with a revised and simplified information architecture that focused on content discovery, TV listings (by location and providers for both US and International regions), and easy management of shows.

IDEAS TO ACTION

I sketched countless ideas and brainstormed various possibilities with my product team and created low-fidelity wireframes and prototypes to test. The outcome was four distinct views: watchlist, explore (discovery), TV listings and settings (favorites and alerts management).

VIEW WIREFRAMES IN HIGH RES (PDF)

MODULAR DESIGN SYSTEM

TV Guide App 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

Traditionally, TV Guide has been accustomed to lighter themes, primarily because most of the content resides on the web. 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).

USER ONBOARDING

Watchlist is a core utility of TV Guide’s app — allowing users to add shows/movies and set alerts to be notified of any new releases. In order for users to get to up to speed with this feature, I designed an experience that was simple, yet fun! I took inspiration from Tinder style cards where users could swipe up to like a movie/show or swipe down to dismiss it. Any items that were liked were automatically added to the user’s watchlist. Why swipe left or right, when you can always thumb up or down!