Zum Inhalt springen
Digitaler botanischer Garten – Bild 1
Digitaler botanischer Garten – Bild 2
Digitaler botanischer Garten – Bild 3
Digitaler botanischer Garten – Bild 4
Digitaler botanischer Garten – Bild 5
Digitaler botanischer Garten – Bild 6
Digitaler botanischer Garten – Bild 7
Digitaler botanischer Garten – Bild 8
Digitaler botanischer Garten – Bild 9

Digitaler botanischer Garten

Kontext

Im Rahmen eines Studenten-Projekts habe ich gemeinsam im Team eine interaktive Webapp entwickelt, die als digitaler botanischer Garten funktioniert. Ziel war es, Wissen über Pflanzen des Schwarzwalds auf eine unterhaltsame und zugängliche Weise zu vermitteln.

Problem

Klassische Wissensangebote sind oft textlastig und wenig interaktiv, wodurch Inhalte schnell an Aufmerksamkeit verlieren. Die Herausforderung war, eine Lernumgebung zu schaffen, die informiert, ohne trocken zu wirken, und Nutzer aktiv in den Prozess einbindet.

Vorgehen

Im Fokus stand die Verbindung von Information, Gestaltung und Interaktion. Dafür wurde ein Konzept entwickelt, das Inhalte nicht isoliert darstellt, sondern entlang einer geführten Nutzerreise vermittelt. Storytelling, Animation und Sound wurden gezielt eingesetzt, um Aufmerksamkeit zu halten und Inhalte erlebbar zu machen. Die Struktur orientiert sich dabei an einem klaren, konsistenten Aufbau, der den Nutzer intuitiv durch die Anwendung führt.

Lösung

Eine interaktive Webapp, in der Nutzer durch Scrollen den Wachstumsprozess verschiedener Pflanzen erleben und dabei kontextuell Informationen erhalten. Ein virtueller Guide namens "Dr. Bob" führt durch die Anwendung und vermittelt Inhalte ergänzend über Audio. Ergänzt wird das Erlebnis durch ein Quiz, das das Gelernte spielerisch vertieft. Die Gestaltung bleibt bewusst reduziert, während Animation, Sound und Interaktion die zentrale Rolle übernehmen.

Ergebnis

Eine digitale Lernumgebung, die Wissen nicht nur vermittelt, sondern erlebbar macht. Durch die Kombination aus Interaktion, Storytelling und reduzierter Gestaltung entsteht ein zugänglicher und motivierender Zugang zu komplexeren Inhalten.

Kunde

Eigenes Projekt

Tools & Techniken

FigmaVS CodeInDesign

Projektart

UX DesignUI DesignWebdesignWebentwicklungContent Management