HBO GO XBOX360 APP

For Latin America

HBO Latin America was looking for a complete re-haul of their product for various platforms. I was the Senior UX Designer for a lean and scrappy team and led the efforts for designing the console experience for the Xbox 360.


Scope of work

  • 10-ft Best Practice Research

  • Platform-specific Research

  • Wireframing

  • Interaction Design

  • Design Strategy

  • UI Design


Home screen design for the HBO GO Xbox App (2014).

Home screen design for the HBO GO Xbox App (2014).

my approach

Understanding the platform very well (logged too many hours gaming), I wanted to make sure the key interactions were natural and second nature using the Xbox 360 controller. Microsoft's approach of creating a device that dominates your leisure time made it obvious that the marching orders were to make the controls intuitive, clever, and performance-minded - this makes the transition from gaming to watching movies a cinch but also approachable for non-gamers.

Based on contextual interviews (roughly 20 users), some common pain points for console navigation were:

  • 'Hunting' for the cursor location

  • Reaching a bit too far to get to main functions

  • Confusing search functionality

  • Active states 'too subtle'

Discovering this, I built a design strategy that aimed to solve these major pain points effectively.

outcome

I delivered an informed and intuitive experience that catered to the various Xbox 360 users that adhered to platform best practices.  This collaboration also surfaced great insights on features that worked cross-platform further adding value to the overall end-product. Below are some highlights of the project.


Menu screen overlay and Episode Detail Screen

Menu screen overlay and Episode Detail Screen

Simplified way to convey the key interactions.

Simplified way to convey the key interactions.

determining the interaction model

Once I nailed down what absolutely infuriated users, I made sure to pay special attention to those pain points and built an interaction strategy around that. Main navigation relies on the D-Pad or Left Thumb Stick, so a grid UI structure and vertical/horizontal navigation pattern made the most sense. Also, I needed to consider the output device, wide-screen televisions (which have their own set of design requirements).

Leveraging The Platform
Console users are well acquainted with the various buttons on the XBox 360 controller, so I wanted to identify what were some common conventions and see how I could enforce those with the experience.

Face Buttons
Used for accepting/canceling interactions. They can also be used for secondary actions. A user’s thumb will naturally rest on these 4 buttons so I had to consider which functions would require that sort of prime placement.

Triggers & Bumpers
Used for advanced navigation. For example, the Left/Right Triggers are used to scroll down the screen where the Bumpers are used to essentially function like a dedicated Tab control - useful for paging through content quickly.

I wanted to approach this experience with an ‘always ready’ menu button. This will allow the user to access the menu no matter what screen they are on via a dedicated face button. The UI will provide a legend that shows the user the contextual actions they have available to them on a particular screen.

I approached this challenge considering both controller ergonomics and screen design conventions.

 


Strategizing the 10-ft experience

Designing for televisions are an entirely different beast in comparison to web and mobile devices. Variables like screen size, distance, and device limitations can shape how you approach the design. Designing for televisions are referred to as “10-ft” due to optimizing the UI based on the common distance between you and the television.

Regarding screen ‘safe areas’ for tv, I was reminded of my print design days where bleeds, trims, and safe areas were the first considerations when setting up design files. Designing for tv is no different, I typically set up my files with margins around 8-10% (understanding this can change as the layout evolves). 

Screen
Building the experience for television, I considered the real estate I was playing within. There’s a reason why most tv UIs consist of rows and grids - it just works. Also, users have grown to respond well and expect that type of experience, so I had no desire to add unneeded friction or create a steep learning curve.

Color Usage

TVs are NOT computer monitors. So I considered the various color limitations as well as contextual considerations for color usage. I avoided bright white color usage due to the harshness to the eyes in a natural tv environment and also serves to add focus to each piece of content. It was very important to test and iterate color usage on various tv screen qualities to help identify potential issues.

 Things that require testing to make sure the result is what is intended.

  • Bright harsh colors - emit a vibrance that is unpleasing to the eye

  • Gradients - can appear to have ‘bands’ if not configured correctly

  • Overlays & Blurs - adjust variances in each to desired amount for tv

 Moral of the story: TEST... and test often.

Navigation
I approached the navigation with a 2-axis navigation model, leveraging the controller’s D-Pad or Thumbstick for majority of the movement. Understanding the D-Pad’s four-way navigation limits, further enforced my approach using a 2-axis model.

Typography
Typography was where it got really interesting. Keeping in mind we tend to view the screen at around 10 feet, it is absolutely necessary to go big with titles. I went with 130px for main content titles, 40px for tags, and 24px for body text. Typography will always be tweaked and tested to anticipate content variables. I went a bit large with content titles but I tested the variables and created some safeguards to aid with unpredictability and possible lengthy translated titles.

JA_IXD-IMG.png

High-level navigation overview of the application (left). Initial wireframes of onboarding (right)

High-level navigation overview of the application (left). Initial wireframes of onboarding (right)

user flows > wireframes > creative (in that order?)

My approach was pretty straightforward for this type of product:

  • Identify and diagram out the authentication flow (informed by technical and business considerations).

  • Map out all screens in low-fidelity form to validate overall flow of the product.

  • Pinpoint redundancies and solution ways to streamline more cumbersome processes.

  • Low-to-medium fidelity wireframes to inform and confirm functionality

For the main screen interaction, I had a very specific vision in mind, so I approached it by time-boxing a creative session to see it out. On some projects (like this one), I like to bounce from low to high fidelity to validate each. This also keeps me flexible to avoid locking myself into a certain direction - agility is the key here.

In some cases, I find a lot of value in ‘getting loose’ and determining a stylistic direction to inform my approach.  I compare it to when Industrial Designers ‘warm-up’ or ‘free-sketch’ before getting too deep into technical aspects of the illustration. Sometimes it’s just a matter of getting the form down before trying to solve for something.

Predictive search with lazy loading

Predictive search with lazy loading

The Takeaway

Working on this product on this specific platform was challenging but was very rewarding - and to be honest, I had a blast. Having a deep experience in content delivery platforms helped me 'jump right in' and many of the challenges and conversations that were had were VERY familiar. 

Some key things learned:

  1. Take the time to get acquainted with the platform - general UX processes and considerations apply but platforms can be nuanced and may lead to interesting discoveries.

  2. Test, and test OFTEN. Don't test to validate your ideas, test to get a deeper understanding of what makes your users tick. Drop your biases.

  3. Strive to deliver unique approaches to an established brand - take risks.

  4. Be open to ideas from unlikely sources, you'll be surprised what insights you may have overlooked.


Find this interesting? Let's collaborate!