DC FANDOME 2021 — the ultimate DC fan experience just got better

BRAND: DC
PROJECT: Fandome 2021
CATEGORIES: UX/UI, Ecommerce

Following the success of the first DC Fandome (2020), Warner Bros. pooled a large amount of resources into DC Fandome 2021, the live linear stream event in October. It was a huge collaboration between many teams and stakeholders within Warner Bros. From a UX/UI standpoint, I designed brand new experiences for the coming soon page, the road to Fandome, and day-of Fandome page. See below for a breakdown of this massive project.

Fandome-Keyart

What is DC Fandome?

DC FanDome is DC’s global virtual fan event featuring a live webcast and activities, for one day only, where we showcase our biggest movies, games, shows, comics and more and get up close and personal with the people behind the characters and worlds we love. There are exclusive reveals, behind the scenes looks, fan celebrations and many can’t-miss moments!

Fandome Returns

The project started with a teaser page announcing the return of the live event for 2021. The roadmap consisted of three phases: a announcement teaser site, a intermediate site leading up to the event, and finally, the live event iself in October.

Roadmap
Flows-RTF-1
Flows-Fandome-1

Wireframes +  Flows

To help bring clarity to the potentially complicated weaving of the Road to Fandome & Fandome event page, I created initial wireframes and userflows to visualize the initial mapping. This would allow everyone on our team as well as stakeholders to be able to chime in and flag anything from a bird's eye view of the two experiences.

The International Challenge

One of the biggest undertakings for Fandome 2021 was the push for these experiences to be global. Our broader team worked together (with all sorts of parties including legal) to come together to translate these experiences in 12 different languages, including languages like Spanish, Chinese, Russian, Italian, Japanese. An adjacent ask for the global experience was to design an age gate experience, which would push underaged users to a Kids Fandome experience.

Age-Gate-1
Kids-Fandome
Fandome-Share

The Road to Fandome

After the initial wireframe stage, I got the green light to go ahead and start designing the Road to Fandome in high fidelity. The top of the layout consisisted of a countdown timer to the actual event, a way to add it to your calendar, social links, and to top it all off - we had to build a language selector and translate the page for many languages for this global push! 

RTF-VideoTrailer-1

Embed Video Trailer

As your scroll down past the header section, you are greeted with an exciting new trailer for DC Fandome 2021. This is great, not only for fans who tuned in last year, but also for folks who are new to the idea of DC Fandome.

FAQs

For fans who might be new to this event, I added a frequently asked questions section to immediately answer any questions about the event and everything leading up to that.

RTF-FAQs
RTF-ContentRows

Ecosystem Integration

I designed the layout of the page to house multiple content rows such as a latest news related to DC Fandome, a DC Shop merch row, and more. Our goal for DC and DC Universe properties is to always try to circulate content across the ecosystem. We have different sites such as DC Comics, DC Universe Infinite, DC Shop, etc, so it is crucial to bring them into experiences like Fandome, but also allow link-outs to the content so our fans can familiarize themselves with the other parts of the bigger DC experience that we work hard to build and maintain.

Get to know DC Characters

The Get to Know modules are peppered in across the DC + DC Universe ecosystem. They are great because they give our content team the ability to highlight characters for any occasion, which not only helps with driving traffic, but it really reminds our fans that there is so much depth behind the characters. 

RTF-GetToKnow

Fandome Event

The countdown clock finally turned to zero, and on Saturday, October 16th, we kicked off DC Fandome 2021. We worked hard for the entire year leading up to this moment, so there was plenty of excitement and finger-crossing! See below for a breakdown of all of the exciting features that we built (and some that unfortunately did not make the cut) 

The Preshow

For the preshow before Fandome, I designed a UGC slideshow to showcase DC's lovely and talented fanbase.

Trivia

In addition to the UGC slideshow, I also designed a format for Trivia, which was another fun way to engage our fans while they wait for the main event to begin.

Emoji Swell

The emoji swell is a new feature that I designed for DC Fandome 2021. To iterate on the previous year's experience, we wanted to elevate it by incorporating more interaction between viewers so that they can feel like they're watching this live event together. Users could evoke their emotions through the select emojis and it would swell up towards the top of the screen. The emoji swell was a fun element that was used consistently throughout the show!

Thank you, world

As we wrap up this successful global event, I created a Thank You video sequence in multiple languages to thank DC fans from all over the world, for watching and joining us for the event. It was a nice way to wrap up Fandome 2021.

So, how did we do?

Well, I'm happy to announce that DC Fandome 2021 was a huge success! DC fans continue to be the best fans in the world. Here are some of the stats that we're very proud of after this huge undertaking that is DC Fandome.

3x

DC Fandome racked up a astonishing 66 million global views, a number that outstrips last year’s event that drew 22 million views worldwide

220

The global initiative was a sucess! DC Fandome was in more than 220 countries in 12 languages, and in more than 50 livestreams across social media platforms. Several hundred media outlets re-broadcasted the stream.

#1

Social sentiment was overwhelmingly positive, with #DCFanDome trending as No.1 on Twitter for eight hours in the U.S. DC FanDome also trended in the Top 50 in 53 countries around the world.

Got a question for me?

© JEFF HUANG 2022. ALL RIGHTS RESERVED.