GSK (GlaxoSmithKline) is a global biopharmaceutical company with a mission to unite science, technology, and talent to get ahead of disease together. Operating in over 100 countries, GSK develops innovative vaccines and medicines that impact millions of lives, from respiratory and immunology to infectious disease prevention.
The Touchscreen Vaccines Navigator transforms a static kiosk into a cinematic, self guided story about adult immunisation.
Attracting healthcare professionals with a looping hero film, crisp in language compliance copy, and a subtle “Touch to begin” gesture prompt, it awakens into an interactive world where five sculpted content pillars — Disease Burden, Vaccination Benefits, RSV, HZ, and Age Related Risk Factors fan out elegantly. Each tap reveals a tailored journey through complex science, simplified.
The Challenge
How do you turn dense, data heavy vaccine narratives into something that feels alive on a 55” touchscreen? GSK needed a field ready, offline compliant experience for medical congresses, one that could reset gracefully between visitors, play beautifully on large format hardware, and still collect engagement analytics without reliable Wi-Fi. Every pixel had to work double duty: cinematic at a distance, legible at arm’s length.
The Solution
I designed and built a modular interactive hub powered by GSAP a set of dynamic cards that morph, expand, and collapse with liquid transitions. Healthcare professionals can glance and go or dive deep into structured micro stories without ever leaving the main canvas.
Each topic hands off to a “tap-for-more” infographic, loaded via iframe, where complex concepts (immune senescence, RSV risk ladders, HZ case studies) unfold step by step. The experience feels continuous cinematic yet grounded in clinical clarity.
To make it booth-proof, a background watchdog script tracks engagement, surfaces a branded idle modal after 90 seconds, and automatically resets to the attract loop. Meanwhile, Data Insight Hub and Google Analytics log every interaction locally, syncing later when the network returns ensuring no data is lost, even on the show floor.
Key Features
- Cinematic welcome layer - Compliance ready visuals blur the looping hero film as topics fade gracefully into view.
- Five interactive pillars - MorphSVG powered buttons expand into deep-dive content with seamless “Learn more / Close” transitions.
- Multi-scene infographics - Progressive disclosure guides users through complex data, looping back elegantly to the hub.
- Smart footer navigation - Glides in when needed, offers related topics, then hides to preserve the immersive canvas.
- Kiosk-safe timeout system - Monitors embedded iframes via postMessage, shows a branded “What next?” modal, and auto resets the attract loop.
Tech Stack
- HTML5 / CSS3 / SVG Built for 55” portrait format touchscreens with custom typography and scalable assets.
- GSAP + MorphSVG Smooth timeline choreography, easing, and pointer state control.
- jQuery — Handles modal toggles, iframe routing, and infographic transitions.
- Data Insight Hub + Google Analytics Offline ready instrumentation that caches and replays engagement data.
Outcome
The result: a cinematic, data smart kiosk that turns clinical storytelling into interactive exploration, proof that even compliance heavy healthcare content can feel human, beautiful, and alive to touch.