DTU Biosustain - MicrobeXplorer
Gow do you spark curiosity in high school students about something as complex as microbes, bacteria, and bioscience? You would probably have to approach it in a completely different way. The result is an explorative experience. No reading from top to bottom, rather move around, find interesting facts, gather all the bricks to the puzzle. A way of learning, where we trick the brain into not feeling bored.
Zooming into the hidden world of microbes
We designed the frontpage intro as the final step, after defining the visual direction, structure, creative concept, content, and four stories. This allowed the entry point to connect and frame the entire experience. The idea was to let users zoom into the hidden world of microbes. The frontpage becomes a 3D universe, inviting visitors to explore and navigate between the different stories—an immersive way of turning complex science into an engaging digital experience.
Zooming into the hidden world of microbes
We designed the frontpage intro as the final step, after defining the visual direction, structure, creative concept, content, and four stories. This allowed the entry point to connect and frame the entire experience. The idea was to let users zoom into the hidden world of microbes. The frontpage becomes a 3D universe, inviting visitors to explore and navigate between the different stories—an immersive way of turning complex science into an engaging digital experience.
Zooming into the hidden world of microbes
We designed the frontpage intro as the final step, after defining the visual direction, structure, creative concept, content, and four stories. This allowed the entry point to connect and frame the entire experience. The idea was to let users zoom into the hidden world of microbes. The frontpage becomes a 3D universe, inviting visitors to explore and navigate between the different stories—an immersive way of turning complex science into an engaging digital experience.
Zooming into the hidden world of microbes
We designed the frontpage intro as the final step, after defining the visual direction, structure, creative concept, content, and four stories. This allowed the entry point to connect and frame the entire experience. The idea was to let users zoom into the hidden world of microbes. The frontpage becomes a 3D universe, inviting visitors to explore and navigate between the different stories—an immersive way of turning complex science into an engaging digital experience.
Zooming into the hidden world of microbes
We designed the frontpage intro as the final step, after defining the visual direction, structure, creative concept, content, and four stories. This allowed the entry point to connect and frame the entire experience. The idea was to let users zoom into the hidden world of microbes. The frontpage becomes a 3D universe, inviting visitors to explore and navigate between the different stories—an immersive way of turning complex science into an engaging digital experience.
A different perspective
We wanted to play with perspective—showing that while microbes are invisible to the naked eye, they are giants in importance when it comes to solving future sustainability challenges. To emphasize this, we designed a giant interactive 3D model of the E. coli microbe. It appears on the site as if it were a massive Star Wars–like spaceship, giving visitors an entirely new perspective on its scale and significance. The model was crafted in 3D and integrated into the site with WebGL for a smooth, immersive effect.
A different perspective
We wanted to play with perspective—showing that while microbes are invisible to the naked eye, they are giants in importance when it comes to solving future sustainability challenges. To emphasize this, we designed a giant interactive 3D model of the E. coli microbe. It appears on the site as if it were a massive Star Wars–like spaceship, giving visitors an entirely new perspective on its scale and significance. The model was crafted in 3D and integrated into the site with WebGL for a smooth, immersive effect.
A different perspective
We wanted to play with perspective—showing that while microbes are invisible to the naked eye, they are giants in importance when it comes to solving future sustainability challenges. To emphasize this, we designed a giant interactive 3D model of the E. coli microbe. It appears on the site as if it were a massive Star Wars–like spaceship, giving visitors an entirely new perspective on its scale and significance. The model was crafted in 3D and integrated into the site with WebGL for a smooth, immersive effect.
A different perspective
We wanted to play with perspective—showing that while microbes are invisible to the naked eye, they are giants in importance when it comes to solving future sustainability challenges. To emphasize this, we designed a giant interactive 3D model of the E. coli microbe. It appears on the site as if it were a massive Star Wars–like spaceship, giving visitors an entirely new perspective on its scale and significance. The model was crafted in 3D and integrated into the site with WebGL for a smooth, immersive effect.
A different perspective
We wanted to play with perspective—showing that while microbes are invisible to the naked eye, they are giants in importance when it comes to solving future sustainability challenges. To emphasize this, we designed a giant interactive 3D model of the E. coli microbe. It appears on the site as if it were a massive Star Wars–like spaceship, giving visitors an entirely new perspective on its scale and significance. The model was crafted in 3D and integrated into the site with WebGL for a smooth, immersive effect.
Complex scientific principle as playful, hands-on exploration
How do you explain the growth rate of microbes in a way that feels engaging rather than abstract? Instead of relying on dry statistics and numbers, we created a visual demonstration of exponential growth—an interactive experience that makes the concept both clear and memorable. Built with 3D and WebGL, the functionality responds dynamically to the user, turning a complex scientific principle into a playful, hands-on exploration.
Complex scientific principle as playful, hands-on exploration
How do you explain the growth rate of microbes in a way that feels engaging rather than abstract? Instead of relying on dry statistics and numbers, we created a visual demonstration of exponential growth—an interactive experience that makes the concept both clear and memorable. Built with 3D and WebGL, the functionality responds dynamically to the user, turning a complex scientific principle into a playful, hands-on exploration.
Complex scientific principle as playful, hands-on exploration
How do you explain the growth rate of microbes in a way that feels engaging rather than abstract? Instead of relying on dry statistics and numbers, we created a visual demonstration of exponential growth—an interactive experience that makes the concept both clear and memorable. Built with 3D and WebGL, the functionality responds dynamically to the user, turning a complex scientific principle into a playful, hands-on exploration.
Complex scientific principle as playful, hands-on exploration
How do you explain the growth rate of microbes in a way that feels engaging rather than abstract? Instead of relying on dry statistics and numbers, we created a visual demonstration of exponential growth—an interactive experience that makes the concept both clear and memorable. Built with 3D and WebGL, the functionality responds dynamically to the user, turning a complex scientific principle into a playful, hands-on exploration.
Complex scientific principle as playful, hands-on exploration
How do you explain the growth rate of microbes in a way that feels engaging rather than abstract? Instead of relying on dry statistics and numbers, we created a visual demonstration of exponential growth—an interactive experience that makes the concept both clear and memorable. Built with 3D and WebGL, the functionality responds dynamically to the user, turning a complex scientific principle into a playful, hands-on exploration.
A correct E. Coli
In most schoolbooks, the E. coli microbe is often depicted inaccurately or without enough detail. With input from DTU Biosustain scientists, we learned just how important it was to represent it correctly. As accuracy was a central ambition for the project, we created an interactive 3D model that highlights and describes all the essential parts of the E. coli microbe—combining scientific precision with an engaging user experience.
A correct E. Coli
In most schoolbooks, the E. coli microbe is often depicted inaccurately or without enough detail. With input from DTU Biosustain scientists, we learned just how important it was to represent it correctly. As accuracy was a central ambition for the project, we created an interactive 3D model that highlights and describes all the essential parts of the E. coli microbe—combining scientific precision with an engaging user experience.
A correct E. Coli
In most schoolbooks, the E. coli microbe is often depicted inaccurately or without enough detail. With input from DTU Biosustain scientists, we learned just how important it was to represent it correctly. As accuracy was a central ambition for the project, we created an interactive 3D model that highlights and describes all the essential parts of the E. coli microbe—combining scientific precision with an engaging user experience.
A correct E. Coli
In most schoolbooks, the E. coli microbe is often depicted inaccurately or without enough detail. With input from DTU Biosustain scientists, we learned just how important it was to represent it correctly. As accuracy was a central ambition for the project, we created an interactive 3D model that highlights and describes all the essential parts of the E. coli microbe—combining scientific precision with an engaging user experience.
A correct E. Coli
In most schoolbooks, the E. coli microbe is often depicted inaccurately or without enough detail. With input from DTU Biosustain scientists, we learned just how important it was to represent it correctly. As accuracy was a central ambition for the project, we created an interactive 3D model that highlights and describes all the essential parts of the E. coli microbe—combining scientific precision with an engaging user experience.
The Truffle Boar Shows The Way
One of the stories highlighting the importance of microbes focused on truffles—and the wild boar’s crucial role in their life cycle. To bring this to life, we designed a 3D boar that walks in and begins searching the soil, setting the stage for the story in an exciting way. As a playful easter egg, clicking the boar triggers a fun animated reaction, adding an extra layer of surprise and engagement for the visitor.
The Truffle Boar Shows The Way
One of the stories highlighting the importance of microbes focused on truffles—and the wild boar’s crucial role in their life cycle. To bring this to life, we designed a 3D boar that walks in and begins searching the soil, setting the stage for the story in an exciting way. As a playful easter egg, clicking the boar triggers a fun animated reaction, adding an extra layer of surprise and engagement for the visitor.
The Truffle Boar Shows The Way
One of the stories highlighting the importance of microbes focused on truffles—and the wild boar’s crucial role in their life cycle. To bring this to life, we designed a 3D boar that walks in and begins searching the soil, setting the stage for the story in an exciting way. As a playful easter egg, clicking the boar triggers a fun animated reaction, adding an extra layer of surprise and engagement for the visitor.
The Truffle Boar Shows The Way
One of the stories highlighting the importance of microbes focused on truffles—and the wild boar’s crucial role in their life cycle. To bring this to life, we designed a 3D boar that walks in and begins searching the soil, setting the stage for the story in an exciting way. As a playful easter egg, clicking the boar triggers a fun animated reaction, adding an extra layer of surprise and engagement for the visitor.
The Truffle Boar Shows The Way
One of the stories highlighting the importance of microbes focused on truffles—and the wild boar’s crucial role in their life cycle. To bring this to life, we designed a 3D boar that walks in and begins searching the soil, setting the stage for the story in an exciting way. As a playful easter egg, clicking the boar triggers a fun animated reaction, adding an extra layer of surprise and engagement for the visitor.
Spider Easter Egg
An essential part of the concept was to keep the experience realistic yet engaging. In the story about food, we illustrated how healthy soil rich in microbes leads to nutritious products—supporting not only taste, but also gut health, mood, and overall wellbeing. To spark curiosity and invite exploration, we added small interactive easter eggs throughout the site. One playful example is a spider that jumps out on the screen when clicked, creating a fun surprise moment for visitors.
Spider Easter Egg
An essential part of the concept was to keep the experience realistic yet engaging. In the story about food, we illustrated how healthy soil rich in microbes leads to nutritious products—supporting not only taste, but also gut health, mood, and overall wellbeing. To spark curiosity and invite exploration, we added small interactive easter eggs throughout the site. One playful example is a spider that jumps out on the screen when clicked, creating a fun surprise moment for visitors.
Spider Easter Egg
An essential part of the concept was to keep the experience realistic yet engaging. In the story about food, we illustrated how healthy soil rich in microbes leads to nutritious products—supporting not only taste, but also gut health, mood, and overall wellbeing. To spark curiosity and invite exploration, we added small interactive easter eggs throughout the site. One playful example is a spider that jumps out on the screen when clicked, creating a fun surprise moment for visitors.
Spider Easter Egg
An essential part of the concept was to keep the experience realistic yet engaging. In the story about food, we illustrated how healthy soil rich in microbes leads to nutritious products—supporting not only taste, but also gut health, mood, and overall wellbeing. To spark curiosity and invite exploration, we added small interactive easter eggs throughout the site. One playful example is a spider that jumps out on the screen when clicked, creating a fun surprise moment for visitors.
Spider Easter Egg
An essential part of the concept was to keep the experience realistic yet engaging. In the story about food, we illustrated how healthy soil rich in microbes leads to nutritious products—supporting not only taste, but also gut health, mood, and overall wellbeing. To spark curiosity and invite exploration, we added small interactive easter eggs throughout the site. One playful example is a spider that jumps out on the screen when clicked, creating a fun surprise moment for visitors.
Alternative navigation to spark curiosity
To spark curiosity and engagement, we designed and implemented several alternative navigation systems. These not only guided visitors through the stories but also became part of the learning experience. One navigation path explains the role of yeast in bread making, beer, and wine production. Another, within the food story, shows how different farming methods affect the soil, the microbes, and ultimately the quality of the food we eat.
Alternative navigation to spark curiosity
To spark curiosity and engagement, we designed and implemented several alternative navigation systems. These not only guided visitors through the stories but also became part of the learning experience. One navigation path explains the role of yeast in bread making, beer, and wine production. Another, within the food story, shows how different farming methods affect the soil, the microbes, and ultimately the quality of the food we eat.
Alternative navigation to spark curiosity
To spark curiosity and engagement, we designed and implemented several alternative navigation systems. These not only guided visitors through the stories but also became part of the learning experience. One navigation path explains the role of yeast in bread making, beer, and wine production. Another, within the food story, shows how different farming methods affect the soil, the microbes, and ultimately the quality of the food we eat.
Alternative navigation to spark curiosity
To spark curiosity and engagement, we designed and implemented several alternative navigation systems. These not only guided visitors through the stories but also became part of the learning experience. One navigation path explains the role of yeast in bread making, beer, and wine production. Another, within the food story, shows how different farming methods affect the soil, the microbes, and ultimately the quality of the food we eat.
Alternative navigation to spark curiosity
To spark curiosity and engagement, we designed and implemented several alternative navigation systems. These not only guided visitors through the stories but also became part of the learning experience. One navigation path explains the role of yeast in bread making, beer, and wine production. Another, within the food story, shows how different farming methods affect the soil, the microbes, and ultimately the quality of the food we eat.
Making the 3D assets
An essential feature of the site is its interactive 3D scenes. The team aimed to strike a balance between realism and a playful, humorous touch, ensuring the experience felt both engaging and approachable. By using 3D, we were able to explain even complex topics in ways that traditional images and text alone could not achieve.
Making the 3D assets
An essential feature of the site is its interactive 3D scenes. The team aimed to strike a balance between realism and a playful, humorous touch, ensuring the experience felt both engaging and approachable. By using 3D, we were able to explain even complex topics in ways that traditional images and text alone could not achieve.
Making the 3D assets
An essential feature of the site is its interactive 3D scenes. The team aimed to strike a balance between realism and a playful, humorous touch, ensuring the experience felt both engaging and approachable. By using 3D, we were able to explain even complex topics in ways that traditional images and text alone could not achieve.
Making the 3D assets
An essential feature of the site is its interactive 3D scenes. The team aimed to strike a balance between realism and a playful, humorous touch, ensuring the experience felt both engaging and approachable. By using 3D, we were able to explain even complex topics in ways that traditional images and text alone could not achieve.
Making the 3D assets
An essential feature of the site is its interactive 3D scenes. The team aimed to strike a balance between realism and a playful, humorous touch, ensuring the experience felt both engaging and approachable. By using 3D, we were able to explain even complex topics in ways that traditional images and text alone could not achieve.
A strong collaboration across disciplines
A project of this scale required close collaboration with a wide team: scientists, the project group, and a focus group of students and teachers. Their input helped ensure that both the storytelling and content truly matched the target audience. From the first concept ideas and early design sketches to the live prototype, we worked side by side with the science team to secure accuracy in the illustrations and content. At the same time, the focus group guided us in making the site engaging, accessible, and fun to explore. This project would not have been possible without such strong collaboration across disciplines.
A strong collaboration across disciplines
A project of this scale required close collaboration with a wide team: scientists, the project group, and a focus group of students and teachers. Their input helped ensure that both the storytelling and content truly matched the target audience. From the first concept ideas and early design sketches to the live prototype, we worked side by side with the science team to secure accuracy in the illustrations and content. At the same time, the focus group guided us in making the site engaging, accessible, and fun to explore. This project would not have been possible without such strong collaboration across disciplines.
A strong collaboration across disciplines
A project of this scale required close collaboration with a wide team: scientists, the project group, and a focus group of students and teachers. Their input helped ensure that both the storytelling and content truly matched the target audience. From the first concept ideas and early design sketches to the live prototype, we worked side by side with the science team to secure accuracy in the illustrations and content. At the same time, the focus group guided us in making the site engaging, accessible, and fun to explore. This project would not have been possible without such strong collaboration across disciplines.
A strong collaboration across disciplines
A project of this scale required close collaboration with a wide team: scientists, the project group, and a focus group of students and teachers. Their input helped ensure that both the storytelling and content truly matched the target audience. From the first concept ideas and early design sketches to the live prototype, we worked side by side with the science team to secure accuracy in the illustrations and content. At the same time, the focus group guided us in making the site engaging, accessible, and fun to explore. This project would not have been possible without such strong collaboration across disciplines.
A strong collaboration across disciplines
A project of this scale required close collaboration with a wide team: scientists, the project group, and a focus group of students and teachers. Their input helped ensure that both the storytelling and content truly matched the target audience. From the first concept ideas and early design sketches to the live prototype, we worked side by side with the science team to secure accuracy in the illustrations and content. At the same time, the focus group guided us in making the site engaging, accessible, and fun to explore. This project would not have been possible without such strong collaboration across disciplines.
Working with GRANYON was a joint and mould-breaking travel through how we understand the microbial world and meaningfully communicate about it, so all can understand it when engaging with the page. Their patience and persistence in understanding the science and translating this into an interactive, fun, and engaging online experience was very rewarding.
Curious about starting a design or digital project with Granyon? Get in touch! Rest asure we are the nice guys. No spamming or self-absorbed attitudes.
Curious about starting a design or digital project with Granyon? Get in touch! You can rest asure: we are the nice guys. No spamming or self-absorbed attitudes.
