HBO Max
Editorial Design System

Role
Art Director (Co Lead)

Additional Credits

Design
Sr. Designer - Heather M

Product
Visual Designer - Natalia
Product Manager - Hakha M (Co-Lead)

Leadership
Sr.Creative Director - Matt S.P
Product Director - Michael M

A digital chart with a dark background and purple text and borders. It displays various media components, asset types, and inline video capabilities, including names like Immersive Hero, Highlight Simple, Highlight Basic, 1-UP, Theme Tray, Character Row, Collection Tile, Brand Tile, and Screen Background. The chart includes icons representing different screen layouts and specifications, such as textless, text, burned-in text, and logo, with some components supporting inline video on CTV and desktop devices.

About

This system was first collaboration between the brand design, product content expression, and core teams, serving as an internal incubator for innovation in the HBO Max app. The design unifies branding, lifecycle, and merchandising into a single cohesive visual experience, ensuring that every touchpoint—from the home screen to detail pages and collections—reinforces the premium quality of the experience and content.

The Brief

  • Design consistency

    Balancing a unified visual style with the need for flexibility across many different components, content types, and use cases.

    Ensuring that unique component styles still feel like they belong to the same overall HBO Max design system.

  • Component uniqueness

    Defining visual rules so each component feels distinct and purposeful without creating visual noise or redundancy.

    Avoiding overlap between component styles as the library grows and new patterns are introduced over time.

  • Scalability and global use

    Building a system that can scale across campaigns, markets, and languages while preserving clarity, hierarchy, and brand recognition.

    Accounting for regional content priorities, localization needs, and varying marketing strategies without fragmenting the core design language.

Example COMPONENT design process

Two women with foreheads touching, eyes closed, showing emotional connection, in close-up shot.

Showcase the iconic moments from our
series and movies.

Blurred city lights with a rainbow rainbow light streak across the top right corner.

Create a distinctive mood and communicate
powerful emotions.

LGBTQ+ Pride Collection text on a dark background.

Title treatment and bug

Two women with their foreheads touching, amidst rainbow and colorful light effects, with text reading 'LGBTQ+ Pride Collection'.

Celebrate the epic nature of our motion pictures.

impact.

2 Webby Awards

34 million subscriber growth

/1

ATMOSPHERIC

Create a distinctive mood and communicate powerful emotions.

Aesthetic Principles

/2

LAYERED

Create cohesion across different visual elements.

/3

FOCUSED

Place talent at the center of the frame to convey their emotions.

/4

UNFORGETTABLE

Showcase the iconic moments from our series and movies.

Usability Principles

/1

READABILITY

Strong color contrast and font sizes play a vital role in ensuring that text is readable, especially for users with low vision.

/2

PREDICTABILITY

Designs should make it possible for users to accurately predict the outcomes of their interactions based on presented visuals and copy.

/3

ORIENTATION

Place talent at the center of the frame to convey their emotions.

Screenshot of HBO Max app featuring the series "Black Voices" with images of four Black characters on a colorful background.

Hero

Screenshot of HBO Max streaming service homepage featuring collections of TV shows and movies, including 'Black Voices' and 'Comedy' collections, with various posters and thumbnails of different series and films.

Collection Tiles

Screenshot of a streaming app homepage featuring a main banner with LeBron James and Looney Tunes characters, promoting a show about a game with LeBron, Bugs Bunny, and friends. The bottom section showcases various movies, including The Matrix Resurrections, Lord of the Rings, Jurassic Park, and others, with a smaller inset image of the same main banner.

Highlight

The image displays character profiles from the show 'Rick and Morty' at the top, with images of actors below, and animated characters from 'Rick and Morty' at the bottom, all set against a dark background.

Avatars

Streaming service interface featuring a selection of superhero and sci-fi TV shows and movies, including The Batman, Justice League, Wonder Woman, and The Lord of the Rings.

Theme Rail