Background

Discovery Communication needed to redesign the user experience across 9 websites related to their primary cable TV networks, with the primary goal of introducing long-form video content and optimizing user flows in a modern and responsive way. TLC.com was the starting point to create a responsive and modular visual system across all of their websites.

Client

Discovery Communications
New York | USA

Role

Product Designer

Platform

Responsive Web (mobile, tablet, desktop)

Tools

Sketch
inVision
Zeplin

Product Vision

Create an experience that will drive more long-form viewing; thereby increasing opportunities to show advertising and drive revenue. Providing linear experiences which can be an interface to a viewer's favourite shows across any DC network:

  • A consolidated user experience that promotes the breadth of content across DC networks and enables extensive viewing of long-form content such as binge-watching series.
  • A template-driven capability for networks to produce a branded experience on their site that feeds into the viewing experience and encourages social engagement across video and brand-specific tools and utilities.

The Goal

ᐧ Laser focus on driving full episode views.
ᐧ Episode specific pithy text and imagery to highlight and “sell” substance of content offering.
ᐧ Drive authentication throughout the site — make it easy and ubiquitous.
ᐧ Introduce users to new TLC offering — messaging around availability of full episodes.
ᐧ Engaging imagery to whet appetite for cinematic experience.
ᐧ Provide ways for producers to promote non-video, blog, and linear promotional content.
ᐧ Create a flexible, template system that can be applied across brands.

User Behaviour

Both user intent and business opportunities can align in the dynamic behavioural diagram. The concept is that users’ intents are not static and fixed, but rather are dynamic and shifting. This is something that can change multiple times within a session. Having a more targeted modelling structure allows us to more effectively target user behaviour and serve content and experiences in such a way that reflects the users’ shifting intentions.

User Flows

One of the main needs was to provide ways for producers to promote non-video, blog, and linear promotional content. Organizing focus groups gave us a clear view of how the website visitors are consuming content and from where they are visiting the website.

User Research

Interviews with users provided insight into real perceptions and motivations. Rounding out the conceptual aspects of the offering with user insights to develop a deeper understanding of users’ attitudes, beliefs, and motivations. Primary topics of the research were: Watching habits, Platform usage and Short and Long Form Consumption.

Information Architecture

Responsive Grid System

The grid system is designed based on Bourbon Neat Grid System. The column width and the gutter are calculated by percentage. Golden Ratio (column = 2.618 * gutter) is also introduced to this grid system to make it look elegant.

Wireframes

Modular Framework

For content-heavy pages like Homepage & Show page, the amount of content varies based on two parameters: 1. content provided by each channel (e.g. How many full episodes are available online for this show?) 2. the level of user engagement (e.g. For first time user, only minimal amount of modules can be displayed due to lack of user data. For advanced users, a lot of personalized modules will be available. So we designed min, medium and max versions. The system is flexible enough for each channel to customize content. It also encourages users to interact more with the sites.Here is an example of how user engagement can change Homepage layout.

Visual Style

Modular Pages

Every page is constructed from a group of modules that are different based on the users watching behaviour and interaction with the content.

Cross Channel Templated System

Discovery Communications had the need to apply a modular templated design system across 9 channels, launching with TLC and Discovery Channel. Channels that should be also supported are: HGTV, Food Network, Investigation Discovery, Travel Channel, Science Channel, DIY Network, Cooking Channel, MotorTrend
Destination America, American Heroes Channel and Discovery Life.

Mobile First Strategy

Designing the website for smartphones, tablets and mobile devices took priority over desktops. Interconnectivity and convenience help to make smartphones indispensable and can help foster greater engagement among users. The data and information that smartphones collected were used to personalize the experiences for the users, which led to better user experience and greater revenue for the customer.