Wohin geht mein Geld?

ABSTRACT

Framer Website

Website in Google Chrome öffnen:

https://wohin-geht-mein-geld.framer.website

Auf der Website wurden WEBM Videos eingebettet. Diese funktionieren auf Safari nicht ohne transparenten Hintergrund.

Präsentationsvideo

Screencast

Screencast Mobile – Erstes Kapitel

Aussicht:

Für eine vollständige mobile Version müssten alle Animationen neu animiert werden, sodass sie auf dem kleinen Screen besser wirken. Beispielhaft habe ich die „Kategorien-Animation“ in ein kleineres Format gebracht.

Außerdem ist weiterhin ein Problem mit den transparenten Videos, die ich auf meiner Website verwendet habe. Auf dem Handy wurden auch wieder manche Formate von Video Dateien nicht angezeigt. Wenn man die Website ausarbeiten würde, müsste ich also mit LottieFiles arbeiten, diese haben nur leider keinen Ton. Es ist also noch Luft nach oben diese Probleme anzugehen und bessere Lösungen dafür zu finden.

Ausstellung

Moodboard

Styleguide

Why-How-What

Why

Menschen verstehen die Muster ihrer Ausgaben nicht, obwohl sie die Daten besitzen.

How

kategorisierte Ausgabenstruktur
zusätzliche Verhaltensebene „Warum wurde gekauft?“
visuelle Darstellung von den Daten

What

Eine Storytelling Website mit Datenvisualisierungen meiner eigenen Ausgaben, ergänzt durch passende Animationen und Soundeffekte.

Zielgruppe

Spannungsbogen

User Testing

Meine beiden Testpersonen sind Studenten aus Textildesign und dadurch mit dem Thema und Webdesign allgemein nicht bekannt.

Testperson 1 (Textildesign)

Mein Ziel war es zu schauen, ob die Person den Button für die Anzeige entdeckt und diesen auch betätigt. Die Person hat alles gefunden was sie musste und sogar darüber hinaus. Sie hat an Stellen, wo nur eine Animation ist auch geklickt um zu schauen, ob sie was machen kann.

Die Person hat eher Oberflächlich die Website angeschaut, da ich ihr sagte, dass sie die Fließtexte nicht lesen muss. Die Titel Wiederrum sollte sie fürs Verständnis durchlesen.

Testperson(en) 2 (Textildesign)

Bei der zweiten Testperson, saßen noch andere Personen mit dabei, ich ließ aber nur eine Person die Kontrolle haben. Meine Website war an diesem Punkt schon fertig, somit wollte ich nochmal ein finales Feedback einer neutralen Person bekommen.

Diese Person hat alles etwas zu stark überflogen, obwohl sie die gleiche Vorgabe wie Person 1 bekam. Dadurch hat sie viel mehr übersehen. Sobald sie aber bei der zweiten Anzeige angekommen war, bemerkte sie ein sich wiederholendes Muster und interagierte mit dem Button. Darauf scrollte sie auch wieder hoch und wollte die anderen Interaktionen auch erleben.

Fazit

Final kann ich sagen, dass meine Website vielleicht ein bisschen zu wenig eigene Interaktion bietet. Einiges passiert on scroll und dadurch vermute ich, dass der Besucher der Website nicht erwartet viel machen zu können. Die Ergebnisse beider Versuche habe ich trotz allem in mein Projekt einfließen lassen und habe die Karte hinter dem Button noch größer und auffälliger gestaltet. Die Bubble Chart Interaktion, wurde auch gerne mal übersehen, weshalb ich dieser etwas stärkeres Pulsieren gegeben habe. Bei der Bubble Chart war auch das Problem, das wenn die Person einmal drauf geklickt hat, nicht wusste das man noch weiter drauf klicken kann. Deswegen habe ich die Kreise auf der zweiten Ebene auch pulsieren lassen.

Dadurch, dass ich einmal eine einzelne Person getestet habe und am Ende teilweise ein kleines Grüppchen, war es eine realistische Situation für die Ausstellung. Dort sind ja auch unterschiedlich viele Personen am Ausstellungsstück. Außerdem überfliegen ja auch viele Menschen das Ausstellungsstück, deshalb war mir wichtig, dass es auch beim überfliegen verstanden und alles bemerkt wird.

