The Batman – Jeff Huang

THE BATMAN — raising the bar for DC Shop collection pages

BRAND: DC
PROJECT: The Batman Hub Page & Shop Collection Page
CATEGORIES: UX/UI, Ecommerce

For the much anticipated release of The Batman, we worked with our DC stakeholders to create a unique collection page for the shop, as well as a separate landing page to promote the movie and the characters surrounding the story. The final experiences were very well received both internally within WarnerMedia and externally.

VIEW LIVE SITE

The Goal

For a high stakes IP like Batman, we aimed to craft a experience that would translate the grungy vibe of the new Matt Reeves movie. The DC Shop's collection pages have been pretty tame in the past, so we wanted to elevate the bar with this one, and introduce a much more immersive and interactive experience aimed to wow users.

Full-bleed Video Header

To iterate on the previous version of the shop collection page, we designed a full-bleed video header to immediately create a sense of immersion. To not sacrifice the goal of the page (to shop), we made sure to include a CTA that sends you right to the full collection if users wish to skip the immersive experience.

Interactivity

We collaborated with our talented developer teammates to create slick transitions throughout the page that blends striking visuals with functional rows of shop content.

Character Driven

With the goal to tie in the Batman movie with this shop experience, we tried to incorporate elements that nodd to specific characters of the movie. In this example, we wanted to bring out the Riddler, so we used a word animation system that transforms a whirlwind of question marks into the true desription copy.

Featured header with the feature 4, which directs traffic to comics, shop, movies & tv, and community

Embed video to support the page, this one features a interview with the talent

Comic content row, points to year one Batman comics, which the movie is based on

Get to Know, is a carousel that points to character bio pages on DC Comics

The Batman - Landing Page

In conjunction with the new DC shop collection page, we also created a Batman landing page which promotes everything related to the movie — from news, comics, character bios, merch, and more. We made sure to keep the same visual language across the board to tie both pages together. This page acted as the perfect funnel into everything about our new Batman.

So, how did we do?

The Batman release window drove significant earned lift to our key Brand and Franchise digital channels across social, web, and mobile. Because the release did so well, it allowed our immersive DC Shop + Batman Hub experiences to truly shine.

DC Shop

$116,709

The Batman (movie) fueled Batman (the character) as DC Shop’s Top Selling Character with $116,709 in sales and 3640 units sold. Although the dollar amount sold of the Batman collection was modest, the total units sold spiked because of the theatrical release and the new immersive experience.

Batman Hub

18%

The hub drove an 18% conversion to DC Shop vs an average of 5% on DC Comics. It was the #3 source of traffic to DC Shop in March and Feb. Also, thebatman.com was linked to our Hub page and became the #2 source of traffic during The Batman premier week.

Got a question for me?

Reach Out