Die Idee

Was mich beim Einkaufen schon länger stört, ist das ständige Ein- und Auspacken der Produkte. Besonders an der Kasse entsteht oft Stress, weil man möglichst schnell alles einpacken möchte, um die anderen Kundinnen und Kunden nicht aufzuhalten.

Deshalb habe ich mich gefragt: Warum muss Einkaufen eigentlich so umständlich sein?

Meine Idee war, Produkte bereits während des Einkaufs mit dem eigenen Smartphone zu scannen und direkt in die Einkaufstasche zu packen. Dort bleiben sie, bis man zu Hause ankommt.

Der Einstieg soll möglichst unkompliziert sein: ohne zusätzliches Scangerät, App-Installation oder Registrierung. Man scannt einfach einen QR-Code am Geschäftseingang und kann loslegen. Am Ende wird ein Einkaufs-QR-Code angezeigt, mit dem man an einer normalen oder einer Selbstbedienungskasse bezahlen könnte.

So entstand HOFER Scan & Go – mit dem Ziel, Einkaufen einfacher und entspannter zu gestalten.

Die Umsetzung

Für das Print-to-Mobile-Projekt habe ich ein Plakat gestaltet, dessen QR-Code direkt zu meiner mobilen Web-App führt. Das Design orientiert sich an den Farben und dem Erscheinungsbild von HOFER.

Die Web-App habe ich mit HTML, CSS und JavaScript entwickelt und dabei Codex als KI-Unterstützung eingesetzt. Sie ermöglicht das Scannen oder manuelle Eingeben von Produktbarcodes, das Verwalten einer Einkaufsliste mit Mengen und Preisen sowie das Erzeugen eines QR-Codes zum Einkaufsabschluss.

Da keine Verbindung zu einem echten Kassensystem besteht, wird die Bezahlung lediglich simuliert.

Anschließend habe ich die Anwendung über die USTP Cloud veröffentlicht und direkt auf dem Smartphone getestet. Dabei waren einige Anpassungen an der Darstellung und Bedienung notwendig.

Entstanden ist ein funktionsfähiger Prototyp, der zeigt, wie sich meine Idee durch die Verbindung eines gedruckten Plakats mit einer mobilen Web-App umsetzen lässt.

The post HOFER Scan & Go (Ein unabhängiges Studienprojekt) appeared first on Mobile USTP MKL.

Wie oft steht man im Supermarkt und fragt sich: „Habe ich eigentlich noch Milch zuhause?“ oder noch besser “Was hab ich eigentlich noch zuhaus?” Genau aus dieser kleinen Alltagssituation ist Fridge Club entstanden.

Fridge Club ist eine mobile Web-App, die direkt über einen QR-Code am Kühlschrank erreichbar ist. Die Idee dahinter ist einfach: Bevor man einkaufen geht oder den Kühlschrank ausräumt, scannt man den Code und sieht sofort, welche Produkte noch da sind.

In der App können Produkte mit Kategorie, Anzahl und Ablaufdatum eingetragen werden. Der Füllstand kann später über einen Slider angepasst werden. Produkte, die bald ablaufen, werden automatisch weiter oben angezeigt und mit „Bald weg!“ markiert. Zusätzlich gibt es eine Einkaufsliste, auf die fehlende Produkte direkt gesetzt und anschließend abgehakt werden können.

So soll Fridge Club dabei helfen, den Überblick zu behalten, weniger doppelt zu kaufen und Lebensmittel rechtzeitig zu verbrauchen.

The post Print2Mobile Projekt: Fridge Club appeared first on Mobile USTP MKL.

Genau hier setzt mein Print2Mobile-Projekt an. WieWaschen? ist ein Etiketten-Übersetzer und Waschratgeber für die Waschküche: Ein Poster an der Wand oder ein Sticker an der Waschmaschine führt per QR-Code zu einer mobilen Website, die Waschsymbole in klare Anweisungen übersetzt.

Die Idee

Waschsymbole sind eigentlich eine eigene kleine Sprache: Bottich, Striche darunter, eine Zahl, eine Hand, ein Kreuz. Wer nie gelernt hat, sie zu lesen, wäscht nach Gefühl – und das geht vor allem bei Wolle, Seide oder Daunen schnell schief.

Mein Ziel war ein Werkzeug, das genau in dem Moment hilft, in dem die Frage auftaucht: vor der Waschmaschine, mit dem Wäschestück in der Hand. Ohne App-Download, ohne Registrierung, einfach Kamera drauf halten.

Nutzungsszenario und Zielgruppe

