JVN+

AT&T DirecTV Remote App - UNDER CONSTRUCTION

Wireframes - Adapting the Genie Remote for the DirectV iPhone App

Breakdown of the HMC Remote to Graphic Elements. L to R

• Production Keypad Artowrk on Mechanical Engineering Linework
• Removal of Branding and Construction lines that show form. Move away from ID to more Graphical Design.
• Simplified version - Edited Text and deletion of key shapes
• Refined Keypad Graphics for use on Mobile phone. Navigation and Keys made large for better usuability. Large Volume & Channel key shapes replace mechanical switches. Updated Branding size and location. Color is retained to reduce confusion.
• Maintaining Design Language,  the Gray Housing color was kept for the mobile app for a friendlier and familiar look
• The Grays used made for easy to read appearance, similar to E-ink screens

Creation of Screens

Transfering of Remote Keys to On screen Elements. Maintaining ease of use and familiarity.  Adapting to different ID Geography (Remote to iPhone), Height Dimensions and different hand holds.

User Experience Design

Below we get into the flow of the Remote app. 

1. Main Navigation Design is similar to HMC Genie Remote.
2. The Iconic Ring is retained for familiarity and makes users sure and comfortable when from Hardware to Software.
3. Position of Nav is in prime location for 1 hand hold.....
4. Prev Key not used to have a clean appearance and analytics show low use with this function.
5. Colors for Record and Red Color keys are kept to reduced key confusion when turned Black and White.
6. 3D looking keys are dropped for line weights to convey seperation and importance.
7. Bottom shows shortcuts to Navigation, Numeric Keypad, Search funtions. Sliding function also available.
8. Bottom of Nav and above Mute button is the average thumb location for test users using one-hand operation.
9. Power turns on/off Box and paired equipment.

Transport and Numeric Keypad

• Transport / Trick Play Key Graphics updated for cleaner look.
• Alohanumeric Key Text simplified and centered. Letters are removed due to better Search functions
• Line is added between transport and numerica keys for visible seperation of elements and to reduce miss presses.
• Line wieght continues to show key importance and guides user for optimal hand placement.
• Increased spacing and larger sized keys made users feel more comfortable about pressing keys.

Search Function

DirecTV was rushing to create a similar Voice activation Search for their remote and wanted to implement it into their Remote App. Comcast was having incredible feedback with their voice activation search. DirecTV Remote Design was a couple years older and it was difficult to add the hardware,  which Mic + mechanical structural housings and additional Voice key to an already small remote package. 

• Arriving at the Search sreen gives you two options. Type Something and Press & Hold - Speak
• Using Voice is optimal and quicker and designed to be the First read when entering and looking at Search options
• Pressing the Mic the page shortcuts disapear.
• Typing something the keypad pops up and page shortcuts disappear.

• Voice Activated
• Magnifying Glass icon reinforces search mode
• ( l )  prompts users to say something
• ( x ) deletes type
• ( cancel ) returns you to Search page - see above

Multiple Room/Box Control

• For Multi-Box Businesses and Multi-Room use. 
• In Settings the Remote locates boxes in the vicinity.
• Choosing your Location and/or Box with show you a Password Prompt. This Password Protection helps prevent unwanted control in Businesses (Bars, Airports, etc.),  and unwanted watching of different Box setups due to Parental Controls.

DirecTV Remote App to iOS

Steps to refining the Remote app and visualizing differences in iPhone X and iPhone 8+ 

• Move away from E-ink White Screens
• Visualize with Black Screens/Artwork
• Modify Key Shapes, Graphics, Locations and Spaces to align with the different phone Dimensions and Resolution

DirecTV Remote App on iPhone 8+

Human Factors

• Quick Animation of Prime One hand hold for the DirecTV iPhone app.
• Showing easy Thumb movement from Navigation to Mute Button.
• Thumb is in perfect location for High Use Keys. Nav, Vol, Mute, CH and for Left and Right sliding between Nav, Transport/Numeric and Search Screens

DTV App Under Construction - More Details TBD