Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Think like a Machine - Mirror

Mirror is an online platform that is dedicated to show people how machines and the internet can interpret our behavior and how we can look to them in a world where biases are around us.

1. Course description

Think like a Machine was a course whose purpose was to help us understand what Machine Learning and Artificial Intelligence are. Which role do these technologies play in our everyday life, in the products that we use and which importance do they have in our work as designers.

The course was divided into two sections, the first section was individual. We had to choose a service or a product and analyze how does the machine learning system works on it.

The second task – which is this documentation – was dedicated in creating a machine learning or artificial intelligence service or product. The subject of the project was not predefined but the goal was to use all the knowledge that we acquire on the first task and apply it to our project.

2. First Ideas

When searching for our final idea, we did a short brainstorming in order to see what subjects do we connect with machine learning, we then did a votation and the final ideas were the ones that had the highest points. This are the final idea:

1. A platform that shows two sides of news (Opinion - Contradiction) 2. What is your internet persona 3. Artificial Intelligence in school



3. Final Idea

After discussing the different ideas and how can we possibly solved them we decided to choose a mixture of the idea number one – showing to different opinion of news – and the idea number two – showing how does the internet see you –.

With these two ideas in our head, we created a new one: How can the data consumption of a person be visualized?

3.1. Motivation

The motivations to take this idea as our final project came from our wish to show the public what AI (artificial intelligence) and ML (machine learning) are in a critical way. Since we started the course and confronted ourself with the topic we surprisingly realized how much data do system and products gather from us. The topic of biases in machine learning also call our attention since machines learn from repetition and the information that they are fed with come from human knowledge, how does this biases could physically look?

Being confronted with a topic that is rather difficult motivated us to show and make people understand what is the connection between AI and ML in their data, their internet behavior and data consumption. Because the content that we all consume can form the opinion and perception of our surroundings; shaping our appearance to the Internet and the people that have access to it.

3.2. Concept

Having our research done, we realized that we wanted to create a plug-in which would transform the profile picture of the user reading an article into a stereotype that the algorithm of the machine learning system was trained with. This stereotype should be connected with main keywords by an algorithm and “interpreted” by a Machine Learning System. The system is full with biases and our language stereotypes. Since the algorithm has no power of its own to “judge” and to make its own opinion – leaving away human bias – it will transform the picture of the person into a stereotype.

In order to achieve this, we wanted to create a database with pictures which represent common stereotypes in society that are related to some keywords. So if a person is reading an article, the algorithm will assume that the person is a certain stereotype and therefore merge the users profile picture with what we commonly connect – and can find in google image search – with the stereotype that would read that certain text.

This project should make people aware not only of how we judge and create stereotypes in society – as well as how the internet has been „trained“ to look a certain way – but especially on how machines learn from our behavior; what we read, write or what we say and internet and people who control it do not know who you are, but can misinterpret your actions online.

4. Mirror

Once we had our motivation, research and concept we started defining how could we solve our wishes, and this tuck form in our web prototype Mirror.

4.1. About

With a critical design approach, we decided to create a prototype for fake news website with real news where people could click and read the articles that they find the most interesting and see how they profile picture will change according to what they read.

Our algorithm is full of stereotypes, genderization, and generalizations. Machines are trained with human data and our language, the way we perceive an image or a word is mostly not free from creating stereotypes. Machines and Artificial Intelligence are not free beings that can rationalize and differentiate, we might be capable of training them to realize nuances but they still are what they are: a mirror of society.

4.2. Structure

The News platform contains an algorithm which is interpreting your profile picture based on our data set. Our dataset shows the relationship between articles with click bait headlines and pictures of stereotypes. At the beginning, the user gets informed by our terms of use which explain the transparency of our data collection. During the whole process of exploring and reading articles, our algorithm starts to mash up the users profile picture with stereotypical faces based on your browser history. For keeping the process transparent, a data visualization of the way how the algorithm works will be shown. This kind of interaction should clarify how we consume and create data and how machines can interpret it. Therefore it helps to encourage the user to reflect on the whole process by feeding the algorithm with information about alleged interests.

4.2.1. Stereotypes

