A retro contest gameto showcase a range of laptops

Our client is a distributor of IT solutions serving businesses and their IT departments. As part of a marketing campaign, it wanted to promote a range of laptops with artificial intelligence features to a specific audience: professionals working in IT, innovation and hardware purchasing.

This audience already receives plenty of brochures. The client wanted a way in that could hold attention for a few minutes, then lead visitors to the product content.

The goal was twofold. And the marketing team needed to know what was happening inside the game.

1. First

   Introduce the products in a playful way

   A technical pitch lands poorly without context. The client wanted every stage of the game to teach something, linking a shared memory from computing history to a feature of the new laptops.

2. Second

   Collect sign-ups within a regulated framework

   A prize draw comes with obligations:

   • rules that can be consulted
   • clear eligibility conditions
   • a limited list of collected data
   • explicit consent from every participant
3. Finally

   Know what happens inside the game

   The marketing team wanted to know:

   • how many players start
   • how far they get
   • how they answer the questions
   • how many reach the end of the journey

We designed and built the whole campaign website, through to going live.

The copy and quiz questions live in data files that can be edited without touching the components.

The home page explains the mission: catch the icons on the board and answer the questions to move from one era to the next.

1. 01

   The board

   The board opens in a window styled after the era. The snake is steered with the keyboard arrow keys; on mobile, directional buttons appear below the board, which resizes to fit the screen. The player has three lives.

   ↑←↓→Keyboard arrow keys

   Directional buttons on mobile
2. 02

   The question

   Each icon caught pauses the game and opens a multiple-choice question. The player answers, sees the correct answer and an explanation linking that era to a feature of the new laptops, then resumes play. The next level changes the styling and colours.

   Multiple-choice questionGame paused

   ✓ Correct answer

   Explanation

   Resume play

3. 03

   The end screen

   After the sixth question, a congratulations screen shows the score and the player moves on to the product page, which presents the range and gives access to the sign-up.

   Congratulations

   Score

   On to the product page →

4. 04

   The sign-up

   The form asks for surname, first name, job title, company, and business email and phone number. Common personal email providers are rejected, and submission stays disabled until every field is filled in and consent is ticked. The contest rules, organised into articles, remain accessible throughout the journey.

   Prize-draw sign-up

   • Surname
   • First name
   • Job title
   • Company
   • Business email
   • Business phone

   ✕ Common personal email providers rejected

   Mandatory consent

   Submission disabled until everything is filled in

Conversion tracking goes through a tag manager. The code pushes named events to the data layer; the marketing team then configures its tags and goals without a new code release.

A 2D game engine inside a React interface, a lightweight static site, a Docker image and an automated deployment pipeline.

• React

  Drives the interface and the journey: home page, game windows, quiz, product page and rules. Splitting it into components let us reuse the same retro "window" for the game board, the questions and the end screen.

• TypeScript

  Types the application and the game scene. The interface and the engine constantly exchange information (pausing, changing level, steering): typing makes those exchanges reliable.

• Phaser

  A 2D game engine for the browser, it handles the game loop, sprites, collisions and sounds.

• Vite

  The development and build tool. It produces a lightweight static site and injects the tracking identifier for each environment at build time.

• Tailwind CSS

  Speeds up the responsive layout of the product pages. The retro styling stays in one stylesheet per level.

Schematic illustrations: the client, its products and the campaign remain anonymous.