Wo und wann: Das Poster hängt in der Waschküche – in Studierendenheimen, Wohnhausanlagen oder Waschsalons. Es wird genau dann gesehen, wenn jemand Wäsche einräumt und unsicher ist, welches Programm passt. Zusätzlich gibt es einen runden Sticker, der direkt auf die Waschmaschine geklebt wird.

Für wen: Meine Zielgruppe sind vor allem Menschen, die zum ersten Mal selbst waschen, etwa Studierende im ersten eigenen Haushalt oder im Heim. Aber auch alle, die einfach nur leicht vergessen und bei Wolle, Seide oder Bettdecken oft unsicher sind.

Das Printprodukt: Poster und Sticker

Das A4-Poster soll auch ohne Handy schon einen Nutzen haben. Unter der großen Frage „Wie wasch ich das?“ ist eine Übersicht mit wichtigen Waschsymbolen.

Darunter sitzt der QR-Code mit einer Anleitung in drei Schritten: Handy-Kamera öffnen und auf den Code halten, den Link antippen, Etikett übersetzen oder Wäschestück wählen. Für alle, die auf den QR-Code nicht zugreifen können oder die Website gerne am PC öffnen möchten, steht die URL darunter. Der Hinweis „Dein Pflegeetikett hat immer Vorrang“ macht klar, dass die Seite keine Garantie für jedes Kleidungsstück geben kann.

Der Sticker für die Waschmaschine ist die Kurzversion davon.

Die Website

Wer vom Poster kommt, wird auf der Startseite mit einem kurzen Willkommen abgeholt – im gleichen Design und mit dem gleichen Maskottchen wie auf dem Plakat. Danach gibt es zwei Wege:

• Etikett übersetzen: Schritt für Schritt die Symbole antippen, die auf dem Etikett stehen – die Seite sagt dann, welches Programm und welche Temperatur passen.
• Wäschestück wählen: Von Bettdecke über Wolle bis Seide. Jede Detailseite zeigt Informationen wie Temperatur, geeignetes Waschprogramm oder Waschmittel zu den ausgewählten Textilien.

Eine Suche hilft, schnell das richtige Material zu finden. Über die Merkliste lassen sich häufig gebrauchte Wäschestücke speichern, damit man sie beim nächsten Waschtag sofort wiederfindet.

Link zur Website: projects.aidabittendorfer.at/print2mobile-wiewaschen/

Umsetzung

Wäschewaschen ist kein besonders aufregendes Thema. Deshalb habe ich mich bewusst für einen süßen, freundlichen Stil entschieden statt für einen nüchternen Ratgeber-Look. Zuerst habe ich auch eine modernere, reduzierte Variante ausprobiert. Die süße Version hat aber besser zu einem Plakat gepasst, das in der Waschküche auffallen soll.

Die Farbwelt besteht aus einem hellen Blau als Grundfarbe, einem dunklen Violett für Text und Rosa als Akzent. Für die Überschriften verwende ich die Schrift Fredoka, für den Fließtext Figtree.

Die Website habe ich mit HTML, CSS und Vanilla JavaScript umgesetzt. Sie besteht aus drei Bereichen: der Startseite, den Detailseiten zu den einzelnen Wäschestücken und dem Etiketten-Übersetzer. Alle Wäschestücke und Pflegehinweise liegen gesammelt in einer data.json, die mit Hilfe von KI erstellt wurde.

Als Icons verwende ich Lucide für die Oberfläche. Die Waschsymbole basieren auf den Tabler Icons, die Temperaturzahlen habe ich selbst darübergelegt.

Beim Design und der technischen Umsetzung haben mich ChatGPT und Claude unterstützt.

The post Print2Mobile: WieWaschen? appeared first on Mobile USTP MKL.

Live: https://iosif-cicio.github.io/QrCodeDataViz/

Für das Print2Mobile-Projekt habe ich eine fiktive Fachhochschule erfunden – die “FH Gänsendorf” – und dazu ein Konzept, das ein gedrucktes Plakat mit einer mobilen Webanwendung verbindet. Statt trockener Fakten über die Hochschule geht es um die Studierenden selbst. Das Plakat lädt dazu ein, ein kurzes Zitat zum Studienalltag zu hinterlassen, und zeigt auf einem interaktiven Globus, woher alle kommen.

Gedacht ist das Ganze als spielerische Feedback-Wand: Man scannt den QR-Code, sieht den Globus mit den “Tweets” der anderen und fügt einen eigenen Tweet hinzu. Besonders für Veranstaltungen eignet es sich gut als eine dekorative und interaktive DataViz. Der Globus lässt sich direkt beim Event auf einem Bildschirm zeigen oder online auf der Hochschulseite einbinden und wächst mit jedem neuen Zitat.

