Context
The goal was to give diners something to do with the time between ordering and waiting for their breakfast to arrive — something light, social, and on-brand. A QR code on the single-serve spread caddy leads to a simple web app with two modes: conversation starters and fill-in-the-blank trivia across several categories.
The user arrives with zero context so the app needed to be immediately legible without any onboarding or explanation.
Role
Process
- 01
Performance as a baseline
Restaurant wifi is unpredictable and the app needed to load fast on a cold visit from a QR code scan. Performance was a priority from the start. Nuxt's static site generation and a lean stack with no heavy dependencies kept the initial load light.
- 02
CSS Transforms for interaction
Animation and transitions are handled with CSS Transforms rather than a JavaScript animation library, keeping the bundle lean while still giving the interactions a polished, tactile feel appropriate for a casual, fun experience.
- 03
Content in the store
Trivia content across all categories lives in the Pinia store. This is a deliberate simplicity for a one-time content load with no requirement for ongoing updates. No CMS overhead, no API calls, just fast access to everything the app needs on load.
Outcome
The app is live and accessible via QR code on Smucker's branded table caddies in participating restaurants. The self-explanatory UI successfully handles a zero-context entry point, dropping users straight into the experience without instruction.