Boy | Individual presentation final interface

The research about nature places in the city of Rotterdam let me to think of a concept about displaying art in the nature of Rotterdam with the interface of a one-page website and a connection between this interface and a projector. With in the back of my head the idea of a concept of an interface that creates a safe space and a motivation for the International WDKA student to go to places of nature in the city.

The conclusion about the user group research, the international WDKA student, was; that we saw that international students at our school want 3 important things: Freedom, acceptance and safety. The school building from inside and out displays this message. The students made a safe community / space, which creates motivation to go to the school.

The conclusion about the navigation through the nature routes collection of Staatsbosbeheer was that the website of Staatsbosbeheer was not accessible enough for an international student. Mainly because of the non-working english language translation and them having the site made priorly for Dutch native speakers. The website and Staatsbosbeheer in its whole did not create the same environment as the school does for international WDKA students. This was a starting point for me to think of an accessible new interface with nature routes.

The most important thing that came out of the research of the user and the collection was that the interface design for the International WDKA student had to be accessible and portray the 3 key elements: Freedom, Acceptance and safety. I came to the conclusion that combining art and nature would portray these key elements and motivate the international student to discover new places of nature in the city. The symbols above this text represent these key elements and the accessibility of symbols used as language to create a language that is accessible for international students.

Collection= Nature routes for expats

My vocal point for the interface was art in nature. These 4 pictures I took represented these elements and displayed the playful design elements art in nature can have.

Sketches interface design + functionality

My new idea was to make a one page website with a 3D tree in the center of the website. The tree can be rotated with mouse movements and can be looked at from all sides. The tree will contain apples that upon clicking can receive an artwork with an upload from the WDKA international art student.

After the upload is done, the apple will fall of the tree to the bottom / ground of the website. This indicates that the apple contains a digital art work. When the user hoovers over the fallen apple, a message with map will appear. This map will show the location of the artwork.

This location is in a nature place in the city. The international WDKA student is hereby motivated to go to this nature place and look at the presented artwork they or another student uploaded. A real 3D apple, with inside a projector will be at the location displaying the artwork on the grass (or other ground) surface of the nature place.

After 24 hours the website will refresh its tree and the fallen apples with empty upload spots will go back on the tree for new students to upload their art works.

Making decisions about which typefaces I would use for my interface design. Helped me to start developing the design of the interface one-page website.
I wanted the website to be in a simple accessible, easy to understand style so it would be fun to use for any international student. The simple style would also make a nice contrast for the tree I wanted to put in the middle of the one-page website.

The interaction station workshops about programming and using the Adafruit Circuit Playground made me understood how to start making the interaction inside on the one-page website I wanted to design. Activating triggers and mouse clicks to move things around in a digital interface is what I wanted to achieve with my website design and functionality.

After experimenting in the interaction station. I started to design the 3 Dimensional tree for the one-page website and the movement of this tree. My concept was to make it rotatable and this worked by connection a button element to the tree and making 25 (15 degree angle each) renders of the tree.

Final design interface

Besides the interaction of the rotating tree. I made several other interaction buttons and movements in the website, such as the apples falling of the tree, watering the website, refreshing the website from day to night and from night to day.

Home Page
Questions mark button for general information (added after the user testing).

Uploading artwork on the apple.

Coordinates of location linked to projector in place of nature in the city.

Watering the tree (easter egg).

Switch to refresh the website from end to beginning.

Symbols for navigation trough the website that refer
to instructions to interactive buttons.

The final design of the one-page website interface is inspired by the previously made type hierarchy assignment. After deciding the typeface for the website and how I would implement this. I started to get an idea of how I wanted the style of the website to be like. The style of the website is very simple, with a white background and black text and symbols.
I decided to make this very simple, so the tree and the apples would stand out on the website. They are the only coloured things. Together with the grass.
I decided to make the grass 2D, because it creates a fun contrast between the 3D dimensional tree and apples. The simple design of the website co exists with the simple functionality of the website and the simple interactions.

The instructions on the left side of the website give a clear overview of what the website offers and adds an extra language with the symbols. The symbols next to the instructions explain where these instructions are located, because the symbols match with the symbols on the rest of the website. The night mode of the website that is in inverted background colour is there to refresh the website.
The contrast of the changing background colour indicates this change in the website. All the text from the website is in a simple digital, almost pixel like font. Except for the title. I wanted the title to stand out on the page and have a more organic feel, because organic is what the tree stands for. Nature.

Final design projector

The design of the real life apple projector is just like the small apple, except, it has a projector inside. This projector would be about 40 cm high by 40 cm wide. The projector, projects with a low angle on the grass and therefor the apple projector can sit on the grass and does not have to for example hang on a tree or stand on a platform. The back of the apple projector has a QR code linked to the one-page website. This gives the user the ability to discover the website via the projector instead of the other way around.