Allgemein war ich sehr zufrieden mit den Ergebnissen meiner Versuche, da ich die Problemzonen in der Website darauf anpassen konnte.

––––– DESIGN PROZESS –––––

Abschlusspräsentation

Zwischenstand 01.07.26

SOUND AN!

Zwei Varianten des Startscreens
ein paar After Effects Animationen fehlen noch
eventuell ein paar mehr Fade In Effekte bei Sections

Zwischenstand 24.06.26

Weitere Animationen und Änderungen

Neue Abstände für Überschriften und höherer Zeilenabstand

Vier weitere Varianten für die Navigation:

Rot = selected Section
Weiß = unselected Section
Weiß mit roter Outline = Hover State

Neues Design der Anzeigen:

Mini-Version der RFID-Karte versteckt hinter dem Button
User-Testing mit einer Studentin aus Textildesign hat ergeben, dass der Button als dieser erkannt wurde und Interesse geweckt hat

Zwischenstand 17.06.26

Änderungen:

Navigation links
Animationen größer und außerhalb vom Raster
mache Animationen sind aktuell im Standbild als Platzhalter
alle Animationen werden in Framer on scroll aktiviert werden
die 3. Section ist nun weiter ausgearbeitet, aber auch noch nicht final

Zwischenstand 10.06.26

Der nächste Schritt war es meine Inhalte in Framer zu übertragen. Dabei habe ich bereits den Versuch gestartet, die Website innerhalb der Karten-Sections aufzubauen, was sich als schwieriger rausstellt als ich dachte. Die Animationen werde ich vermutlich in Lottie umsetzen müssen, weil auch diese, in der Form wie ich sie möchte, nur bedingt in Framer möglich sind.

Section 1 und 2 mit Inhalten und Platzhaltern

In Figma habe ich ein paar Versuche gestartet das Raster ein wenig zu brechen.

Zwischenpräsentation

Zwischenstand 27.05.26

Scroll Animation in Framer

Variante 1 – vorige Kreise werden Transparent

Variante 2 – Kreis hinterlässt ein „Loch“, weil er sich bewegt

Zwischenstand 20.05.26

Zahlen Animation – gebaut mit ChatGPT für Framer React:

Am Anfang Budget für den Monat bis zum überziehen vom verfügbaren Geld. Das ganze ist ans Scrollen gemappt, wenn man das Ende der Website erreicht hat ist man bei -500€. Im Minus Bereich pulsiert die Zahl auch leicht und ist rot, um anzudeuten, dass zu viel Geld ausgegeben wird.

Zwei Varianten der aufklappbaren Kategorien:

Variante 1 – Kreise versetzen sich on scroll vertikal voneinander und Text kommt on click/hover/scroll aus den Kreisen seitlich hervor

Variante 2 – Kreise bleiben statisch und Text geht on click/hover/scroll aus den Kreisen von oben nach unten hervor

Variante 3 – Im Raster neben Text integriert , on click/hover Texteinblendqng auf Kreis

Website mit Kartendesign

Eine neue Überlegung war, dass die Website in drei große Sections eingeteilt wird welche in Form einer Karte sich übereinander Stapeln.

Drei Varianten vom Kartendesign der Website:

Variante 1 – verkleinerte Kapitel und Kreis Navigation

Variante 2 – Fullscreen Kapitel und Button Navigation

Variante 3 – stark verkleinerte Kapitel, Ende des letzten Kapitels abgerundet und Footer dahinter

Vier Varianten der Werbeanzeigen

Rhythmus-Varianten für das Seitenlayout

Zwischenstand 13.05.26

Werbeanzeigen mit RFID Interaktion

Hier habe ich drei Varianten einer Werbeanzeige erstellt. Beim klicken der Anzeige erscheint ein Overlay, bei dem man mit RFID die Zahlung ausführen kann. Nach ein paar Sekunden ist die Transaktion bestätigt und es kommt der Apple Pay Sound. Beim klicken auf den Pfeil erscheint die Erläuterung zur Konsumpsychologie mit Statistik.