Das gedruckte Element

Das Plakat ist bewusst schlicht gehalten. Es enthält nur das Nötigste und einen QR-Code. Der Druck soll einfach bleiben und als Auslöser für die Interaktion dienen, und nicht als vollständige Informationsquelle.

Die mobile Erfahrung

Nach dem Scannen des QR-Codes landet man auf einer mobil-optimierten Website mit einem 3D-Globus. Er startet über Europa und geht die Studierenden nacheinander durch, rotiert zum jeweiligen Land, und tippt einen kurzen Satz zum Studienalltag ein. Über ein kleines Formular kann man seinen eigenen Tweet hinzufügen, und eine “Quote Wall” zeigt alle Zitate. Diese sind filterbar nach Region, Land oder einem Namen – um z.B. die Gedanken von Freunden auszuspähen.

Der Mehrwert

Ohne die mobile Erweiterung wäre das Plakat nur thematische Dekoration. Durch die Verknüpfung mit der Web-App wird daraus ein interaktives Erlebnis, zu dem man sogar selbst beitragen kann.

Reflexion

Ich habe das Projekt als Gelegenheit genutzt, etwas aus dem Bereich Datenvisualisierung zu machen. Am längsten hat gedauert, mich zu entscheiden, was ich überhaupt zeigen will. Welche Story passt am besten? Was ist die richtige Länge? usw. Ursprünglich wollte ich eine Scrollytelling-Story mit interaktiven Visualisierungen bauen. Das passte aber nicht gut zum QR-Scan – denn einen QR-Code scannt man normalerweise für etwas Kurzes und Schnelles: eine knappe Eingabe, eine schnelle Info. Eine Scrollytelling-Story ist usually weder kurz noch schnell.

Der Globus mit den Zitaten funktioniert da viel besser: schnell gemacht, man liest ein paar andere Kommentare, sucht vielleicht nach Namen, die man vom Campus kennt, und ist wieder weg. Das ist etwas, das man nebenbei scannen und erledigen kann – zum Beispiel auf einer Uni-Veranstaltung. Und der Globus kann lokale Studierende überraschen, woher manche eigentlich herkommen. So wirkt ein kleiner Ort auf einmal groß.

Die wichtigste Erkenntnis: Ein QR-Code kann aus einem langweiligen 08/15-Plakat etwas Lebendiges machen.

Außerdem habe ich mich bewusst für eine fiktive Hochschule entschieden, um erfundene Zitate nicht einer echten Schule in den Mund zu legen und mich damit unbeliebt zu machen.

The post Print2Mobile: Die ganze Welt an einer Hochschule appeared first on Mobile USTP MKL.

Sie ist gedacht für Zeiten, wo man ohnehin herumsitzt und wartet – etwa in der Arztpraxis. Für alle, die einen kleinen positiven Anreiz gebrauchen können, um das Warten zu verkürzen.

Idee

“MediSnack” ist ein fiktives Unternehmen, das ein Mini-Game betreibt, verknüpft mit dazugehörigen Vending Machines, die vor allem in Arzt-Wartezimmern aufgestellt sind. Die Vending Machines bieten kleine medizinische Alltagsartikel, die man immer brauchen kann, zum Beispiel Pflaster.

Über einen auf Postern abgedruckten QR-Code gelangt man zum “MediSnack”-Memorygame, das einen beim erfolgreichen Spielabschluss 1x pro Tag ein Gratis-Goodie an der Vending Machine abholen lässt. Zusätzlich bietet “MediSnack” auch einen Onlineshop (für dieses Projekt nur als leere Page angelegt) und die Vending Machines erlauben es natürlich, auch ohne Spiel etwas daran zu kaufen.

Prozess

Nach einigem Brainstorming und Skizzen legte ich mich schließlich auf diese Idee für das Initialprojekt unserer Masterklasse Mobile fest. Ich beschloss, das Ganze mittels HTML, CSS und JavaScript umzusetzen, um mich vor allem durch letzteren Teil etwas zu fordern. Dazu skizzierte ich zuerst grob User Flow, Mini-Sitemap und einige Screens auf Papier, bevor ich den Low-Fi- und danach eine erste Hi-Fi-Prototypenversion in Figma anlegte. Die Farben sind angelehnt an typische Farben rund um Gesundheit und medizinische Artikel. Zudem gestaltete ich ein kleines Logo (inspiriert von den Spiralen in Verkaufsautomaten kombiniert mit einem Stethoskop) und die Memory-Motive.

