Futter

Timeline
Feb - May 2017
Project Type
School Assignment
Responsibilities
Concept iteration, research, prototyping, interface and motion design

At the HKU I was part of a project team tasked to create an interactive experience about World War 2 for Dutch high school students. With this task in mind, we created Futter, a fictional social network set in WW2 that teaches students about topics such as the war, censorship, propaganda and fake news. During testing Futter proved to be a great success with its target audience.

The Problem

Research has shown that Dutch teenagers' knowledge about the second world war is lacking. Important lessons from WW2 such as the impact of propaganda and fake news, are now especially relevant in the age of social media.

“While the majority (56%) of the surveyed teens show interessent in World War 2, their knowledge about the topic is barely passable.”
HAN University of Applied Sciences, 2018
Approach

Because we had limited time for this project we decided to move quickly through the brainstorm fase. The idea of a social media network from WW2 grabbed our attention immediately because it uses something teenagers are very much familiar (i.e. social media) with but puts a bizarre twist on it. We rapidly ideated features using low fidelity wireframes.

Early low fidelity mockups
Lo-fi feature exploration
Explorations

The feed tab is the main view of the app where students can browse content that has been posted in the Netherlands during times of occupation. We worked out what types of content there would be and how they appear. The content in the feed takes place chronologically from 1939 to 1945. The teacher controls the flow of content via a special dashboard.

Futter feed with photo post
Futter feed with video post
Different types of content in the feed
Different types of content in the feed tab
Explorations

To make Futter feel like a real social network we populated it with profiles of people. We decided to use a mix of both real and fake people. Because Futter is in German hands, certain types of people are displayed according to the views of Nazi Germany.

Different Futter profiles and friend requests
Explorations

A lot of the content on the network is propaganda and fake news from both sides of the war. These range from articles to posts of famous individuals. Certain types of post are censored by the Nazis which is visualised in the app with a redacted animation.

An animation shows a post is being censored
Propaganda posts
Propoganda posts
Explorations

A design system was made for the app. It has a modern user experience but with a 1930-40s style. The Futura font was chosen for its heavy use during WW2 on all sides of the war and its distinct look. We took inspiration from bauhaus and graphic design from the 1940s.

Futter design system typography
Futter design system elements
User Testing

We tested a prototype of Futter with a vertical slice of content in a high school class during WW2 history lessons. We focused on how a teacher incorporates Futter in their lessons and how much knowledge and understanding the students gain from using Futter.

Futter Adobe XD prototype
The Adobe XD Prototype that was tested

Outcome

In the end we delivered a prototype of Futter that has been tested. A trailer was created to explain the concept and our vision. Making the trailer took just 3 days going from storyboards to rendering.

Impact

Students reacted well to Futter and found the experience to be interesting and bizzare which led to more investment. The ability to see WW2 happening before your eyes in a social media feed made it more easy and compelling to understand according to the majority of testers. History teachers reacted positively because Futter gives them a way to handle a heavy and broad topic in a relevant way.

This project taught me that when you have limited time, moving quickly through the brainstorm phase allows you to explore your design more thoroughly.