VR UX/UI for DirecTV NOW

Project Overview

Who
DirecTV had recently launched its streaming app DirecTVNOW, open to anyone with a smartphone. I was asked to create the DirecTVNOW VR experience, focused on the Samsung GearVR platform.

What
Research
AT&T-branded environment mood boards
UX Wireframes Exploration
Low Fidelity UI
Prototyping

Challenges
Switching from a 2d mobile app to a full 360 degree immersive environment
Intuitive controls
Intuitive content browsing

Phase 1: Research

What were the established content providers already doing?

I put on a GearVR and spent a lot of time exploring the top content provider VR apps’ UX and testing each UI for its pros and cons.

What were the advantages and disadvantages to their chosen UI?

How was the overall experience? Did the UI detract from my sense of immersion? Was it comfortable to use?

Phase 2: Environmental Design

What excited me about this project is the large user base of DirecTV NOW. For many, this would be their first time using VR. I felt a special responsibility knowing this. The environment had to be on brand, but also had to be calm and warm, to welcome those first time users.

Partnering with AT&T Brand Identity & Design I was able to create mood boards and environmental design support for 15 brand elements.

Phase 3: UI Design and Browsing UX

The DirecTV NOW app is a vertical scrolling experience, however discovery is handled via many horizontal-scrolling content rails, something that would prove challenging in VR.

On mobile, the horizontal rails are clipped on each side by the phone’s physical dimensions, limiting the number of titles shown at any given time, reducing cognitive overload.

I chose two directions to test. One that is a limited viewing experience based on optimal viewing angles. The second is a rails-based approach, with a content stream that literally wraps around behind the user. Each was built as a wireframe prototype and tested in Unity in VR for usability.

A secondary challenge that does not exist on the phone is the grouping of different-sized cards (landscape for tv shows, portrait for movies) into a grid that can be easily scanned. I created several layouts to test the optimal browsing experience.

Testing in Unity

Working with Unity Dev Tim Lobes we were able to rapidly assess UI placement, viewing angles and distances, as well as amount of content to show without causing cognitive overload.

The room shown is a generic testing environment.