This HTML5 mobile responsive microsite project was designed and developed for Webroot and in coordination with Lionsgate films, preceding the release of the Divergent Series: Insurgent movie in March of 2015. This particular microsite campaign featured an online scavenger hunt, where participants would search for clues across various social media channels to piece together a secret URL, and then visit that secret URL and solve an interactive, drag & drop HTML5 puzzle to complete the scavenger hunt. The microsite featured HTML5 video background assets, and parallax scrolling throughout the microsite to create a modern, and cool experience for users at the various stages of the scavenger hunt.
Responsive Microsite Design Considerations
Many of the digital assets for this project were provided by Lionsgate, and there was frequent creative review during the design and development of the Insurgent microsite to be sure the assets were being used in an appropriate way in conjunction with other movie marketing efforts. Based on the overall theme of the movie and of this campaign in particular, a dark site with inverted text was the best creative fit, and the abstract HTML5 video background footage taken from various movie assets created a compelling and interesting site design that helped to engage users in the beginning of the scavenger hunt.
Based on the target audience for this campaign, we knew in advance that the mobile segment of visitors was likely to be very high, so the site was optimized for mobile responsiveness and device detection to provide the best possible experience. As it turns out, nearly 70% of the traffic to the microsite was smartphones and tablets, with desktop users at only 30%.
HTML5 Drag & Drop Puzzle
Once players solved the secret URL from clues they collected, they arrived at the last step of the challenge, which was to solve a drag & drop HTML5 interactive puzzle within a very short amount of time. The solution was actually an official movie poster, and was shown briefly when they first arrived on the page. Then the pieces scrambled, and the timer started counting down. Users who solved the puzzle before the timer expired were automatically directed to the “success” pathway, where they were officially entered into the winners group and had other special product offerings for the Webroot AntiVirus for PC Gamers product. Users who did not complete the puzzle in time arrived at a separate landing page, where they were presented with different messaging and options to try the puzzle again. The HTML5 puzzle worked extremely well across devices, including touch enabled devices and devices that used a mouse or stylus device, and we saw a high level of engagement and social discussion about this step in the campaign, as well as the overall campaign concept and execution.
WordPress Content Management & Security
Although this was microsite and didn’t have a large number of pages and posts, it was still custom build on WordPress as a custom content management system leveraging our CloudStrap mobile responsive starter theme. There was also a high level of security in place on this WordPress site due to the nature of the clients involved, and while there were many attempts and malicious traffic, the site security worked perfectly and was never compromised. We also built a tight integration with email address collection on the site with Gravity Forms and Exact Target email marketing lists to keep track of contest winners both within the WordPress site, as well as externally sending data into the correct lists within Exact Target. This custom WordPress content management system made it extremely easy for the client to make adjustments to the content on the microsite homepage, and contest success and failure pages, as well as adjusting other content pages like legal content pages, content rules, and SEO data throughout the microsite.