Jieyu Xiong

 

DirecTV OTT Platform

 


Role:

UI Designer, Motion Designer

Date:

Jan/13 - Mar/08   2015

Tool:

Photoshop / After Effects 

Platform:

iPhone / iPad

Phase 1: Concept Design 

Project Overview:

DirecTV provides their service to almost all the platforms and devices. While this allows their products to be available to a wide audience, it also makes their products hard to maintain and become inconsistent. DirecTV started the OTT project to create a design language that unifies web and Apps. 

  • In Phase 1, I worked on motion design to showcase a new concept - the Wave. 
  • In Phase 2&3, I executed Home Page, Show Page and Video Player Page designs on iOS and web. I also helped developers to code an interactive prototype.


Concept:

The concept that Tigerspike proposed is: the Wave - A streamlined experience that is fast, better and smarter. I did several motions to physicalize the interactions.

(Motion Example)


Motion Design:

DirecTV design team applied a new design language to our concept based on more specific business requirements and considerations. Inspired by wave metaphor, I created motion designs to let users browse through layers of content more seamlessly.

The motion demo below includes Pinch to Zoom, Scroll to Navigate, Tap to View, Hold to Show and some other basic gestures and interactions.

 


Role:

UX Designer, UI Designer

Date:

Jan/13 - May/01   2015

Tool:

Sketch / InVision

Platform:

iPhone / iPad

Phase 2: Home & Show Page Design [tablet & mobile]

Project Overview:

Although DirecTV already had the basic system and primary pages established, there were still a lot of factors and conditions we needed to work on together to bring this massive project to life. Because of their stakeholder, development team and product team review cycles, we worked on one area at a time. 

In this project, I collaborated with DirecTV design team to explore Show page and Home page design for both first time and return users. 


Delivery Framework:

In order to get DirecTV's stakeholder, development team, product team and design team aligned on the same page, I collaborated with a senior designer to formalize the delivery framework:

  • Define the problem
  • UX Background Research
  • User Flows
  • Initial Ideas
  • Low Fidelity Prototype
  • High Fidelity Keyscreens
  • High Fidelity Prototype
  • Documentation & Presentation


1. Define the Problem

  • Difficult to visually distinguish between a series-level and episode-level view.
  • A lot of information is repeated.
  • Difficult to know what information is at which level.
  • Visual design and motion are outdated.


2. Competitor Research


3. User Flow

We focused on the happy flows, the most common flows that utilized all the primary features per client's request.


4. Initial Ideas

We worked on some initial ideas that would provide users a simple way to browse content and take actions. 


6. High Fidelity Design

Show Page - First Time User

Show Page - Return User

All Episodes

 


Role:

UX Designer, UI Designer, Motion Designer

Date:

May/01 - Oct/06   2015

Tool:

Sketch / Omnigraffle / After Effects / InVision

Platform:

Web

Phase 3: Video Player Design [desktop & Tablet]

Project Overview:

The second and the most complicated area we tackled was Video Player Design. We focused on designing an immersive video player concept to provide a faster and smarter streamlined experience. 

I worked on wireframe design, visual design, motion design. Also helped developers with web prototype.


1. Define the Problem

  • How can we design to accommodate browsing related content while watching video?
  • What should a user be able to do in different video watching contexts. How can we make those pathways clear and understandable.


2. Background Research

We looked at DirecTV's competitors and some best practices in the field from these perspectives:

  • Browse in Video
  • In-page player v.s. Immersive player
  • Sticky Video
  • End Card


3. User Flow

We created happy flows for Series, Movies and Live TV.


4. Initial Ideas - 2 concepts

In order to satisfy user's browsing needs while watching a video, we explored several approaches: 

  • Immersive Video Player Concept - Full screen video player design with a Contextual Action Panel inside of the video player.
  • In-Page Video Player Concept - Video Player only takes 85% width of the screen. Recommended content displays underneath the video player.

Concept 1 Pros:

  • Users can browse related content whilestill being immersed in video.
  • Users can minimize the video to prioritizebrowsing. 

Cons:

  • Users may not want to directly go to immersive video experience 

Concept 2 Pros:

  • User can navigate related content while still engaging with video content. 

Cons:

  • Browsing while watching is limited to related content. 


5. A/B Testing

We conducted A/B testing to compare "Immersive" and "In-Page" concepts. I created two interactive prototypes for users to click through the experiences.

Immersive Video Player Testing Prototype

In-Page Video Player Testing Prototype


6. High Fidelity Design - Immersive Video Player

We landed on Immersive Video Player concept based on A/B Testing results.

We refined the experience and introduced 4 states to the immersive video player: Watch, Binge, Browse and Deep Dive. As for each state, a contextual action panel was designed to make browsing experience easier and smarter.

Contextual Action Panel | Grid System

VOD Player Design

1. Watch (Episodic)

2. Binge (Episodic)

3. Browse (Episodic)

4. Deep Dive - Show List

4. Deep Dive - Episode List

5. End Card (Episodic)

 

Live Player Design

Live Player

Live Player Menu Open


7. Prototype

VOD Player Prototype

Live Player Prototype

Using Format