Stereotypes help humans to categorize their surroundings and to define their identity through differentiation and similarities. Therefore we are creating Datasets for algorithms based on human biases. For our platform, we tried to define most familiar stereotypes according to the western culture. At the end we decided to reduce our examples on following terms with common perceived features:

Bildschirmfoto 2019-03-17 um 17.12.21.pngBildschirmfoto 2019-03-17 um 17.12.21.png

Bildschirmfoto 2019-03-17 um 17.12.35.pngBildschirmfoto 2019-03-17 um 17.12.35.png

4.2.2. The articles

Our articles were taken from different platforms like: vice, vox, huffpost and medium. Our intention was to provide articles that had clickbait headlines because this kind of language ensures accessibility for everyone. But it´s obvious it won´t be appealing for all target groups. For our prototype, we only focused on articles which contain certain buzzwords which could be interpreted as an interesting field of a stereotype. Therefore our articles are linked to characteristics of stereotypes based on explicit buzzwords.

The taught process that we follow to choose the articles was:

  • What would the stereotype read?
  • What would de developer feed to the machine as an article that the sereotypepe would read?
  • What would the machine relate to a stereotype (creating it´s own biases)?

The articles:





















Sex addict/ pervert




4.2.3. Information Architecture


4.3. Machine Learning

To visualize our concept we choose to work with a Machine Learning System called GAN’s. GAN’S systems are able to use the derivative knowledge from training data for other interpretations. With the help of our ML system we wanted to evaluate facial characteristics of our stereotypes and project them to our users profile picture.

4.3.1. About

Therefore we trained our choosen system with all datasets to get an average imagery of every stereotype. The next step was to map those stereotypical Avatars on potential user faces. This was done by another GAN’S system. The final outcome were short clips which showed the metamorphoses of the potential user and its stereotype.

  • Results average stereotypes using StarGan: When we started with creating our average stereotypes we had to realize our ML system was trained to only evaluate average features of faces and ignore those which are rarer or uncomment. The average faces therefore didn’t show the most prominent and stand out features we needed. For example tattoos, glasses or piercings were not recognized by the ML but still important features for some of our stereotypes.

  • Results morphing Profile Picture using FaceMorphing: The machine learning of the average faces mostly erased all of the outstanding features we needed to be associated with each stereotype. So we decided to choose random images of our datasets for the metamorphoses. The ML generated morphing clips of random images of a stereotype and a potential user of Mirror. Stills of the clips we used as material for the evolving Profile pictures on our prototype as well as in the gallery.

In conclusion, we all agreed that for a more strict way of visualizing our concept we would have used the average faces. But considering the time we chose to used a serendipity approach. Especially to achieve more artistic and disturbing results it would have been great to write our own ML system.

Here the Github links:

  • StarGan:
  • FaceMorphing:

4.3.2 The different algorithms

To connect the articles with our stereotypes our concept also included an algorithm. The algorithm recognizes all articles which are read by any user and connects them to a stereotype. Because we couldn’t train an algorithm we minimized its work by choosing buzzwords of each article. In consideration of the algorithm we defined a dataset of stereotypical characteristics and buzzwords. We then connected all characteristics of the stereotypes to all fitting buzzwords and characteristics of each stereotype. The algorithm is now classifying all articles trough buzzwords to its matching stereotype. For an overview, we created a small data vis which visualizes all buzzwords of the articles and their connection to the stereotypes.


4.3.3. Results

Here are some examples of the results that we gathered:

Average Results:


Criminal_CroppedMan-Kopie-2 (2).gifCriminal_CroppedMan-Kopie-2 (2).gif

white trash.pngwhite trash.png

Morphing Results:

morphing-example-3 (1).gifmorphing-example-3 (1).gif

morphing-example-copy-2 (1).gifmorphing-example-copy-2 (1).gif


