DIRECTV Badge System

Role: Co-Lead Product Designer (2 total)
Duration: 1 month (February 2018)

There is a lot of metadata associated with each type of content on DIRECTV. Some are tied directly such as air dates and parental ratings, but some also are temporary such as "New" and Live/Recording statuses, which needs to be communicated to the user.  This is what we (Design and Development) call a "Badge".

We initially launched with just the "New" badge, but over the years many others have been added. On the surface, the badges seemed simple, but peeling the layers off uncovered a rather inconsistent use of metadata. We had an opportunity to fix it. How might we make sense of this information so it will be useful to our customers?

Design Audit

Another Product Designer (UX focused), and myself performed an audit through legacy UX documentation, current UI screens, and current production apps to make sure there is alignment. We initially used Google Sheets, then we reorganized and collaborated in Notion. 

audit

Badge Regions and Tables

From our findings we organized our Badges into different types, of which are displayed in regions over poster and carousel lockups. Our badge types were categorized in this fashion:

  • Type 1 : Time-Based on Incoming/Outgoing availability, general category (New, Expiring)
  • Type 2 : Specific metadata for content type (On Now, Recorded, Schedule)
  • Type 3 : Playability (Playable, Not Streamable)
badges

Diving deeper into each Badge, we put together a tables to further describe when to display it. 

new-badge

Outcomes

The three types helped organize when and where certain badges appear in a more systematic way. Along with tables in the UX documentation, we provided an interactive Zeplin project in which anyone could select a badge type and/or page and a subsection of the table matrix would display, along with a wireframe of the component or layout in which it will be used.   

zeplin-badges

The badge logic would then be translated into code and deployed across all platforms, from mobile, web, to TV. Below is one example of our badges in action.  

T-iOS-WatchNow