Zeitmaschine: HELINA

Social platforms visualized and united in one tool, to follow and observe cultural phenomenons better.
Bild mit Kreisartiger Anordnung in blau und orange
The Problem
In a world of fast-moving social media, the next scandal happens before you can even understand the previous one.

Digital content has a diminishing half-life and is rapidly fading away. To track these phenomenons across different platforms, we have developed the following interface.
Design Process
During our exploration phase, many ideas and features came to mind that our tool could include in the final version.

From simple graphs that compare actualities between different social platforms, to timelines about the emergence timeline of different platforms.

Once we settled on visualizing a comparison interface, we tried to implement this approach using Python. Initially, Twitter, Reddit, and Facebook were our platforms of choice to illustrate the heritage of topics over time.

Unfortunately, since Facebook and Twitter had closed their APIs, i.e. the interfaces for such data requests, for some time, it was not possible for us to collect this data.

So all we had was the Reddit dataset, which we could search for topics at will thanks to Jan Meissner.
User Interface
The user interface is aimed at browsers and offers a classic view with navigation bar.

In the center, the current data view is displayed depending on the user's selection, which can be adjusted via the filters on the left in the navigation, activating or deactivating certain social websites.

In addition, there are views for different time periods, such as our year view, which highlights popular or controversial topics.

Taking a look into the details, we also offer a view where individual posts or articles can be selected, showing the most important informations including comments.
Bild mit Kreisartiger Anordnung in blau und orange
Our annual overview shows events in a circle, with large circles corresponding to important events.
Twitter is represented with blue, Reddit is orange.
Kreisartige Anordnung mit markiertem Ereignis: "Trump visits London"
By clicking on large circles, details about this event can be displayed including its origin.
Ansicht mit vielen Kreisen, die einen Graphen formen
The loose graph view shows the total posts on the particular platform, large circles show important events, as well as large topics.
Ansicht mit sauberem Graphen und einzelnen, hervorgehobenen Ereignissen
For the most accurate representation possible, the total amount of posts can also be represented using a graph that highlights individual activities.
Ansicht von Kommentaren, die als Kreise neben dem Artikel dargestellt werden
The discussion view shows a post with the comment structure available below it, as well as a time classification. For example, if a post was very popular in the first 24h, but has decreased afterwards, many large spheres are displayed in front of the 24h line.

Smaller circles indicate the levels of comments, since in the specific case of Reddit, comments can refer to each other.
Prototype
Below is our interactive prototype, which can be tested in the browser. After shooing away the Adobe banner, you can see more and switch to full-screen mode if necessary.

It is possible that some content does not yet behave as users would expect, as it is currently a static series of screens that we have connected and animated.

In this respect, we ask for your understanding if unexpected interactions occur during use.

Clicking on the dark background area will display interactive interfaces.
The tracking in the window above comes from Adobe, not me.
Sadly, the prototype doesn't work on smartphones
Time Span

10/2020 – 03/2021

Team

Vanessa Schmitt
Leon Wolff
Thanks to Jan Meissner

Programs

Adobe XD
Sketch
Python 3.8

Supervision

Prof. Boris Müller

More Projects
Screenshot of the improved amazon website
Typography
Digitale Typography: Amazon

My careful redesign for an Amazon shop view with special attention to typography.

UI/UX Design
VIKUS: Slide in Time

Multiple thousands of dias come together for this visualiziation, while being sorted.

Menu