Introduction

Alien Invasion is our latest interactive marketing experiment. We believe these projects offer companies a unique and effective way to raise awareness, encourage engagement and to drive traffic. They also give our team the chance to step outside their comfort zones and work together to try out new ideas, techniques and technologies, which help us create innovative, progressive projects for clients.

The idea and the technology

Our Lead Technical Oli had the idea to create an interactive marketing experiment around aliens invading the studio, which we developed into a project that would be fun for both users and the team.

It was decided that we would build a web-controlled blaster, which visitors could use to help us ‘defend our mainframe’ against alien hackers. Three targets around the studio would allow visitors to score points, in an attempt to reach the top of the leaderboard. To add an extra element of interactivity we decided to dress up as the aliens, as we knew from previous experiments that users would love the chance to aim at us, even if it meant they didn’t get a high score.

blaster

The blaster was built using custom 3D printed parts and fixings, printed in co-polyester for maximum strength. This also included designing and 3D printing custom flywheels that were mounted on powerful drone motors to ensure maximum contact and power when firing pellets. A 720p webcam was fixed to a custom mount above the manifold, along with pan and angle servos to help players with aim and accuracy. A dual cartridge system powered with two strong solenoids meant that the blaster never ran out of ammo and consistently fired rounds.

The story and the website

We wanted to offer users an entertaining and engaging experience, so we created a brief backstory to explain why they should take control of our blaster, and to encourage them to share our project on social media. The design for alien invasion evolved from experimenting with exploded grids, artistic typography and diverse layouts, to producing something both beautiful and usable. The goal for producing the user interface for this project was to provide simple, easy to use controls, with added visual flair to demonstrate our design capabilities.

tweet-promo-2

We wanted to utilise high resolution photos of sightings in the landing page design, however we found a surprising lack of high quality photos of aliens on the internet, so we decided to produce some ourselves. It only took us a few hours walking around Portsmouth to spot various UFOs, it was our lucky day!

tw-spinnaker tw-wightlink

The gameplay user interface was based on our original UI for our robotic arm Sid, as we wanted to keep a consistency for users who were familiar with our earlier interactive marketing projects. We knew there would be limitations relating to locating the targets via a live stream to our office, so we created a ‘radar visualisation’ style to be included in the game controls, meaning that users would be able to see exactly where the targets were located in relation to the blaster.

We made sure to include all of the essential game controls on the top half of the web page, so that users could view and play the game without having to scroll. We dropped the leaderboard, statistics and backstory information into the lower half of the page so that users would have reading material while they were queuing to play.

Players could join the queue using their Twitter username or just play anonymously. The server would give the player at the front of the queue 35 seconds to control the blaster, using their keyboard direction keys and spacebar to move the blaster left, right and fire. Visitors waiting to play or just watching the action could see everything the current player could, including 2 camera angles all streaming with less than 1 second delay. They could even see the keyboard controls being highlighted as the player pressed them which allowed them to work out the controls before their turn.

screen-shot-2016-10-31-at-19-52-12

If the player used their Twitter name when joining the queue then their final score would appear on the realtime leaderboard.

Due to Apple web app restrictions mobile users could not view the video stream and play at the same time, but we still created a mobile compatible live video stream so they could get a teaser before playing on their laptop instead.

Alien Invasion day

We decided to bring Alien Invasion to the world on Halloween. We began the day by putting out social media posts of photoshopped images showing UFOs around Portsmouth, as a way to let our followers know there was a new interactive marketing experiment on the way. Once we launched the site the team took turns in front of the webcam, dressed as the aliens in labcoats.

5sec-promo-gif-twitter

To coincide with the site going live we had a social media campaign designed for Twitter, Facebook and Instagram, in keeping with the backstory. We quickly started to see traffic to the Alien Invasion site as our posts were shared. On-screen trackers showed that by mid afternoon we had over 200 people watching the live stream from the studio, and over 40 players in the queue waiting to take control of the blaster.

We went on to hit the front page of Hacker News, and we saw a good level of traffic from Reddit. As users battled for the top spot on the leaderboard, we also saw visits to other pages on our main website increase, as visitors looked at our previous interactive marketing experiments and explored our portfolio.

The end result

After weeks of hard work and planning by the whole team it was great to see the project in action, with consistent levels of visitors watching the experiment and getting involved. We saw some great interaction on social media, with our tweets making over 4000 impressions in one day and our Facebook posts reaching over 3800 users, leading to increased traffic across our entire site.

screen-shot-2016-10-31-at-17-44-19 screen-shot-2016-10-31-at-17-44-35

As a team we had a lot of fun with this project, especially trying to navigate our way around a darkened studio wearing bulbous alien masks! This has been another fantastic opportunity to really push ourselves by learning new skills away from our day jobs and testing out new technologies. We hope Alien Invasion inspires other companies to speak to us about their own interactive marketing experiment, so we can help design and build a custom project to really help them stand out from their competition.