Gijs Bakker

This is a portfolio/blog of Gijs Bakker, UX (interaction and UI) designer from Amsterdam.
Read more about me, filter work by tags or mail me at .

Interactive worldmap

What is it An interactive worldmap to look for upcoming performances based on the country of the performing artists
Client Tropentheater*
Platform Web (plug-in)
My role Interaction and visual design, coding. First as part of a school project team, later on my own.

The Tropentheater brought musicians and performers from other cultures to the Dutch audience. In fact, they came from all parts of the world. Now the Tropentheater already had agenda feature, a list of upcoming performances, just like any other cultural establishment. But we wanted to illustrate this great geographic diversity in a more visual way.

This sparked the idea to pin all the upcoming performances on a map, showing which parts of the world they came from. It is a more exploring alternative than a standard list of events.
Besides upcoming events, the application also displayed some photos and information about of the country.

This project started as a concept for a school assignment with some other students. The Tropentheater liked our concept the most. After presenting and finishing the concept and prototype, I went on to (re)design and develop the application with the Tropentheater.

At the time of making this project, staying ‘above the fold’ was more a trend than nowadays and responsive wasn’t so common. A fullscreen worldmap was not really an option, also due to the limited width of the Tropentheater website. The solution I found was to show a masked worldmap with a miniature worldmap in the top corner with which the user can navigate to different parts of the world.

This application was done in Flash ActionScript 2.0 and being a designer – not a developer – a lot of time went into coding.

* Unfortunately, the Tropentheater has ceased to exist (as of end 2012) due to lack of government funding.

Screenshot of the interactive worldmap

Screenshot of the interactive worldmap

In the screenshot above you can see three columns; the first displays an image (slideshow) and country information. The second column shows the worldmap and the right column shows the upcoming events.
Below is a demo (Flash) showing some of the interaction. Because of the limited space in the center column I used a masked world map, navigable using the small worldmap in the top-left corner.

Example of the interaction principle. Navigate using the miniature world map on the top-left (this example can only be seen if your browser is able to run Flash).

Post navigation