Demonstrating Innovation with a Gamified Microsite

  • Game Development
  • Software Development
  • Technical Consulting

(01)The Challenge

Rapiscan AS&E wanted to make a big impression while unveiling the MINI Z, a cutting-edge Z Backscatter imaging system. This first of its kind system helps officials detect threats and other contraband in heavily trafficked areas such as borders and ports. With Fast Forward’s help, the team at AS&E needed to create a captivating experience to announce the device that would effectively showcase the product’s capabilities, keep users engaged, and generate sales leads.

The MINI Z portable scanning device, displayed next to a tablet and a cell phone. The device is approximately one foot long with a boxy, roughly rectangular shape and an x-ray scanning surface at one end. There is a 2-handed offset handle in the center of its length, with a button marked X-ray On. The tablet and phone each display a 3D model of the device alongside images of four potential use contexts: city, port, border, and airfield.

(02)The Solution

To ensure the project was successful, the team at Fast Forward was brought in by the digital marketing experts at White Rhino to develop a gamified web experience. They had the creative idea, but were not sure how to implement it from a technical perspective. Users were invited to engage in a simulated search using the MINI Z, where they were tasked with uncovering hidden threats in several unique locations. Participants were able to become immersed in a digital expedition, seeing how the device could be used in a real-life situation. The interactive nature of the game allowed users to experience the MINI Z’s innovative functionality firsthand. Additionally, our team incorporated a quiz component into the website that educated users about the product’s features and benefits. User metrics and leads were captured and integrated with Salesforce, streamlining the sales process for the product.

A screenshot of the interactive scanning interface in the Meet Mini Z demo experience. It is centered on a closeup of a car wheel, with overlay text of Click to initiate scan. In the corner of the screen is a graphic with progress indicators for Threats and Rank, and a menu along the bottom of the screen displays other game location options. Two other screenshots of the scanning interface are partially visible to either side of the main image.

(03)The Result

The innovative approach of the MINI Z website garnered signification recognition and was awarded FWA Site of the Day for showcasing excellence in both design and user experience. The gamified experience successfully engaged potential customers, allowing them to interact with the product virtually while learning about its features. The integration with Salesforce ensured efficient lead management, enabling AS&E to capture valuable customer data. Overall, the MINI Z gamified website successfully accomplished its goal of creating an unforgettable introduction and generating leads, all while receiving industry recognition for its creative execution.

(04)Tech Notes

Working with rich media assets in web experiences can be a challenge, especially when trying to provide the best experience across both desktop and mobile devices. The design team wanted interactive segments built from 3D models. However, not all browsers offer the same support for 3D rendering. To support the widest range of devices, the design team exported the scenes as video and image sequences. This allowed us to offer the same experience on both desktop and mobile devices. Each playable location available in the game was established with a short full frame video. When a location is selected by a player, it then becomes the background for the gameplay. A lot of effort went into the animations. Not only did we leverage the GreenSock Animation Platform to speed up development, but we added subtle parallax animation that is controlled by a player’s mouse on desktop, or the accelerometer on their mobile devices. This gave the scenes more realistic 3D visuals. A custom mouse cursor simulated the MINI Z scanners’ viewport. As a participant dragged their cursor across the screen, a dynamic mask revealed an image below, creating the illusion of x-ray vision.

Featured Projects

Sebia Capillarys

Creating a Portable Product Exploration

  • 3D Animation
  • Design
  • Development
Museum of Fine Arts, Boston

Enhancing a Museum Experience

  • Development
  • Strategy
  • UX
  • Visual Design
Northeastern University Grad Studies

Simplifying Online Course Registration

  • Digital Strategy
  • Technical Consulting
  • Web Development

Let's Work Together

Ready to start a project? If you're excited, we're excited. Drop us a line to start the conversation.

Contact Us