Anschließend begann ich mit dem Coden in HTML, CSS und JS. Hierbei arbeite ich mithilfe von Tutorials und holte mir vor allem bei der Detailumsetzung des Minigames Unterstützung von ChatGPT. Das Design passte ich zwischenzeitlich an, um etwa Farbkontraste zu verbessern oder die Navigation (ursprünglich als Bar am unteren Bildschirmrand) so zu verändern, dass sie nicht das Spielerlebnis stört. Schließlich nutzte ich Cloudflare, um die Seite zu hosten und testete den QR-Code und die Seite auf verschiedenen Mobilgeräten.

Link: https://medisnack-game.it261502.workers.dev/

The post Print2Mobile Projekt: MediSnack, das Wartezimmer Mini-Game appeared first on Mobile USTP MKL.

Genau hier setzt no bs. an: mit einer Periodenprodukt-Verpackung, die nicht nur ein Produkt, sondern auch Wissen vermittelt. Als Unternehmen², das nachhaltige und ethisch hergestellte Hygieneartikel anbietet, sieht no bs. sich in der Verantwortung aufzuklären. Das betrifft nicht nur die richtige Anwendung, sondern auch die Vorgänge im gesamten weiblichen Zyklus.

Die Umsetzung

Auf der Packung von „no bs. tampons.“ sitzt ein QR-Code. Er führt zu einer Website, die den weiblichen Zyklus kurz und einfach erklärt. Der Gedanke dahinter ist eine Initiative unter dem Motto „mehr Aufklärung über den Zyklus“. Der Code lässt sich genauso auf Verpackung für Binden, Menstruationstassen oder Periodenunterwäsche drucken und wird damit zu einem gemeinsamen Zeichen für verschiedene Produkte.

Auf der Website wird der Zyklus durch das Jahreszeiten-Modell aufbereitet. Geprägt haben es Alexandra Pope und Sjanie Hugo Wurlitzer, die Gründerinnen der „Red School“. Sie stellen die „inneren Jahreszeiten“ in ihrem Buch Wild Power vor, nach der Quelle 2017.³ Ähnliche Ideen gibt es vermutlich schon länger in der feministischen Literatur über Menstruation. Ich selber kenne es aus dem Buch “Superpower Periode” (Original: powerful) von Maisie Hill.⁴

Gestalterisch habe ich mich für einen direkten, ironischen Ton entschieden. Die Seitenfläche mit der Frage „How bad are your cramps by the way?“ nimmt Leser:innen ernst, ohne belehrend zu wirken.

Die zugehörige Website habe ich mit HTML, CSS und JavaScript umgesetzt. Die Grundstruktur und die Funktionalität entstanden durch gezieltes Prompting mit Claude Code. Das Design habe ich anschließend selbst angepasst und auch die Struktur mit den Card-Elementen eigenständig eingefügt. Die Seite ist bewusst sehr einfach gehalten, damit später genug Platz für funktionale Ergänzungen bleibt. Gehostet wird sie auf einer Subdomain meiner persönlichen Website, die auf einem Server von Hostinger läuft. Dadurch ist der QR-Code auf jedem Gerät abrufbar.

Skalierung

Die Website eignet sich gut für Kooperationen mit Organisationen, die sich gegen Periodenarmut engagieren oder weltweit Bildung für Mädchen fördern. Denkbar wären auch Partnerschaften mit Aidshilfen oder gynäkologischen Praxen. Dort könnten Flyer aufgelegt werden, die ebenfalls auf die Seite verweisen. Voraussetzung dafür ist, dass die Inhalte wissenschaftlich belegt sind.

Darüber hinaus sind weitere Kooperationen möglich, zum Beispiel mit Zyklus- und Hormontrackern oder mit Fraueninitiativen. Auch Spendenaktionen für Menschen, die sich Hygieneprodukte nicht leisten können, wären eine sinnvolle Ergänzung. So kann aus einer einzelnen Verpackung eine Initiative werden, die viele Menschen erreicht.

Quellen

1. VuMA. (2025). Wichtigste Hygieneprodukte für Frauen während der Menstruation in Deutschland in den Jahren 2014 bis 2018 – Deutschland. Statista. /statistik/daten/studie/181257/umfrage/verwendete-produkte-waehrend-der-menstruation/ ︎
2. Das Unternehmen no bs. gibt es (noch nicht wirklich und wurde nur für den Zweck dieses Projekts erstellt. ︎
3. https://www.redschool.net/ ︎
4. https://maisiehill.com/books ︎

The post print2mobile – no.bs. Tampons: Verpackung die aufklärt appeared first on Mobile USTP MKL.

Link: Lena Reindl — Digital Business Card

The post Print2Mobile – Digital Business Card appeared first on Mobile USTP MKL.