Centogene Solutions

How we created an immersive, digital web experience for a rare disease company

7 min readDec 7, 2020

Every year around half a million children worldwide are born with a rare, hereditary disease. Obtaining a definitive diagnosis can be difficult, time consuming and unreliable.

Centogene is a rare disease company focusing on transforming clinical, genetic and biochemical data into medical solutions for patients to battle and understand rare disease more effectively.

We teamed up with Centogene to tell the story of their dedication to transforming the science of genetic information into enhanced solutions for patients, pharma and doctors in an immersive, digital experience.

Art Direction

Unlike other clients we have worked with, Centogene it not in the business of content creation or design. Therefor it was up to us to build every visual element from scratch.

We started off by exploring the look and feel of the environment we wanted to create. Soft and clean, but tactile and fragile it what we were aiming for.

We decided to go for a light, slightly textured, clinical look with a sharp depth of field giving very cinematic results. A subtle particle cloud enriches the environment and gives cohesion to the different sections that make up the experience.

The solutions

Rare diseases are highly complex and the field is fairly undiscovered which requires a systematic and well thought-through approach to understand and diagnose these types of diseases.

Through combining pharmaceutical, patient and knowledge solutions, Centogene has created a holistic system in which they can best tackle this topic. Pharmaceutical medicine fuels patient treatment, which then fuels patient recovery and discovery.

Pharma Solutions

From a single drop of blood Centogene develops innovative drugs and medicine. The acceleration of preclinical, clinical and commercial programs are driven through strong collaborations with pharmaceutical partnerships.

We visualised this solution with an unfinished capsule that the user can assemble by scrolling through the section.

In the early phases we explored a wireframe look that would complete itself to symbolise the development of the medicine.

We later deviated from the wireframe idea and decided to clarify the concept by simply closing the capsule while capturing all the “medicine” inside.

It was crucial for us that the animation of this visualisation was perfect. We explored a variety of different motion paths with diverse timing and easing.

Capsule animation fine-tuning

During development we explored a real-time physics implementation on the spheres, making them interact with each other and with the cursor. Although this seemed like a fun enhancement we noticed that the real-time simulation took away the control we needed over the spheres to capture them inside the capsule.

In our next iteration we decided to bake a physics simulation in Cinema4D to an animation timeline. We combined this with the animation of the capsule halves and exported this to a GLTF file.

To decrease draw calls in WebGL, the individual sphere models from the GLTF file were replaced with an instanced version that was in turn controlled by the baked physics simulation exported to the same file. On top of that a procedural idle animation was added to the sphere’s vertex shader.

Patient Solutions

There are more than 3800 rare diseases. Centogene focuses on creating Biomarkers that find and locate abnormal DNA patterns, analyse their clinical and epidemiologic existence and then find the fitting pharmaceutical solution. Finding these patterns in the DNA is the tricky part, that takes a high level of precision on a very fine molecular level.

In this scene we wanted to visualise how Centogene can find a defect in a single strand within a jungle of DNA.

The depth of field effect became an important part of this scene in order to direct the user’s focus to the specific strand. In fact, every scene in the website has a distinct focal length, aperture and distance to the subject.

The position, scale and rotation of the helixes was determined in Cinema4D and stored in json file. On initialisation of the instanced geometry these values were applied to the individual matrixes. A rotation matrix was then multiplied in the vertex shader to apply constant movement to the geometries.

To highlight the single DNA strand we painted the explicit vertices and used that in combination with the instance ID of the designated geometry to blend in a white color inside the fragment shader.

Knowledge Solutions

Centogene uses artificial intelligence models to rapidly process large amounts of patient data very effectively and reliably. A neural network can automatically combine genetic and patient data and find fitting pharmaceutical solutions. The use of intelligent software can—together with a database of clinical symptoms and genetic data—calculate disease types more accurately than ever before.

Centogene uses these knowledge methods to close a highly complex loop between Pharma, Patient and Knowledge solutions to expose the highly undiscovered field of rare diseases.

To symbolise the conversion of DNA to data, we created a transition from a helix shape to a data formation. It was clear to us that we didn’t want to visualise data with the obvious arrays of digits, since that wouldn’t fit the clinical look we were going for.

We went through many iterations for this visual. Our first version consisted of simple horizontal lines with primitive geometries that would align with each other, forming a precise grid.

We figured the helix formation was too abstract in this version and later ended up with a more figurative arrangement while keeping it possible to rearrange the construction to a grid layout.

Human DNA contains a massive amount of data. We explored ways to show this almost infinite number by letting the geometries overflow the viewport and by fading them into the distance. Though the application of a heavy fog and a sharp depth of field this scene elegantly conveys this idea.

For precise responsive control the formations were procedurally generated and rendered the shapes with two instanced geometries, one for the spheres and one for the cubes.

A color attribute was randomly populated for 90% white and 10% red geometries, and just like in previous scenes, a subtle idle animation was applied within the vertex shader.

With the combination of these visual and interactive components we managed to create a coherent flow of content that tells the story of Centogene in an engaging experience, showcasing all of Centogene’s complex solutions in a sterile and fragile environment that users could fully immerse in.