Client Work
Interactive QR Code Content Explorer
An interactive exhibition experience created for a leading US media company at Cannes Lions.
Visitors used physical record-cover props to scan QR codes and explore related digital content on a large-format touchscreen.
Our Role: Front-end development and QR code integration.
Note: Client branding, imagery and content are withheld for confidentiality.
Key Features
- QR code recognition via an integrated camera
- Physical props linked to digital content
- Dynamic, code-triggered content display
- Idle-state video to attract visitor attention
- Portrait kiosk interface optimised for a large-format display
How It Works
The experience combined physical props with a digital content explorer, allowing visitors to discover information through objects rather than conventional on-screen menus.
Visitors selected a record cover from the collection and presented its QR code to a discreetly integrated camera within the kiosk. Each code was associated with a specific topic, allowing the application to identify the selection and display the relevant content.
The interface presented the associated information directly on screen, creating a simple connection between the physical object and its digital content. This allowed visitors to explore different topics through a straightforward scan-and-discover interaction.
When the kiosk was idle, an engaging video played on screen to attract attention and introduce the experience to passing visitors, helping draw them into the interaction.
Physical record covers become the entry point to digital content, connecting tangible objects with an intuitive, scan-to-explore experience.
Why It Works
- Connects physical objects with relevant digital content
- Creates a visually engaging experience that attracts attention from a distance
- Makes exploring content playful and intuitive
Technical Summary
- Web-based front-end built with HTML, CSS and JavaScript
- JavaScript QR code recognition library
- Camera-based QR code scanning
- Designed for a 49-inch 4K portrait touchscreen
More Technical Information
- The application was built as a web-based front-end using HTML, CSS and JavaScript, with a QR code recognition library handling the scanning functionality
- The QR code library processed the live video stream from a camera discreetly integrated into the kiosk. When a record cover was presented, the application recognised its QR code and used the decoded value to identify and display the corresponding content