Discovery Communication | POC
Role:
UI Designer, Motion Designer
Date:
Nov/16 - Dec/03 2015
Tool:
Sketch / Keynote
Platform:
Responsive Web across mobile and desktop
Project Overview:
For 30 years Discovery Communications has been satisfying curiosity and entertaining viewers with high-quality content. However, their digital streaming video websites offered poor experience causing low user engagement and poor revenue performance.
I collaborated with 2 Experience Designers to pitch a new concept. I worked on research, wireframe, UI design and motion prototype. This pitch successfully secured a phase 2, long-term engagement with the client.
—
Project Objective:
The goal of this POC is to create an experience that will drive more long form video watching; thereby increasing opportunities to advertising and drive revenue.
Current State:
- Each network has ownership of it's own site and content.
- None of these sites offer long from content.
- Discovery GO App is ready for launch to allow long form viewing, but is not yet plugged into web.
Desired State:
- A consolidated OTT experience that promotes content across all networks and enables extensive viewing of long form content.
- A template for networks to produce a branded experience.
—
Problems:
To begin with, we interviewed 3 Discovery Channel fans to find out their pain points of online watching experience:
- 1 - Users have trouble navigating on DC sites due to the unclear site structure & complicated nav bar.
- 2 - Banner Ads are everywhere, which result in an unpleasant experience.
- 3 - Users have trouble understanding the outdated pattern and interaction model.
- 4 - Users don't know where to watch long-form video (e.g. full episodes) online.
Due to the tight timeline, we prioritized the tasks to mainly focus on solving pain point 1, 3, 4 to provide a better browsing and watching experience.
—
Persona & User Journey:
We created a persona to reflect the target user - 30 to 40 years old Discovery fans who have limited access to TV, so they have to watch shows online. They are medium tech-savvy. They need an easy-to-use website to watch their favorite shows.
For this POC, we had a major constraint - The number of full episodes on web was really limited at that time. We decided to focus on a clip-based flow, but providing clear access to full episodes on Discovery GO.
—
Concept:
The concept "Inspiring Wonder" is a web platform that encourages discovery and video consumption.
- It bridges long-form (e.g. full episode) and short-form (e.g. clip) videos.
- It has a clear hierarchy, displaying primary content and metadata up front.
- It is modern, modular, flexible and responsive. Can be easily applied to all individual channels.
—
Wireframe:
The templates are scalable, modular and flexible across devices. They can also be customized to meet specific needs of each channel.
- Templates are built in an open and modular way.
- Content providers can customize units to accommodate the need of each individual market & channel.
- A responsive grid system lets content scale across devices.
—
UI Design:
Journey 03: User lands on Show page
1. Global Nav: Since Global Nav is less frequently used, it is simplified to be a hamburger menu with 3-4 promotional CTAs exposing outside of the hamburger. Each Channel can customize the exposing items based on business needs. The simplified Global Nav is consistent across all the pages.
2. Show Nav: Show Nav is directly tied to show description to avoid any confusion. It appears at the bottom of above the fold area, will snap to top when user scroll past it.
3. Featured Content: Users can access featured videos without scrolling.
4. Video Category Template: A clean, modern and flexible grid system allows each channel to customize the number, the name and the filter of video categories. Video cards are all in 16:9 ratio.
5. Category Filter: Users can filter each category to find content more quickly.
6. Full Episode CTA: This primary CTA indicates that full episode is available on Discovery GO.
7. Playlist Template: A template pattern that allows each channel to provide curated playlists.
8. YMAL Template: A template pattern for recommended content.
Journey 04: User check out a clip
1. Video Player: This video player design is to optimize clip watching experience.
2. Related Clips: Users can find related clips in the video player.
3. Full Episode CTA: This primary CTA indicates that full episode is available on Discovery GO.
Journey 05: Browse while watching. Video player decreases in size and is sticky at the top.
1. Sticky Video Player: The video player will decrease in size and be sticky when users scroll. This allows them to browse other content without losing the video player.
Journey 06: Connect to full episode
1. Full Episode CTA: Users can click this primary CTA to watch that full episode on Discovery GO.
—
Video Player Prototype: