Print2Mobile Projekt: MediSnack, das Wartezimmer Mini-Game
Von Viktoria Kapp am 14.10.2026
Wie verbindet man einen auf einem physischen Produkt angebrachten QR-Code so mit einem digitalen Produkt, dass man am Ende wieder in der physischen Welt landet? Dieser Frage wollte ich mit meinem Prototyp zur Wartezimmer-Minigame-App “MediSnack” nachgehen.
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.
