Q Bio

For the landing page we conceptualised and animated a 3D scene of a futuristic body moving into the body scanner. The purpose of this was to create a highly captivating visual to peak the interest of the viewer immediately on the homepage. As the user scrolls down the page they are taken through the story of problem faced by Q Bio and the problem they solve before introducing their three technologies. This feature was build using GSAP, an Javascript based animation library.

To showcase the capabilities of Q Bios Anatomical Foundation Model, we created a looping animation of an exploded view of the organs captured in 3D by their system. This visualisation displays the physical volume of each organ with a label revealed at the end of the animation loop.

On the homepage there are multiple looping lottie animations that help to tell the story of the problem / solution. These play as the user scrolls into that section and pause as they scroll out for optimisation.

On the Mark I page there is a section comparing the differences in scan times between Q Bio's Inspire and Delta systems. The purpose of this interaction is to show the advances capabilities of their systems compared to the industry standard times. There are draggable sliders allowing the user to scrub through the lottie animations which provides some really detailed insight into their performance.

On the Mark I page I created a looping interaction showing a real X Ray as it scans a person body and tags their organs. This was to showcase the advances scan times and accuracy of the Q Bio systems.

On the blog page I created an infinitely looping slider showcasing their featured blog posters. This advanced slider functionality was achieved using splide.js.