@erikrosner - Designer, Photographer, Creative Problem-Solver
web_erik-rosner_dtv-sports_clickbait-3b.png

AT&T DIRECTV Sports

UI / UX

Responsive Design

 

AT&T DIRECTV® Sports

UI/UX
Responsive Design

The new DIRECTV has been reimagined from the ground up leveraging advancements in digital, sound & interactive technology. This cohesive experience spans across TV, mobile, tablet and the web, as well as a variety of streaming platforms including Apple TV, Amazon Firestick, Roku and more.

web_erik-rosner_dtv-sports_hero.png
 
 

Overview

Within the redesigned DIRECTV experience will be a variety of unique features dedicated to feeding into the fandom of sports. These goes beyond simply live broadcasting. Sport fans can tailor their experience to their favorite teams, leagues, players and moments across all their devices.

 
 
web_erik-rosner_dtv-sports_hero-2.jpg
 
 

The Challenge

As a design team, our challenge was to explore innovative and creative opportunities to experience sports fandom. Some major constraints and considerations included: 

  1. Include all stages of the sports-viewing lifecycle: Pregame, During and Post-Game.

  2. Maintaining a consistent experience across the range of DIRECTV platforms: 10ft (Living room TV), mobile, tablet, web and tvOS.

  3. Go beyond simply a linear TV viewing experience. Include interactivity, viewer input and community into the experience. 

 
 
web_erik-rosner_dtv-sports_process-1.jpg
web_erik-rosner_dtv-sports_process-2.jpg
 
 

My Role

I was 1 of 6 designers on the sports exploration team. We were further broken down into 3 groups of 2, each with a different lens (or focus) to approach sports fandom with.

These lenses included: Alerts, Players and Teams. I was on the Team lens. I would explore my ideas and reconnect daily with my partner to share feedback and suggestions, as well as meet once a week as an entire sports exploration team for further feedback.

The following work include my personal contributions and designs to the final solution.

 
 
web_erik-rosner_dtv-sports_my-role.png
 
 

Research Synthesis

Our research team dedicated month visiting with, observing and interviewing customers and non-customers about their sports interest and viewing habits. This research uncovered some key insights that informed our design decisions.

  1. As made popular by YouTube and other social platforms, sports fans increasingly like to watch content in shorter clips and “big play” highlights. These fans often watch and re-watch clips multiple times, share them with friends, and do not necessarily watch clips in chronological order as they unfolded.

  2. “Anti-fandom” of a team or player can be as strong of a driver as fandom. This drives viewers to all kinds of content in addition to clips, including news, stats, trades, etc.

  3. Sports fandom does not necessarily apply to a single team. Some viewers are fans of entire leagues without any attachment to one particular team. These fans may not watch entire games of teams, but rather consume highlights of multiple or all teams. 

  4. Social activities such as fantasy sports drive fans to consume content differently than traditional drivers such as hometown or family members. These fans tend to be more interested in stats and big moments rather than the narrative of a full game. 

 
 
web_erik-rosner_dtv-sports_research.png
 
 

Fandom Brainstorming

As a design team, we used these research findings to brainstorm a variety of user journeys and personas to guide our design exploration. Additionally, we attributed a collection of behaviors and fandom drivers distilled from the research. These were applied individually to each of the user personas to identify commonalities. Lastly, these were each plotted across a spectrum of Casual, Conditional or Committed Fandom so that all intensity of view was considered.

Below is photo documentation of our exercise as well as a digital sample of some personas as examples. 

 
 
web_erik-rosner_dtv-sports_process-3.jpg
web_erik-rosner_dtv-sports_process-4.jpg
web_erik-rosner_dtv-sports_process-5.jpg
web_erik-rosner_dtv-sports_fandom-layers.png
 
 

Design Language

The new DIRECTV experience is built around a handful of design tenets that encompass and inform the overall visual language. These tenets maintain a consistent experience across the range of DIRECTV platforms and devices. 

These tenets are fixed into a 4-quadrant framework which covers every aspect of the experience. This includes sound, motion, copy and interactions in addition to the visual look & feel. 

 
 
web_erik-rosner_dtv-sports_design-tenets.png
web_erik-rosner_dtv-sports_design-framework.png
 
 

Exploration

I explored a variety of ideas, interactions, features and content types first by hand and loose in fidelity. At this stage I was looking to simply get concepts out of my head and down on paper.

I would then expand upon and iterate ideas that myself and my team felt had legs, before eventually transitioning into digital design tools. 

 
 
web_erik-rosner_dtv-sports_process-4.jpg
web_erik-rosner_dtv-sports_process-9.jpg
web_erik-rosner_dtv-sports_process-1-3.jpg
 
 

The Solution

My solutions revolved around a few key features relative to the Team (and by expansion, League) viewing lens. This includes multiple avenues for “clip snacking”, which is a term we coined for the viewing of short content and highlights in a non-chronological way, much like one would consume content on YouTube. 

Additionally DIRECTV will include a dedicated “My Sports” section where fans can manually select their favorite teams, leagues, athletes and Highlights. Within this section, fans will be recommended additional clips and highlights to watch relative to their own choices. They will also have the ability to dive deeper into content specific to their favorite teams, players and leagues.

 
 
web_erik-rosner_dtv-sports_collage.png
 
 

Clip Snacking

In addition to a variety of carousels in the “My Sports” section dedicated to short clips and highlights, viewers can access clips from live events they are watching directly from the scrubber timeline.

This allows fans to relive big moments in the game they are currently watching without relying on broadcasts to cut to highlight packages. Additionally, this allows viewers to catch up on key moments of games they’re watching if they happened to tune into the broadcast late. 

 
 
web_erik-rosner_dtv-sports_timeline-1.png
web_erik-rosner_dtv-sports_timeline-2.png
web_erik-rosner_dtv-sports_timeline-3.png
 
 

Live TV Always in View

One common frustration of viewers that we uncovered in our research is when big moments in a game are missed in real time because the broadcast had cut to a highlight package.

To avoid this happening when clip snacking across the timeline, live TV will always be in view no matter what. When a clip is playing in fullscreen, a mini-window will appear in the top right corner of the screen with the live broadcast ensuring fans never miss a moment.  

 
 
web_erik-rosner_dtv-sports_timeline-4.png
 
 

My Sports

“My Sports” is where fans can customize their experience to their favorite teams, leagues, players and highlight clips. In addition to carousels dedicated to all types of related content, “My Sports” includes profiles for teams, leagues and athletes. Within these profile will be a collection of related content for live viewing as well as reliving moments and narratives.

 
 
web_erik-rosner_dtv-sports_my-sports_1b.png
web_erik-rosner_dtv-sports_my-sports_2b.png
web_erik-rosner_dtv-sports_my-sports_3b.png
web_erik-rosner_dtv-sports_team-preview.png
web_erik-rosner_dtv-sports_team-common-info.png