Jen Pan|

Menu

HBO Visual Language

At HBO Digital Products, I worked closely with my team to audit, organize, and build out the framework for the visual language across HBO GO and NOW. In order to help guide cross functional teams to create flexible, approachable, and universal product features, I directed and executed completion for the first phase of our HBO visual language. Our team worked closely with UX design, research, engineering, and PM teams.

2018
Design Lead
Designer, Organizer, Intermediary, Production, Reviewer, Educator/Evangelizer
Analysis, brand assessment, and best practice definitions for the visual language system
Collaborative, trustworthy, respectful, engaged, holistic thinking

BRAND AND COMPARATIVE STUDIES:
Assessed comparative brands and products to start assessing look and feel.

BRAND AND COMPARATIVE STUDIES:
Organized and categorized brands and product along a spectrum close to our principles and values as well as at the opposite end.

BRAND MARKETING ASSESSMENT:
Collection of top assets and collaboration with marketing to ensure we are aligned on principles and visual look and feel.

AUDIT:
Initial loose audits of visual language items
Problem: How to cover get a sense of a broad range of elements that will be affected by new visual language

ASSESS:
Team exercises of organizing, categorizing and defining elements in more detail

GRID:
Early look at page grids narrow (purple) and wide (pink) column widths. The wider widths fit the hero, standard, and sub module sizes best in flexible, percentage based columns.

GRID:
Phase 1 Grid for connected TV

SPACING:
Phase 1 global grid spacing at element and component level based on more refined grid structures

SPACING:
Phase 1 global spacing scale at page level based on grid structures

TYPE:
Custom HBO universal typeface

TYPE:
Street typeface was tested and designed to be successful across platforms and to enhance specific variables of content throughout the HBO product.

TYPE RAMP:
Phase 1 type ramp based on research.
Multiple online prototype studies were created and tested with users to obtain guides for optimal sizing. This pertained most importantly to smallest and larger sizes.

COLOR:
Original set of disorganized and cluttered color values – overload

COLOR:
Second page of original set of colors

COLOR: Following audit, assessment, and simplification with design team and engineering, recommended and implemented Phase 1 set of colors across platforms.

COLOR:
Phase 1 of defining and naming targeted color palette for elements

COLOR:
Phase 1 color palette with accessibility contrast ratios

ICONS:
Phase 1 icon family
Various rounds of icon explorations executed for form and metaphor before arriving at a style that aligned with HBO brand of premium and approachable.

ICONS:
Organizing, categorizing, and refining semantic meaning behind all icons across product.

ICONS:
Phase 1 icon rules

IMAGES:
Phase 1 image ramp simplified

IMAGES:
Phase 1 image ratios