The prototype below is the actual working HTML product. It is best understood as a constrained 600x600 wearable interface: no scrolling assumptions, no mouse-first behavior, and no decorative glass effects that would fail on an additive waveguide display.
Interactive - UI/UX Prototype
Coffee
Nearby
Wearable Web App - 2026
Coffee Nearby is a wearable-first Web App prototype built for Meta Ray-Ban Display glasses. The platform's additive waveguide display, D-pad-only input, and fixed 600x600 viewport force a complete rethink of standard web design instincts.
The result is a single-file, dependency-free coffee shop finder with a live AR-style radar, walking ETAs, OpenStreetMap-powered search, and an amber terminal aesthetic chosen specifically to work with the display's physics rather than against them.
ProblemDesign for Meta Ray-Ban Display glasses, where a 600×600 viewport, waveguide display, and D-pad-only input break every standard web assumption.
ApproachRebuild the interaction model from scratch — spatial-first navigation, high-contrast glanceable UI, and flows that never need a tap.
OutcomeA working single-file prototype proving fluency in emerging constraints most designers haven't touched yet.
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.
Role
Sole designer and prototyper — interaction model, spatial UI system, visual direction, and the working build.
Deliverables
Wearable-first web app prototype, 600×600 UI system, D-pad navigation flows, and glanceable component patterns.
What this shows
Fluency with emerging hardware constraints, an interaction model built from first principles, and the judgment to design for a screen most people haven't touched yet.
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, favorites, 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.