Introducing our Latest UX Enhancements for Disney+

How we continue to evolve the Disney+ product design for fans old and new

By: Patrick Edelbacher, Principal Product Designer, Tony Sokolowski, Senior Director, Product Design, and Brian Ziffer, Director, Motion & Prototype

Disney+ is the home of world class content from our pillar Brands: Disney, Pixar, Marvel, Star Wars, National Geographic, and many more. This is made clear immediately on the Disney+ Home Screen, where our animated Brand Tiles are presented front and center.

We view important and highly-visible fan events like as Disney+ Day as opportunities to release new features that celebrate our content and bring lasting value to our viewers. With each decision we make, we aim to raise the bar permanently for our subscribers and how they experience our product.

This Disney+ Day, we’re proud to introduce two new formats for content as well as exciting updates to our Brand Screen designs.

All of the below titles and more are now streaming on Disney+.

New Content Formats

The Disney+ Home Screen is your portal to all of the great, new content available on the service on any given day. We are always working on improvements to help organize that content in a more compelling way.

To date, the Home Screen carousel and our animated Brand Tiles command most of the real estate on the Home Screen, especially on first view. As the viewer navigates down the screen, they will note that the predominant driver behind the familiar rows of content they will see is choice — we aim to show as many relevant titles as possible while minimizing interaction.

But what if there is content that we want to celebrate or highlight as special for viewers, to help viewers discover and engage with the content that is most relevant to them? Disney+ is, after all, the home of the best characters and stories in entertainment and our goal is to make engagement intuitive and delightful as only Disney+ can. With this goal in mind, our two new content formats are designed to enhance the visual hierarchy of the home screen, and to celebrate the content that our viewers come for. Let’s take a look at each one:

Inline Hero

Collections, which aggregate content for the viewer according to an editorial theme and are presented with a strong corresponding visual identity, have been a part of Disney+ since we launched two years ago. To date, the Collections experience has primarily focused on the destination, rather than the point of entry.

For Disney+ Day, we wanted to flip the script, and add a bold, new visual experience for a featured Collection on the Home Screen.

The current navigation experience compels a user to “discover” a Collection via a tile on the Home or Search screen, which is the same size and format as our single-title tiles. These tiles need to be presented in a set or series, which is an intuitive format in general…until the need to feature a single Collection arises.

Collection Tiles on Disney+ Home

The new Inline Hero, will feature a single Collection with a much stronger visual presence on the Home Screen itself: a logo, dedicated background, tiles for the most important titles, and a button to take viewers to the full Collection.

The Inline Hero on Disney+ Home

This will help our viewers identify featured content more quickly, and with a richer presentation, worthy of the world-class titles it presents.

Poster Row

We will also unveil the Poster Row for the Home Screen on select devices. Borrowing from the typical physical theater experience — where posters of the newest blockbuster films greet the audience — this new format will present exciting new additions to the Disney+ catalog through large, vertically-oriented tiles that are differentiated from the smaller, landscape-oriented tiles that make up the majority of the browse experience on web, tablet, and connected devices.

Poster Row on Disney+ Home

Research and analysis led us to create a multi-purpose design for the Poster Row. Specifically, our findings showed that viewers can experience a certain fatigue when browsing multiple rows of similar-looking tiles. The Marquee Collection and Poster Row give our editorial team additional tools to introduce variety to the browsing experience on the Disney+ Home Screen.

Brand Screen Heroes

One more significant update for Disney+ Day is not new, but rather a renewed presentation for our branded content: The Brand Landing Hero.

Brand Landing screens serve as content hubs for each of the pillar brands represented in Disney+.

The original five introduction videos and heroes for Disney, Pixar, Marvel, Star Wars, and National Geographic were released with the initial launch of Disney+ and were created by the product design team. Two years later, with the Brand screens still giving users an intuitive and delightful way to immerse themselves in our best-loved content, a creative refresh to the artwork seemed in order. Both the intro video clip (available on selected devices) and static hero image must represent the entire brand as it exists at the present, vibrant moment; in some cases, the representations of 2019-era brands had aged out. We want to keep these design elements compelling and timely to excite current fans and to draw in new ones.

