Launch Experience

The goal was simple yet ambitious: to redesign and elevate the existing HBO Max app experience, focusing specifically on reimagining the app’s launch sequence.

The Ask

We aimed to create a seamless and immersive launch experience that maintained consistency across all platforms—a crucial touchstone in user engagement.

Brainstorming Phase

The splash screen is essentially the gatekeeper of your app—it's the first interaction users have, and it sets the stage for their entire experience. The existing solution—a static logo—was underwhelming. We wanted something that truly resonated with the HBO Max brand: cinematic, bold, minimal, and seamless.

Research and Development

Drawing inspiration from our brand guidelines and the prevalent use of gradients in our app's design, I chose to mirror these themes in our start-up sequence. It was perfect for creating a unified feel right from the start. It was essential that the animation not only captivate but also align closely with the brand's established identity seen in our promotional marketing materials.

To truly reflect the "Cinematic" and "Immersive" adjectives, I designed a "dive-in" experience, implemented by a zoom effect that pulls the viewer into the content right from the get-go.

Design Iterations

After developing several initial concepts and iterating based on feedback from our design directors, we narrowed the choices down to two. Subsequent reviews, ascending to the Senior Vice President of Product Design, Streaming, and Engineering, helped finalize our choice.

Sound Integration

Parallel to the visual development, our sound design team was crafting audio that complements the visual splash. Once their piece was finalized, I synchronized it with our visual motion, preparing it for final reviews.

Implementation

With the foundational elements firmly in place, the next step was to seamlessly integrate these components to deliver a unified user experience. I created reference videos to depict the fluid end-to-end flow of the transition, ensuring that each team could visualize the final outcome.

Delivery

The delivery of this feature, however, was segmented into two distinct parts:

  1. Boot Up to Splash Section: This segment was delivered as a video. It encapsulated the Splash animation after the app start-up sequence,capturing the vibrant essence of the HBO Max brand as users first engage with the app.

  2. Splash to Profile Screen: This transition required detailed motion specifications to ensure a smooth animation. I utilized storyboards and motion tokens to convey these specifications, delivering them through Figma. This allowed for precise communication of the visual and motion design elements to the developers who were in charge of implementation.

Introducing the finalized design to our multi-platform engineering teams brought to light certain technical constraints. High-end platforms like tvOS and high-end Android TV could support our ideal implementation, while others like Roku and Fire Stick required adjustments due to their limited capabilities.

High-End

For platforms capable of handling more intense graphics, I utilized After Effects heavily, adapting files to fit technical constraints of powerful platforms. This process sometimes meant getting creative—or “hacking” the effects—to mimic intended animations without full software support.

Low-End

Conversely, for less capable devices, I simplified the graphics, reducing resolution, frame rate, and the complexity of the animations. This ensured a smooth performance across diverse hardware, supported by iterative testing and adjustments with the platform engineers and QA team.

Results

Upon launching, the refreshed app experience saw a 60% increase in customer engagement and a notable 20% improvement in brand association—an exciting testament to the project’s success.

Key Takeaways

  • Flexibility is crucial; attachment to initial ideas can hinder adaptability.

  • Championing your vision is necessary; defend what you believe is essential.

  • Striking a balance between creativity and practical feasibility is key.

  • Always prioritize user experience.

  • And a little tip: keeping dark chocolates at your desk can sweeten the challenging days of any project!

Reimagining the HBO Max launch experience was a comprehensive exercise in blending innovation with practical application, always with a focus on enriching the user’s first impression of the app.