[smartslider3 slider="19"] [su_section border="0px solid #cccccc" padding="30px 0px 0px 0px"] [su_note note_color="#002BE7"][su_icon icon="icon: external-link" background="none" color="#fff" text_color="#666" size="20" radius="0" margin="0px 10px 0px 0px" url="https://www.alanchen.com/prototyping/" target="self"][/su_icon]Interested in my coding and prototyping work for Max? Click here![/su_note]

Bringing the best of the box office right into your living room.

From the award-winning IPs of HBO, the distinct brands of Turner, and the theatrical excellence of Warner Brothers, HBO Max brings everything together in an experience that is truly created "For fans, by fans". Evolved out of HBO GO, HBO NOW, and MAX GO, HBO Max today has more than 10,000 hours of entertainment and over 37 million subscribers in the US alone. [/su_section] [su_section border="0px solid #cccccc" padding="30px 0px 0px 0px"]

The prequel trilogy

Before HBO Max, there were three HBO streaming services:

1. HBO GO - An OTT streaming service included free with cable packages that include HBO
2. HBO NOW - Functionally identical to GO, except offered as a standalone SVOD service, similar to Netflix and Hulu
3. MAX GO - The Cinemax version of HBO GO

All of these services were controlled by a custom CMS that manages all the catalog offerings and layout configurations of each HBO product. I spent the majority of my time at HBO working to improve and scale the CMS as the HBO streaming ecosystem expanded, eventually needing to accommodate HBO Max exclusively. [/su_section] [smartslider3 slider="21"] [su_section border="0px solid #cccccc" padding="30px 0px 0px 0px"] My first project at HBO was to design a Page Builder tool inside the CMS that allows the publishing team to create customized page layouts by dragging components  such as trays and carousels into the editing area. Publishers can then drag collections built in the CMS's Scheduler tool to populate the components with content. [/su_section] [smartslider3 slider="31"]

Each component in HBO Max can be managed and customized inside Page Builder.

[su_section border="0px solid #cccccc" padding="30px 0px 0px 0px"]

Figuring out a CMS Flow

Prior to Page Builder, every component was hard-coded into pre-built page layouts, thus HBO's publishing team only determined the scheduled rotation of titles within each component. The first step was to talk to existing CMS users and figure out how this new tool would fit into their existing workflows. I then mapped out potential flows and storyboarded an MVP. [/su_section] [smartslider3 slider="33"] [smartslider3 slider="22"] [smartslider3 slider="23"] [su_section border="0px solid #cccccc" padding="30px 0px 0px 0px"]

Planning for the future

Alongside the Page Builder work was the CMS rewrite needed to support the launch of HBO Max. While the launch was at least a year away, we needed to make sure that whatever was built for the CMS today would be able to scale and extend into a multi-tenancy platform supporting multiple applications, devices, and eventually territories. [/su_section] [smartslider3 slider="30"] [su_section border="0px solid #cccccc" padding="30px 0px 0px 0px"]

Wireframing an enterprise CMS tool

One of the main objectives with designing the page builder was to reduce the amount of clicks required to create and edit a page. Thus, seamless navigation between page builder features as well as all the various other tools was key for a smooth editing experience. [/su_section] [smartslider3 slider="24"] [su_section border="0px solid #cccccc" padding="30px 0px 0px 0px"] The final dev build was pushed out and first tested in production with MAX GO as a POC before being deployed to layout pages for HBO Max's launch in May 2020. [/su_section] [smartslider3 slider="25"] [su_section border="0px solid #cccccc" padding="30px 0px 0px 0px"]

Key Takeaways

• Design for flexibility: Always ensure alignment with changing business goals
• Engage early and often: Work closely with engineering and QA to ensure accurate interpretation of specs
• Prioritize features: Design systems reduce complexity and allow more design and dev resources to be allocated towards refining and adding new functionality

[/su_section] [smartslider3 slider="26"] [su_section border="0px solid #cccccc" padding="30px 0px 0px 0px"]

Other HBO Projects

As I was well-versed in the various upstream video and image APIs and had some coding experience, I was also occasionally tapped to create fully coded as well as rapid prototypes to support client-facing initiatives like an animated mobile carousel concept, multi-user profiles, and other future-facing features. Although at the time these were mostly used for testing purposes, some of these concepts like the mobile carousel helped lay the groundwork for fully realized features such as the immersive hero component that sits at the top of the HBO Max homepage today. [/su_section] [smartslider3 slider="32"] [su_row class="credits"] [su_column size="1/2"] [su_panel border="0" shadow="0" class="credit-panel"]Skills: Figma, Sketch, Principle, React, Javascript Github: n/a Live Site: hbomax.com[/su_panel] [/su_column] [su_column size="1/2"] [su_panel border="0" shadow="0" class="credit-panel"]Frontend: Curt Elassier Backend: Joseph Seiter Timeframe: Summer 2017-Spring 2020[/su_panel] [/su_column] [/su_row]