For Disney+ Day, we collaborated with studio marketing teams from each Brand to deliver refreshed in-app creative experiences that establish environments that are as magical as the stories they host.

We created custom, updated intro videos for each Brand as well as supplemental static artwork featured prominently on Web and Mobile devices. The front-end updates brought contemporary characters, styling, and perspectives to each brand while under the hood structural improvements helped unify the canvas of the five individual screens to bring a cohesive and simplified framework for which future updates or takeovers could be frictionlessly executed.

Disney

Disney uses the castle as the unifying symbol for the many facets of Disney: animation, live-action, film, TV, etc., but in a more dynamic fashion, with fireworks and fly-through motion that fits our screen format much better than the original.

Pixar

Luxo the lamp symbolizes the magic and brilliance behind Pixar so acutely, we chose to refresh the scene by introducing the 3D text entrance and integrating lighting effects to merge the clip with the post-play UI transition. This update recognizes the innovation and stories Pixar has and continues to contribute.

Marvel

The original design featured the iconic Avengers characters, whereas the refresh showcases the MCU as it has been brought to Disney+. The new character group and animation showcases the diversity of the Marvel hero pantheon. Gorgeous detail in environmental and action elements are associated with each character.

Animating the Marvel hero first required a composition of characters, environment, and effect layers — all carefully masked, color corrected, and scaled. Adding motion to each piece and recreating some of the static effects turned the still image into a scene with depth and activity.

“It was important for us to find the right balance of movement within the composition that could bring the image to life while not overwhelming the viewer. A slow zoom allowed me to unify the scene — bringing the characters together while also maintaining their individuality.” — Ilma Bilic, Product Designer

Star Wars

We instantly loved the Star Wars title treatment introduced in The Mandalorian series and wanted to reflect the creative in Disney+. We collaborated with Lucasfilm to reformat the single line “Star Wars” identity from the series into the stacked lockup more representative of the wider Star Wars brand. Lucasfilm assembled the original animation team to apply the updated logo style to the classic Star Wars logo and refit the whole composition to our Brand Landing format.

National Geographic

We sought to create a more vibrant and compelling look at the natural world through the Nat Geo lens — more specifically the “portal.”

The timeless, gold icon that is so instantly recognizable as National Geographic is not a box or a frame; it’s actually a doorway that allows people to explore the natural world. In this update — apart from the visuals — we worked with National Geographic on a concept that incorporates the portal into the motion of the video.

Making the most of National Geographic visuals, we centered the animation of the intro video around the relation between humans and nature in a most unique way.

“A primary goal for creative was to communicate human interaction with nature through an exciting internal choreography, allowing fluid editing. All shots are cut to last one second and half and strategically timed remapped to match the breathing cadence of a human’s relaxed state.”- Anibal Koliren, Principal Product Designer

Our Process Highlights

Of course, as the saying goes, “it takes a village” to make it happen. Sometimes it takes a city. Here’s a quick rundown of our process highlights, to shine light on the many participants that engage to bring our content to life:

  • Time-sensitive brainstorm for feasible solutions.
  • Rapid prototyping of best solutions.
  • Engagement across all five studio creative teams
  • Parallel tracks for motion and static art — the trust required to successfully iterate blindly and simultaneously is huge on both sides.
  • Partnership with Development where Product Design volunteered research, troubleshooting, and potential solutions to minimize FED time implementing code based updates and improvements required for the ideal state.
  • QA teams reviewing all platforms and environments.
  • Programming collaborating with Prototype team to create interactive prototypes for both Executive Reviews and Interactive QA Motion & Design References featuring content grids

Thanks for reading! Until the next launch, we sincerely hope everyone enjoys the engagement improvements to the Disney+ content experience. Happy Disney+ Day!

Special thanks to the contributors for this blog post: Anibal Koliren, Ilma Bilic & Laura Marin.

disney-streaming

- A Disney Technology Blog