DirecTV Case Study Thumbnail

DirecTV

Building a cross-platform live TV experience without the cable

PROJECT BRIEF

Build and launch DirecTV GO in LATAM by streaming their licensed content over the internet with the goal of retaining existing cable subscribers and attracting cord-cutters.

ROLE & RESPONSIBILITIES

UX lead responsible for product design across web, native, LG TV and Chromecast for the engagement experience. Launched in 7 countries and grew the team to 8 designers.

OUTCOME OVERVIEW

Redefined TV as a mix of live events and on-demand titles, fostering a migration from cable. From zero to 7 countries, 9 devices, 356 channels and 700K+ users since launch.

A new journey begins

Understanding problems to find solutions

Following our first stakeholders meeting with DTV the message was crystal-clear: cable was no longer the cool kid on the block (to no one’s surprise), as consistent plummeting satellite subscriptions indicated, and they needed to future-proof their business ASAP.

Doing an initial user research we discovered that cable TV is past its prime time due to many reasons, but mainly fixed contracts, installation times, hardware needs and expensive bundles.

With their research team we developed personas based on their target audience and defined specific goals for each. Knowing the needs and expectations of existing and prospective customers and matching those to business objectives was the first step towards helping DTV groom and prioritize their huge backlog.

DirecTV Opportunity Driven Innovation
Sneak peek of our opportunity-driven innovation analysis and prioritization during discovery

I worked directly with product managers on a deep analysis of the requirements by doing an opportunity driven innovation analysis to identify gaps in the market that we could use to our advantage.

After identifying those epics, I prioritized them through indexes with the input of the product and research team, following basic methodologies like ICE and Value vs Effort.

When plotted, the data showed interesting correlations between the user and business value of a feature and tech dependencies associated with it.

DirecTV Card Sorting
DirecTV First Click Test
DirecTV Miscellaneous Flows
DirecTV Information Architecture
Card sorting, first-click testing, miscellaneous flows and high-level IA

Ensuing product strategy I worked on tactical deliverables like user flows to guide everything from regular to edge use cases and wireframes to iterate ideas and guide technical discussions ranging from APIs and metadata to image optimization funnels and CMS.

Throughout discovery, card sorting and first-click testing helped us adjust information architecture and its presentation to the prevailing mental models of users early and in time for MVP.

DirecTV Wireframes
Wireframing to iterate and test ideas rapidly

A better way to watch TV

Live shows, programming guides and channels

DirecTV GO’s value proposition became to blend the line between satellite cable and on-demand movies and series, to do so we set out to redefine the experience of what it means to watch TV.

Redefining live TV meant much more than just uploading streams to the internet, it meant finding a new way to interact with it, one that put users needs and content immersion first.

DirecTV Live Asset
Live asset details page showcasing relevant metadata

Live cards allowed us to do just that, displaying meaningful metadata to take action. Also they allowed users to stream shows already aired within a 72h window as well as setting reminders for upcoming ones.

DirecTV Live Cards
Live cards for viewable events either currently airing, aired or upcoming

For content discovery we found through tree testing that two mental models prevailed across our user base: either a "Netflix approach" were they leaned on recommendations or a "TV guide approach" where they relied on a time-bound schedule.

Hence, we made the tradeoff of initially supporting both schemas and further down the road phase-out the EPG to rely solely on a more mature content recommendation engine.

DirecTV Content Discovery
Suiting content discovery to address multiple mental models

Easy to envision, hard to implement right. Programming guides have a high information density, making cognitive overload a risk.

We prioritized our guide to bring forward only metadata relevant to our users, keeping it easy to navigate content and lightweight enough to explore channels fast.

A platform tailored around sports

Matches, teams and clips

Sports has always been DirecTV's strength and primary revenue driver, so naturally it became a crucial vertical within the app. Fast forward and we were right, sports is the main reason why users sign up in the first place, according to qualitative interviews.

We capitalized on this advantage by resurfacing sports matches in a way that was impossible for other competitors to emulate.

DirecTV Sports Asset
Match asset details pages for sports

To design match cards we worked with content teams, diving into the metadata of more than 20k events to create game categories that allowed users to filter, search and discover matches.

DirecTV Sports Cards
Match cards for sports using real text and image metadata

On contextual interviews we noticed a user tendency to look for game summaries, and since DTV holds rights for content even after televising it, we strived to retain those users within the ecosystem leveraging curated match clips on major sports events.

DirecTV Sports Clips
Match, team and league video clip summaries of sports events

Ready for binge watching

On-demand movies and series

Moving onto on-demand content, vertical posters signaled a movie or series across the app.

We organized them in semantic lanes, as each granted enough flexibility from a content management perspective and formed a coherent structure that let us organize assets in a pattern that is already embedded in users minds

DirecTV VOD Lanes
VOD posters and curation lanes

