Project Lost Freight – Gamification mit Figma

Das Projekt – Lost Freight

Dieses Projekt entstand im Rahmen meines Figma-Grundkurses innerhalb von 4 Tagen und hatte den Schwerpunkt Gamification im Webdesign.
Ziel war es, mit gezielten Context Clues im Interface und einem detailreichen Prototyping ein interaktives Erlebnis zu schaffen.

Kurzbeschreibung

Die Website führt die Nutzer:innen durch drei Ebenen einer vermeintlich unscheinbaren, fiktiven Postservice-Seite. Schritt für Schritt wird dabei aufgedeckt, dass hinter dem System eine korrupte Struktur steckt – ein Konzept, das Spannung aufbaut und gleichzeitig das Potenzial von Gamification im Design verdeutlicht.

Das Endprodukt

So wird das Projekt navigiert

Phase One (normal)

In der ersten Phase der Website stellt die Website in ihrer nromalen Form dar. EIne einfache Integalactische Postservice Seite mit einer Landing Page und drei Themengebieten (Interplanetary Delivery, Tracking Shipment, Citizen Support Portal). Um die ARG Exoerience zu beginnen muss der User den „Toten Pixel“ auf der Landing Page finden, welche ihn dann auf eine Errorseite bringt auf welcher der erster Hinweis (Accesskey) hinterlegt ist.

Der Accesskey muss dann vom User auf der Mainwebsite gefunden werden. In diesem Fall auf der Unterseite (Citizen Support Portal). Öffnet der User hier das Dropdownfeld für „I have lost my delivery key. What should I do?“ findet er einen Key inform des „Key Recovery Portals“. Die interaction mit diesem Key sorgt dafür das die augen des Chatbots auf der linken Seite rot werden.

Ist das passiert muss der User über den Toten Pixel auf der Landingpage zurück auf die Error 404 Seite. Hier ist nun die Option „View Delivery Drone Routes // Access Key Detected // Access Enabled“ clickbar und der User kommt auf die Nächste Seite und zu dem nächsten Rätsel.

Kurzform – TLDR

Toten Pixel auf Landingpage finden

Hinweis: Access Key Required finden

Zur Hauptseite zurück navigieren

Zu „Citizen Support Portal“ navigieren

Im Citizen Support Portal mit dem Dropdownfeld für „I have lost my delivery key. What should I do?“ interagieren.

„Key Recovery Portals“ clicken um den Key zu aktivieren

Ist der Key aktiv leuchten die augen des Chatbots auf der linken Seite rot

Über den Toten Pixel auf der Hauptseite wieder in das Error 404 Menü gehen

„View Delivery Drone Routes // Access Key Detected // Access Enabled“ ist jett interagierbar. durch klicken gelangt man in die zweite Phase

Entering the wonky stage

Phase two (wonky)

In der zweiten Phase der Website beginnt die Website langsam zu gitchen und verändert sich sowohl von der optik als auch vom Texting, was den zerfall der perfekten Fasade symbolisieren soll. Der User erhält auf der Error 404 Seite indirekt den Hint das er Files finden muss um in die nächste Stage des ARGs zu gelangen.

Der „Download“ für dieses File befindet sich unter der Option „Tracking Shipment“ hier befindet sich nun ein aktiv blinkender Banner, welcher einen download button beinhaltet. Wird dieser Button betätigt wird eine download und Instalations Sequenz abgespielt, und das nächste Rätsel ist gelöst.

Ist das passiert muss der User über den Toten Pixel auf der Landingpage zurück auf die Error 404 Seite. Hier ist nun die Option „> F001 // 1 File Detected“ clickbar und der User kommt auf die Nächste Seite und zu dem nächsten Rätsel.

Kurzform – TLDR

Toten Pixel auf Landingpage benutzen um auf die Error 404 Seite zu gelangen

Hinweis: Files found [false] -> File muss gefunden werden

Zur Hauptseite zurück navigieren

Zu „Tracking Shipment“ navigieren

In „Tracking Shipment“ mit dem Download button interagieren.

Es wird eine Download Animation abgespielt und eine „Installation“ ausgeführt

Über den Toten Pixel auf der Landing Page wieder zu der Error 404 Seite navigieren

„> F001 // 1 File Detected“ ist jetzt interagierbar und muss geklickt werden um in Phase drei zu gelangen

Entering the cursed stage

Phase three (cursed)

In der dritten und letzten Phase des ARGs zerfällt die Website nun vollständig. Farben sind invertiert, Fonts werden ersetzt, Texte sind teilweise kaum leserlich, offenbaren allerdings die eigentlichen Machenschaften der IGPS. Das ARG erreicht seinen Höhepunkt.

Den letzten Hint hat der User bereits auf der Error 404 Seite erhalten. „> F213 // Engeneering Status Required“ verweist darauf das der User einen bestimmten Status benötigt um das File aus der vorherigen Phase einzusehen. Zusätzlich sieht der User das er aktuell nur einen Technician Status besitzt. Um seinen Status aufzuwerten muss der User erneut zur Landing page und von dieser in die Menü-Option „manifest Submission For Extraction and Containment“ (Ehemals „Interplenetary Delivery“) navigieren.

Hier angelangt findet der User auf der Seite versteckt die Wörter „engeneering“, „status“ und „required“. Diese muss der User nacheinander anklicken, bis alle Wörter weiß markiert sind. Ist das erledigt hat der User die dritte Phase abgeschlossen und kann zur 404 Seite zurückkehren und kann zum Schluss auf verschiedene einträge der IGLF (Intergalactic Liberation Front) zugreifen.

Kurzform – TLDR

Toten Pixel auf Landingpage benutzen um auf die Error 404 Seite zu gelangen

Hinweis: > F213 // Engeneering Status Required (aktueller Status: Technician)

Zur Hauptseite zurück navigieren

Zu „Manifest Submission For Extraction and Containment“ navigieren

In „Manifest Submission For Extraction and Containment“ die Wörter „Engeneering“, „Status“ und „Required“ anclicken bis alle drei weiß werden.

Die Landingpage wird bei erfolgreicher ausführung schwarz-weiß

Über den Toten Pixel auf der Landing Page wieder zu der Error 404 Seite navigieren

Es erscheint ein „Proceed>>“ Button am unteren Bildschirm rechts mit welchem der User in die Datenbank der IGLF gelangt. Dieser Bereich ist zu 100% interagierbar.