Meadow

With "Meadow" we bring the incredible Bavarian flora to an interactive display wall. Visitors can navigate through the website with simple gestures registered via a webcam.

Intro

In the next few years, a brand new museum in Bavaria will open its doors to visitors. My campus and all classes developed style guides, installations and all kinds of projects for the said museum called "Walderlebniszentrum Mehlmeisel", WEZ for short.

This is one of two projects I did with Moritz Krause, a very talented creative coder.

Target group

First things first. At the beginning, we defined our target group in order to focus our project on exactly these people. We did this with the help of archetypes.

The sage ☝️

honest,
analytical,
intelligent,
wise

The magician ✨

inquisitive,
inventive,
purposefully,
visionary

The explorer 🙌

adventurous,
independent,
individualistic,
curious

3D

We had to ask ourselves how to represent our flowers. 2D, 3D or maybe in the form of particles generated from data? There are really a lot of possibilities. After a few mood-boarding sessions –we finally decided on the 3D representation. The implementation of the flowers was then my task. Colourful, procedurally textured, realistically textured.... To get a grip on the theme, I made numerous variations in the most diverse shapes and with the craziest textures. In the end, we decided on a simpler and reduced version. This way we can represent the flowers in colour and shape exactly as you would find them in real life. But we also bring in a reduced and stylistic character!

UI

An exhibition is fast-moving, so we tried to keep the UI as intuitive as possible. In terms of color, we didn't have much freedom, as we logically had a style guide. Therefore, we kept it rather simple with yellow as an accent color. The website can be controlled via webcam. The gestures are displayed with the help of emojis. (👈 👉)

UX

The UX design was a bit difficult. In the beginning, we had utopian ideas. We wanted the user to control the light with the right hand, the mouse with the left and the texture with weather data. That would have been achievable, but unfortunately, there was a problem — the time. So we reduced it. By pointing in one direction, the user can navigate either left or right. The gestures are recognized by a webcam. And it works!

Development

We developed the whole thing with the help of several tools. Initially, we both brought our models to the web using Three.js. However, I later switched to a wonderful tool called Spline. It saved us a lot of time and a few lines of code. I did the animation in Spline and then implemented the website in Webflow. Meanwhile, Moritz wrote the code for the gesture recognition with Handsfree.js and took care of building the exhibit with his bare hands.

Exhibition

At the exhibition, Meadow was played on a giant television. The TV was embedded in an equally huge wooden wall. The whole thing was then covered with artificial grass to create a meadow character.

That's it!

By the way, Meadow also works on your computer. You can check it out here:
meadow-project.webflow.io

– Meadow
‍Campus MÜB x WEZ Mehlmeisel
Moritz Krause, Marco Koenig
Interaction / Information Design
Summer 2021

Thanks Moritz 🙏. Pretty cool project.
Thanks Michael, for your supervision!