Having a massive amount of metadata for every asset, we balanced information display and interactivity to display details.

Along with call-to-actions and navigational buttons, metadata played a center-stage role when designing asset detail pages for movies and even more for series.

DirecTV Movies and Series
Movie and series detail pages

Play, pause and everything in-between

Video playback of movies, series and live assets

Player controls although simple design-wise, were critical to get right by covering every intricate use case available.

First we took care of core functionalities like scrubbing backwards, seeking forwards, controlling volume, changing audio language and subtitles, to then move to more edge cases.

DirecTV Movie Player
UI states for core player functionalities

Uniquely to the series player we added episodic navigation, so users could browse and play episodes or even seasons of the series without ever having to leave the video.

DirecTV Series Player
Series player with season selector

When watching currently airing video, the player allowed users to scrub backwards and return to the live stream effortlessly in a single click, providing visual feedback of it at every step.

DirecTV Live Player
Live player with “currently airing” and “behind stream” states

Adapting to "Zapping", the common behavior of jumping between networks to see what’s live, we designed the mini tv guide feature to take a peek into other airing content and quickly swap channels.

On the other hand, picture-in-picture let users watch video on web while they navigate other websites such as Facebook or Twitter using the Chrome browser (78% of desktop traffic).

DirecTV Mini EPG
“Picture-in-Picture” and “Mini Programming Guide” player features

Both features were born out of continuous improvement and experimentation with the goal of increasing video consumption.

Observing real people watching TV we noticed a lot of multitasking, users were constantly checking their social media feeds in the midst of video, so we started to wonder how we could leverage rather than fight (and lose against) those behaviors.

DirecTV TV Design

Made for the big screen

Chromecast and LG TV immersion

Data pointed out that video consumption is still widely more popular on TV screens and often takes part in a social setting (specially true for live sports events).

That’s why we followed industry best practices on LG and Chromecast while keeping them unique and useful.

DirecTV Chromecast Design
Different user interface states for Chromecast receiver

On TV we had a lean-back user interface focused on discovery and content immersion while providing appropriate control and feedback of video playback states.

In the case of LG (webOS) we created a spin-off of our react app codebase and adapted it to the interaction patterns prevalent in our other 10ft native apps on Apple TV, Fire TV and Samsung Tizen.

Testing LG interaction patterns, going from low to hi-fi proof of concepts before commiting to an idea

A design system to rule them all

Prototype, test and implement at scale

When we began the project there was a massive degree of uncertainty, so the only way forward was to start small, test and iterate from there.

That’s where prototyping really shined, as it allowed us to produce interactive designs that we could pass on to Globant’s User Testing Lab to put in front of users and test assumptions.

To a fair extent we used prototypes for two main purposes: either for user testing flows/tasks, handoff of micro-interactions/transitions or both.

Design is about communication, and communication involves speaking to actors in their own language.

Perhaps that’s why interactive examples, besides testing and handoff, were super useful to convey ideas to senior stakeholders to reach consensus rapidly and get business approvals.

Low and high fidelity prototyping at different stages of the design process

Speaking of handoff, to ensure parity between design and code we defined GO’s styling foundations directly in our code base.

That required doing an UI inventory audit design and code wise, to define object-oriented class anatomies across components and patterns that proved to be scalable and reusable to devs.

This effort led to releasing an internal pilot of our design language system that will keep on evolving with the project.

GO design system (v1.0) as a single source of truth between teams

Closing credits

Project outcome & reflections

We launched on November 2018 in Colombia and Chile, expanding in the following months to Ecuador, Peru, Uruguay, Argentina and Mexico. We raised media awareness and triggered good initial traction by bringing satellite customers over to GO.

As in every project there were opportunities for improvement, one that resonated with me was to analyze the impact of performance in the experience from the get-go and not as a further optimization.

DirecTV Product Maturity
Continuous improvement and product/design maturity plan for GO

I learned that before shipping/testing things are just an hypothesis. In the market several forces enter into play, so as a designer you got to be comfortable with uncertainty and thrive on it, recognizing that experimentation and constant evolution are key to success.

Everything considered, this was a complex but gratifying project to work on, just the scale of it made it daunting at the beginning, but it challenged me to learn about adjacent disciplines like product management, which made me a more rounded designer.

Date

Early-2018

Platforms

Web — Responsive

Native — iOS & Android (You.i Engine One)

TV — LG webOS

Chromecast — Receiver & Sender

Tools

Axure, Sketch, Framer, Optimal Workshop & more

Team

Nohora Mondragón — Project Manager

Lorena Malzone — Business Analyst

Alex Otero — Development Lead

Tobias Skog — Design Director

Gas Grillo — UX/UI Designer

Teresa Lass — Visual Designer

Mario Mojer — Visual Designer

Sergio Lizárraga — UX Lead

Want to chat?