Screen Shot 2019-01-22 at 13.20.24.pngScreen Shot 2019-01-22 at 13.20.24.png
Screen Shot 2019-01-22 at 14.39.52.pngScreen Shot 2019-01-22 at 14.39.52.png
Screen Shot 2019-01-22 at 13.11.26.pngScreen Shot 2019-01-22 at 13.11.26.png
Screen Shot 2019-01-22 at 15.01.06.pngScreen Shot 2019-01-22 at 15.01.06.png
Screen Shot 2019-01-22 at 15.23.35.pngScreen Shot 2019-01-22 at 15.23.35.png
Screen Shot 2019-01-22 at 15.20.15.pngScreen Shot 2019-01-22 at 15.20.15.png
Screen Shot 2019-01-22 at 15.06.21.pngScreen Shot 2019-01-22 at 15.06.21.png
Screen Shot 2019-01-22 at 11.30.57.pngScreen Shot 2019-01-22 at 11.30.57.png
Screen Shot 2019-01-22 at 15.10.30.pngScreen Shot 2019-01-22 at 15.10.30.png
Screen Shot 2019-01-22 at 15.55.57.pngScreen Shot 2019-01-22 at 15.55.57.png
Screen Shot 2019-01-22 at 16.09.04.pngScreen Shot 2019-01-22 at 16.09.04.png
Screen Shot 2019-01-22 at 16.50.51.pngScreen Shot 2019-01-22 at 16.50.51.png
Screen Shot 2019-01-22 at 16.30.01.pngScreen Shot 2019-01-22 at 16.30.01.png
Screen Shot 2019-01-22 at 16.02.14.pngScreen Shot 2019-01-22 at 16.02.14.png
Screen Shot 2019-01-22 at 17.17.55.pngScreen Shot 2019-01-22 at 17.17.55.png
Screen Shot 2019-01-22 at 17.30.15.pngScreen Shot 2019-01-22 at 17.30.15.png

4.4. Design

After having the results of the machine learning system, we started designing Mirror.

4.4.1. Moodboard

We all had one vision in our head, having neon colors, dark looking and deformed images. Showing the colors of computer like components together with the distortion of reality.


4.4.2. Scribbles

Before starting to define how should our website look we did sketches about how should it be build, where should the information go, how does the storytelling works in the website and how does the information could be structured.

image_preview (1).jpegimage_preview (1).jpeg
image_preview Kopie.jpegimage_preview Kopie.jpeg
image_preview (1) Kopie.jpegimage_preview (1) Kopie.jpeg
image_preview (2).jpegimage_preview (2).jpeg
image_preview (4).pngimage_preview (4).png
image_preview (3).pngimage_preview (3).png
image_preview (2).pngimage_preview (2).png

4.4.3. User Flow

Regarding to our concept we created a user flow chart.


4.4.4. Prototype Video

4.4.5. Click Prototype

image_preview (1).jpegimage_preview (1).jpeg

you can find our click prototype under this link: Mirror

5. Conclusion & Learnings

Trough our project we started to reflect on our own interaction with data. We know that our consumption and usage of data on the internet is morally questionable since we´ve learned how companies could misuse the information.

Regarding the course and homeworks, we also understood that machines aren´t rational as we thought, even when we try to train them in that way and during the whole process we were discussing about the concept of stereotypes and how we perceive the world. It was getting more clear for us that we all have our own individual conception of stereotypes and how we categorize people due to certain characteristics. Sometimes it was difficult for us to agree on common features for each stereotype and also to link certain buzzwords with these features. We also encountered some difficulties when defining how to describe the stereotypes were most of the time political the descriptions were politically incorrect or morally questionable. This raised questions like: „what it´s allowed to say or not?“

From a technical standpoint, we realized the ML that we used to gather averages was not able to emphasize the facial features of our stereotypes during the process and that if we really wanted to see an average we would need extra help to achieve our final goal and have more time in order to design a real website or a plugin that people could install in their browsers.

In conclusion, we all learned a lot during the whole project/course about the problems of machine biases, as well as how we easily get trapped in our own mindset. The course helped us to raise awareness about our data consumption and internet behavior and how important it is to see the whole picture. Without forgetting that it also motivated us to keep looking into the area and see how we as designers can keep shaping and designing future technologies.

We would also like to thank Dr. Sebastian Meier for his support through our project.


Design Master

Art des Projekts

Studienarbeit im Masterstudium


foto: Prof. Dr. Sebastian Meier

Zugehöriger Workspace

Think like a Machine


Sommersemester 2019