Dynamic Page States

Overview

Ramping up promotion for the Season 2 premiere of Fear the Walking Dead, the cast headed to Comic-Con in San Diego. After spending a day meeting with fans and answering panel questions, Actor Lorenzo Henrie hosted another event via video streaming with fans who couldn’t make it to Comic-Con.

The goal of the site was to create a single location for fans to register for the event, watch the live video stream and as repository for all of the post event content. Given the unique requirements, I decided it would be best to utilize js and jquery to switch between the first two phases and build out a separate site for the third.

Phase 1: Registration
For the initial phase of the site we wanted to introduce fans to the TeleForum concept while pushing them to register for the event. Because many were new to the technology and hesitant to provide their phone and email, we needed a way to convey what would go on during the event. I decided the best way to do this would be through a FAQ page via a jQuery slide out menu. When fans clicked the underlined “interactive call” text, the slide out menu entered the screen from the left and walked through the five most frequently asked questions.

From here, fans could either choose to register for Lorenzo Henrie to call them when he went live or directed them to come back to the site at the time of the event to watch the live video stream. No matter the platform the fan chose to participate on, they would be able to ask live questions and participate in interactive polls.

As for the registration component, this varied depending upon the device. For desktop and laptop users the registration form was contained within a popup, activated on click. For mobile users the form was contained directly on the page. No matter the choice of device for registration they all funneled into the same data base, via the Vekeo Registration API.

Phase 2: Live Content
Pushing new files to the FTP 20 minutes before the event began to activate the streaming interface wasn’t an option – there was too much that could go wrong. Instead, Phase 2 of the site was built into the files for Phase 1. Using JS and jQuery, I was able to dynamically change the page elements at a set date and time. This included changing the text for the registration component (desktop), activating and displaying the streaming interface, and re-working how the registration form displayed on mobile devices.

Subsequently, the registration form was no longer the focal point of the site during Phase 2. I decided it would be best to move the form on mobile devices into a popup, similar to the original desktop version. However, popup forms on mobile devices don’t offer the best user experience. Instead the form was contained within a slide up menu that remained fixed to the bottom of the page, always visible, allowing the client to continue collecting participant data beyond the registration period.

The streaming interface was now the focal point of the page, allowing users to watch the live stream, participate in live Q&A as well as interactive polls.

Phase 3: On Demand
The final phase of the site’s lifespan was uploaded immediately following the live stream. It recapped the event, allowing users to watch the full video stream or listen to audio highlights. It was during this phase that the site’s layout changed the most dramatically to contain all of the on demand content. The video was included directly within the HTML but to fulfill play count requirements, the audio highlights were loaded to SoundCloud and embed within the page.

Registration elements from Phase 2 remained, giving visitors the option to sign up for future events.

While you can no longer view Phases 1 and 2 of the design, I encourage you to still visit the page to see Phase 3 as well as a majority of the jQuery interactive features. If you’d like to view the code package from Phase 1 and 2 check out my GitHub repository.