ARTravel

Bringing an art collection to the digital world in a fun and exciting way.

Team

  • 3 Deviners
  • 1 Cross Media Designer

My Role

  • UX
  • Web Development
  • Interaction Design

Duration

  • 3 weeks
  • May - June 2018

Tools

  • HTML icon
  • CSS icon
  • JavaScript icon
  • Adobe Photoshop icon
  • Adobe Illustrator icon
  • Sketch icon

Client

Museum Boijmans Van Beuningen logo

CONTEXT

The Problem

Boijmans Van Beuningen is a museum in Rotterdam with an art collection of 150.000 objects. The art styles vary from art coming from the Middle Ages to contemporary art.

Due to renovation work, the museum will close its doors for almost four years. However, the museum want to make their collection available for the general public during this period. Boijmans wants to focus on an audience which aren’t already triggered by art for various reasons and they want to introduce those people not only to the museum, but to art in general.

Our assignment was to pick a target audience and create a unique experience which allowed the people to be triggered by art in a digital and interactive way. We had to think outside the box and bring the art to the people in a new way by bringing on- and offline closer together.

My Role

This project was a collaboration between our field of study “Devine” and Cross Media Design students from the “Hogeschool Rotterdam”. After we did all the research together, we assigned each member of our group specific tasks to build the deliverables. My main tasks were designing a campaign poster to advertise our concept across Rotterdam and secondly I had to make a redesign for the header of the Boijmans Van Beuningen website.

Our Goals

Our final idea was to make an interactive touchscreen in trains from and to Rotterdam for the cummuting students. On the screen you can make your own artwork with bits and pieces from objects you can find in the museum. People can collaborate to build something special instead of infinity scrolling on their phones all the time. They can share their masterpiece on instagram to show the world what they have made. My focus was on the side projects we did besides the screen to engage our audience even more with art.

Digital window illustration in train

This is a mockup from our digital windows in the train

SOLUTION

Now let’s have a look at the things which I had to focus on. As for the design I wanted to stay as close as possible to the corporate identity from Boijmans. For the header of the Boijmans website, I wanted to create a user experience which is not so common on the web but my intention was to make the users feel actually going in the train as if it were to be in real life.

My inspiration came from the website of Magic Leap. I wondered how they did this cool scrolling effect on their header, so I started searching the internet and made one myself.

Header Redesign

On the website you can scroll through the train until you find the instagram feed in the window.

Campaign Poster

Campaign poster Campaign poster mockup

PROCESS

Trendwatching

The first thing we did was watching the latest trends in technology. We have a couple reasons for this. First of all because Boijmans was looking for a new concept and not just something for the digital platforms which already exist. Another reason why we wanted to work with new technologies like VR and AR is because we think it’s easier to bring the digital and the physical world closer together. Last but not least, as our target audience, we chose millennials, and guess what? Millennials always want to explore new things and certainly new technologies.

Virtual windows

virtual windows — Emirates

Personalization & co-creation

personalization & co-creation — trendwatching.com

Transparent touchscreen technology

transparent touchscreen technology — Oculus Technologies

Research

We knew quickly already that our target group was going to be millennials because we can closely relate to them in this time of never ending technology. Besides we ourselves belong to the millennials, we dug a little deeper in the minds of our contemporaries. We arranged 3 ways to gain more information in our target audience:

Personas

Personas

We made up 3 different thinking people

Online Survey

Online survey icon

81 people responded to our Google Form

Interviews

Interview icon

We interviewed 2 persons in the museum

Conclusions

  • Museums have the image of being old-fashioned
  • Friends also don’t go to museums (social factor)
  • They want to DO something and not just watch paintings and sculptures. (interaction)
  • They have no time to visit museums
  • Dutch students can take public transport for free

Main concept

Once we had the basic concept of the interactive windows in our minds, our whole team was full of good ideas and innovative ways to enhance the user experience.

First drawing of our concept

Our first drawing of our concept (drawing is not my best skill).

We were dreaming very big so our final idea was to use a transparent AR display. We would use this upcoming technology in AR because it’s the best way to bring the real world closer to the virtual world. People could use their environment to make an artwork combined with the virtual layer from the museum on top. Eventually, with our tight budget and deadline, that was a little too ambitious; the transparent touchscreen is one thing, but the AR technology combined with the environment behind the screen is from another level.

Transparent touchscreen display

Transparent touch display — Oculus Technologies

Our realistic approach to this idea for our exhibition was to use a normal touchscreen combined with a camera which films the environment. This footage than serves as the canvas for your artwork.

Train window UI

This is a screenshot from an interactive touchscreen in a train where people can be creative.

Side Project - Idea

Now with our solid concept in our head, we could start working on the deliverables. Our one big thing was of course the digital windows in trains, but this was not enough, we wanted the students to see their own creations and share them with friends. That’s why we opted to redesign the header of the Boijmans website so that people would talk about it.

From this idea came another idea where we would put art decoration on the trains where the digital screens are installed to trigger people that there is something happening in the train.

Train mockup

A train mockup decorated with art from Boijmans museum.

Side Project - Header Redesign

To make the scroll effect, I used the very powerful Javascript libraries GSAP and ScrollMagic. In my opinion, this was the best way to get full control over the animation of all the different parts.

Train final design on header

Final design of the header.

LEARNINGS

This project was fun and exciting because we could work together with someone who does not study Devine. We also went to Rotterdam for one week to do our field research. I think this was very good because we could truly engage ourselves with our target audience and our client at the location where the whole project would live.

Pay Concept 💰

High-tech credit card motion graphics for easy money transactions