Intro

In the next years a completely new museum in bavaria will open it's doors for visitors. My campus and all classes are currently developing styleguides, installations and all kinds of projects for said museum called "Walderlebsniszentrum Mehlmeisel" short WEZ.

This is the second of two projects I am doing together Marco König— another student who's a very talented 3d-Designer.

I'm taking the main part of development in terms of code, Marco's doing the 3d stuff and we both work on the UX and UI.

interactive Sprout.

That title probably wont make it into the museum, as the titles will probably all be in german — that's because the main target group consists of children and schoolclasses.

The subject we decided to work on is called "From sapling to furniture".
This story has probably been told hundrets of times, so we thought about a way of bringing some fresh air to this story.

We came up with an special controller to interact with the corresponding webstory. This controller will be an wooden log, which brings the texture and haptic of the material we talk about on the screen close to the user.

So our choice for Tools is quite obvious:

Arduino—

because it get's us what we want and is super affordable.

We did a quick prototype as we imagined it to see if it feels nice— And holy sh*t it does.

The prototype was build by using an old surface dial from microsoft which was way over the top for what we are trying to achieve. Then in the end we went for a custom solution via arduino (esp32).

Webflow—

is our tool of choice for quick prototypes, but also for high quality final products. It enabled us to do prototyping and final production in one tool and saved us transitioning from one tool to another.

We did some simple sketches in Figma tho.

‍

Development

3D

We didn't want our application to get too texty, to keep it suitable for children, so we went for some simple renderings with "clay" textures.

Kudos Marco, super nice!!

‍

UI

Basically we weren't in need for a UI, as we are not using a mouse.

All we did was to add a scrollbar at the bottom of the page to give the user something to orientate as where in the story he is currently at.

IxD

Our Arduino is mimicking a bluetooth mouse, so we even got scroll events, which we didn't even need to use.

Instead we went for some sticky positioning— by some I mean basically everything. We used sticky and shadows to achieve a powerpointy vibe with layers and stuff.

‍

Final project

Experience interactive Sprout on your computer at interactiveSprout.webflow.io.

‍

‍

‍

Thanks Marco! Nice project 💯

and thanks Michael for guiding us in the right direction 👏

‍