00 Back

2016Personal Project ✍️

Think Twice – Raise Awareness of the Refugee Crisis

How can an experience be created to raise the awareness of the refugee crisis?

Status Quo

Every day hundreds of refugees are passing the borders. Instead of offering them a warm welcome, we confront them with our stereotypic opinions, ignore them and are not willing to integrate them in our society. While living in Berlin for more than one year I was shocked about the alarming conversations people had in public regarding the refugee crisis in Germany.

That’s why I asked myself the question how the awareness of this topic could be raised. Together with @Elènne a friend of mine and very talented music producer, we crafted an emotional storytelling experience for the web called #Think2x (speak: Think Twice). #Think2x tries to get the bigger picture and explains the context, before you start spreading your opinion.

How did we communicate emotions in a web based experience?

Design Concept

Storytelling is a strong tool. We’ve been using it since the early stages of communication. It helps us to combine fragments of information to understandable threads. When we talk about stories we always talk about the personal and emotional experience. Did I like the story? Were there some surprising elements I didn’t expect in first place?

So I knew in order to spark a discussion an experience has to be created that people relate to and are emotionally connected with. The main idea was to confront people with their stereotypic thinking and to show them the real reasons behind in combination with strong photography.

02.01 These are a few selected photographs for the website. All photographies are made by UNHCR / F. Noy and used under CC BY-NC 2.0.

Look & Feel

To strengthen the storytelling aspect the visual design of the website should support the explorative aspect and motivate the user to be curious. So, mouse sensitive parallax effects were used to suggest several layers of information and a strong visual feedback got essential in order to keep the user engaged.

Together with @Elènne we tried to set up audio layers to address several senses of the user and not only the visual aspect. Audio design helped us to increase the time users stayed on the page and augmented the emotional aspect of the experience tremendously.

Interaction Patterns

The interaction concept of #Think2x is quite simple. Users select different stereotypes and zoom in different aspects of the daily life struggles of the refugees. After closing the detail view the stereotype is “gone” and the user can continue the exploration. Once all stereotypes have been visited the experience ends with an motivational appeal.

02.05 In order to guarantee a smooth and non-disturbing transition a lot of effort was put in the UI animations.

How was the product build and what did I learn from it?

Main Challenges

As a smooth and performant usage of the website has to be guaranteed at any time, the main challenge was to create a stable technical foundation for the experience. Especially the handling of the audio files caused several misbehaviors on the mobile versions. For the development I have created my own framework based on jQuery for displaying and loading the images in combination with lightweight libraries for parallax scrolling and audio playback.

Learnings

Inspired by this project and heavily influenced by the talk of Luca Prasso (tech art lead of Google’s Spotlight Stories), which I listened to during my time in the Bay Area, I have summarized my learnings in a Medium Article called: #You’ve got a story to tell? Start designing it!

03.01 A snapshot of the talk by Luca Prasso at the StartupHouse in San Francisco.

My Role

As the initiator of this project I was leading the creative direction of the project, the contentual concept and was responsible for the technical development.

Meta

Project Type

Personal project together with @Elènne during my one year stay in Berlin.

© 2017 – Made with a lot of ☕️ – Legal