Project Overview

With a membership exceeding 21,000 across 74 countries, the Institute of Biomedical Science (IBMS) is the leading professional body for scientists, support staff, and students in the biomedical science field.

In collaboration with Liquona, we designed and developed an engaging landing page for IBMS. By reusing and adapting code and assets from a previous IBMS landing page, we quickly delivered an on-brand, and cost-effective solution without compromising on creativity or impact. The result is a visually appealing, fast-loading, and accessible page that effectively supports IBMS’s outreach and engagement goals.

Key Challenges

  • Cross-medium navigation: The campaign spans print, video, and digital formats. A key challenge was ensuring users could seamlessly transition between these mediums—particularly from printed material to the relevant online video content based on their level of qualification.

  • User engagement: The landing page needed to be visually engaging and intuitive enough to capture users’ attention and encourage interaction with the video content.

  • In-depth analytics: It was essential to accurately measure the campaign’s effectiveness, requiring detailed reporting on user engagement and behaviour across entry points.

Solution

  • Targeted navigation: Unique QR codes were generated for each print variant, guiding most users directly to the relevant section of the landing page. For those arriving via other means, intuitive navigation ensured quick access to the correct content.

  • Interactive animations: To increase engagement, we incorporated interactive animations that responded to user actions, making the experience more dynamic and memorable.

  • Analytics-ready QR codes: Each QR code was embedded with campaign-specific parameters to allow granular tracking of user behaviour based on entry source.

  • Advanced Google Analytics integration: Going beyond a basic setup, we implemented detailed event tracking and custom reporting to gain deeper insights into user interactions and video engagement.

Technical Implementation

  • Vue.js front end: The landing page was built as a single-page application using Vue.js, with tween.js powering smooth and responsive animations.

  • CI-powered deployment: Our continuous integration pipeline handled QR code generation at build time and automated deployment of updates, ensuring accuracy and speed throughout the campaign lifecycle.

Results

The finished landing page is performant, responsive, and good looking.

The comprehensive analytics allows us to track users from individual printed sources through to watching the intended video.

Thoughts and Feelings

The animated video game aesthetic is fun and engaging. I enjoyed working on this one, particularly programming the detailed animations.