@erikrosner - Designer, Photographer, Creative Problem-Solver
web_erik-rosner_dtv-kids_clickbait.png

AT&T DirecTV Kids

AT&T DIRECTV® Kids

UI/UX
Responsive Design

The newly-launched AT&T DIRECTV will include a dedicated experience for younger children. This kids experience will feature child-friendly entertainment and will be a safe space for parents to let kids control their own content. The UI is an adapted version of the core DIRECTV Visual Language, and is designed towards the needs of developing minds.

web_erik-rosner_dtv-kids_photo-1.jpg
 
 

Overview

The Kids experience will live within the greater DIRECTV platform. Its unique visual language caters towards needs of youngsters including safeguards and protection from inappropriate content in addition to intuitive controls and delightful interactions. Overall kids can feel an ownership over their own dedicated space while also offering their parents peace of mind when left on their own.

 
 
web_erik-rosner_dtv-kids_photo-2.jpg
 
 

The Challenge

Designing for young kids offers specific constraints that must be considered throughout the design process.

Major Constraints

1. Need for intuitive controls, interactions and interface design tailored to developing minds. We cannot rely simply on learned or established behaviors in regards to conventional interaction models and UI devices.

2. Must include barriers and/or password protection to ensure a safe, “walled garden” experience free of inappropriate content and confusing menus or settings.

3. Always feed into and reinforce the design tenets of the greater DIRECTV Visual Language.

 
 
web_erik-rosner_dtv-kids_photo-3.jpg
 
 

My Role

I was one of three UI designers on a greater team of UX designers and researchers exploring all stages of design for kids. Each UI designer developed a unique visual direction for all DIRECTV platforms, including television (1oft), mobile, tablet, web and tvOS.

Our designs were bases on the research provided by the research team and the interaction framework developed by the UX team.

 
 
web_erik-rosner_dtv-kids_my-role.png
 
 

Demographic Research

The XDS research team spent months interviewing and observing young families about their viewing habits, interests, frustrations, etc. These studies were conducted both in-home as well as in furnished observational living rooms on the AT&T campus. This research included families with children of all ages.

Key Takeaways

1. Kids skewing on the younger end of the spectrum were less concerned with watching series of episodes chronologically. Common viewing habits included:

  • Skipping around from series to series or episode to episode depending on characters or individual plot lines. Episode order is not a high priority.

  • Continual play left for extended periods of time as background noise, with with the child’s focus dipping in and out not determinant on major plot points. 

2. Kids were most commonly attracted to bright, bold, saturated colors and interfaces when presented choices of different visual directions. 

3. By the age of eight kids were more capable of grasping the core DIRECTV platform, and were more capable of overcoming protection mechanisms like parent pins or passwords. Children under three were unable yet to fully grasp even simpler interactions, and most parents wouldn’t leave their kids that young alone with a TV. This data shaped our target demographic.

 
 
xds-work-photos_2.jpg
xds-work-photos_5.jpg
 
 

Visual Audit

As part of our own research as a UI team we conducted an extensive visual audit of existing platforms and kid-centric experiences out on the market. We made note of trends, common features, areas of innovation and so on to define our visual language by.

 
 
web_erik-rosner_dtv-kids_visual-audit.png
 
 

Design Tenets

The visual design language is built around 8 key hallmarks dubbed ‘Design Tenets.’ These design tenets help maintain a consistent brand across the wide range of devices, platforms and features that encompass DIRECTV. They also serve a constant reminder to the greater, more abstract value we are looking to provide to our customers. 

We adapted the Design Tenets for our Core experience to create unique Kids Design Tenets. These were devised and reinforced from the data and feedback from our research team.

Also included was the 4-quadrant design framework (Sensory, Emotional, Functional and Spatial) of the Core experience. This framework is used across all design disciplines (Motion, Industrial Design, Sonic, Visual, Copy) in order to tell a cohesive story across our entire digital ecosystem.

 
 
web_erik-rosner_dtv-kids_design-tenets.png
web_erik-rosner_dtv-kids_design-framework.png
 
 

Exploration & Ideation

From the research and visual audit we initially came up with 4 distinct visual directions that we conducted early design explorations on. After review and user testing these were whittled down to 2 different directions. I was the designer responsible for following the “Mildly Playful” direction. This direction is on the more mature end of the spectrum while using still using build colors, type and UI.

 
 
web_erik-rosner_dtv-kids_process-1.jpg
xds-work-photos_1-cropped.jpg
web_erik-rosner_dtv-kids_process-2.jpg
 
 

The Solution

A bold, inviting interface… the primary background color is stays on brand with AT&T Blue and uses the Aleck Sans & Slab type family of the core design. All UI overlays with video playing in the background.

 
 
web_erik-rosner_dtv-kids_10ft_1-sneak.png
 
 

Navigate by Character

To feed kids fandom into their favorite character, the experience will include the option to search for and save content by character. Accessible both in a carousel in MyTV and as a stand-alone window, character bubbles can be dragged, rearranged and grow bigger and smaller based on frequency of choice.

 
 
web_erik-rosner_dtv-kids_10ft_2-menu.png
web_erik-rosner_dtv-kids_10ft_3-common-info-1.png
web_erik-rosner_dtv-kids_10ft_4-video-player.png
web_erik-rosner_dtv-kids_10ft_1b-characters.png
 
 

Color-Changing UI

In Common Info the background fill color changes based on a primary pull color of the selected show still. This creates a delightful interaction and feeds into the ‘Browsing is Entertainment’ tenet of the core design.

 
 
web_erik-rosner_dtv-kids_10ft_5-common-info-2.png
web_erik-rosner_dtv-kids_10ft_6-common-info-3.png
web_erik-rosner_dtv-kids_10ft_7-common-info-4.png
 
 

Mobile-Ready

Kids are often are enjoying content on the go or from a device as often as they do from the living room. 

 
 
web_erik-rosner_dtv-kids_mobile.png