The prototype below is the actual working HTML product. It is best understood as a constrained 600 × 600 wearable interface: no scrolling assumptions, no mouse-first behaviour, and no decorative glass effects that would fail on an additive waveguide display.
Interactive - UI/UX Prototype
Coffee
Nearby
Wearable Web App - 2026
Self-initiated product concept
I designed and built a wearable coffee-finder prototype for a 600 × 600 display and D-pad controls, with live OpenStreetMap search.
Design authorship note: The product concept, interaction model, visual direction, interface decisions, and final presentation choices are mine. Parts of the build and prototype were vibe-coded with AI as a development collaborator.
Project decisions & details
Challenge
Design for Meta Ray-Ban Display glasses, where a 600×600 viewport, waveguide display, and D-pad-only input break every standard web assumption.
Outcome
A working single-file prototype that proves the interaction model under emerging wearable constraints.
- Audience
- Wearable users who need nearby coffee without taking out a phone
- Constraints
- 600 × 600 waveguide display; D-pad + Enter; no touch, hover, or scrolling
- Deliverables
- Seven core flows: boot, location, radar, results, filters, details, and walking estimates
- Build proof
- One dependency-free HTML app using live OpenStreetMap/Overpass data and geolocation
Working Product
Constraint System
Viewport
600x600 fixed display with no scrolling. Every state has to fit as a complete screen.
Input
Arrow keys and Enter stand in for Neural Band gestures. Focus becomes the cursor.
Display
Black disappears into the real world. Amber carries contrast without blowing out the view.
What It Does
The app starts with a boot-style welcome screen, requests location, scans nearby OpenStreetMap cafe data through the Overpass API, then presents a list view, filter screen, detail view, and radar mode. Shops are sorted by distance with walking ETAs, compass direction, favourites, and live position updates.
The radar view plots shops as dots on a circular display that rotates with the user's heading. D-pad controls cycle through shops, while the focused item pulses so the wearer always knows what is selected.
Technical Decisions
The project uses vanilla JavaScript, HTML, and CSS with no framework, no build step, no npm dependencies, and no API keys. It combines navigator.geolocation, watchPosition, DeviceOrientationEvent, localStorage, haversine distance, great-circle bearing, and a defensive generation-counter pattern for stale async work.
Filters are intentionally forgiving because OpenStreetMap data can be sparse. Unknown values pass unless the data explicitly says no. The opening-hours parser handles the common 80 percent of OSM strings and fails open rather than hiding useful results.
Interaction Model
Every interactive list item is a native button because there is no cursor. The D-pad handler gathers the focusable controls on the active screen and moves focus through them with arrow keys, while Enter becomes the primary selection action.
The radar intentionally steps outside the general focus system. SVG targets are awkward focus surfaces, so radar mode tracks a dedicated selected-shop index and uses directional controls to cycle through shops instead of fighting browser focus mechanics.
Location Logic
Auto-refresh uses two tiers. Cheap updates run whenever the user moves enough to affect distance, bearing, or walking ETA. Expensive updates only re-query Overpass when the wearer has moved meaningfully away from the last fetch anchor and enough time has passed to avoid hammering the API.
The compass arrow uses shortest-path rotation, so moving from 350 degrees to 10 degrees rotates forward 20 degrees instead of snapping backward across the full circle. It is a small detail, but on a head-worn display small motion mistakes become very visible.
Visual System
The orange-to-brown direction is named Amber. It is a physics-informed theme: a dark base for transparency on additive display hardware, amber phosphor for legibility, and brown warmth to keep the interface from feeling purely technical.
Amber phosphorBrown baseNo glass blurD-pad focus
The interface works because it respects the hardware instead of pretending it is a phone.
Reflection
This project became a study in designing against instinct. Most web patterns assume scroll, touch, pointers, modals, hover states, and full-color surfaces. Coffee Nearby strips those assumptions down to a state machine of visible screens and focusable actions.
The strongest lesson was that constraints can create identity. Amber Waveguide is not just an aesthetic wrapper; it is a response to display physics, input limits, data uncertainty, and the need for quick decisions while moving through the world.