HBO
Product UX and Visual Design
TLDR— As the Lead Product Designer, I led the efforts for designing the console experience for the Xbox 360. This process started with 10-ft platform research as well as a lean user study focused on interaction models for gaming consoles to determine common pain points and preferred functionality. From there, I created a series of prototypes to test core interactions. After testing with a handful of users, I continued to refine the experience and brought it to high-fidelity.
Menu screen overlay and Episode Detail Screen
Overview
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. Based on some qual data I acquired, 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'
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.
My Contribution
Platform-specific Research
Wireframing / Prototyping
Design Strategy
UI / Interaction Design
Breakdown of the interaction model.
Determining the Interaction Model
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.
Focus Areas:
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. Left/Right Triggers are used to scroll down the screen where the Bumpers are used like a dedicated Tab control.
Screen safe areas and basic type size rules.
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.
Focus Areas:
Layout - There’s a reason why most tv UIs consist of rows and grids - it just works.
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
Navigation - I approached the navigation with a 2-axis navigation model, leveraging the controller’s D-Pad or thumbstick for majority of the movement.
Cute composition of some early app diagrams and wires.
User Flows > Wireframes > Creative (in that order?)
Bread and butter UX over here (ex: Auth flow):
Diagram out the authentication flow based on spec.
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
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.