interactie
Sprout

interactive Sprout is a website that can be navigated with the help of a rotating tree trunk. Here we deal with the subject "from seedling to furniture".

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 hero 👌

strong,
courageous,
helpful,
fights for the good

The innocent ✌️

spontaneous,
optimistic,
reliable,
moral

The explorer 🙌

adventurous,
independent,
individualistic,
curious

3D

We didn't want our app to be too text-heavy to keep it suitable for children, so we opted for some simple renderings with "clay" textures. BTW I modeled and rendered those things in Blender.

UI

Basically, we didn't need a user interface because we don't use a mouse. All we did was sticky positioning – by something I mean basically everything. We used Sticky and Shadow to achieve a PowerPointi atmosphere with layers and stuff.

UX

Our visitors can navigate through the website with the help of a rotating tree disc. This gives them direct contact with the raw material. The website scrolls horizontally, which suits the direction of rotation.

MagicTree

We first wanted to build our tree with the help of a Surface Dial from Microsoft. And it worked for Windows – but somehow not for Apple 💩. What a surprise. So without further ado, we switched to Arduino (esp32). For one thing, it's pretty cheap and it also works damn well!

Development

Webflow is an insanely great tool for quick prototypes, but also for high-quality websites. Therefore, the decision for this tool was a no-brainer. At the beginning, we created the UI drafts in Figma. After that, we took care of the implementation.To make things a bit more unique, I added a few lines of custom code to enable horizontal scrolling.  And et voilà - the thing was born and ready for exhibition!

Exhibition

At the fair, our exhibit is shown on a brand new iMac. We then unceremoniously packed the iMac onto an Eiermann table. Our visitors then find a seat on a chair –which is also pictured on the website and is part of the story. In this way, we transfer our story outwards to the visitor and involve them as a user of the furniture.

That's it!

interactive Sprout also works on your computer. You can check it out here:
interactive-sprout.webflow.io/

– interactive Sprout
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!