Find nearby cafés, compare them, and choose a stop within a 600 × 600 interface. Use arrow keys to move and Enter to select in the browser prototype.
Interactive - UI/UX Prototype
Coffee
Nearby
Wearable interface prototype · 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 browser prototype demonstrating directional navigation within a simulated wearable viewport.
- 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 HTML browser prototype using live OpenStreetMap/Overpass data and geolocation
Try the interaction
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.
Find. Compare. Choose.
01 / Find
Start with your location to find nearby cafés using OpenStreetMap data.
02 / Compare
Browse by distance, narrow the results with filters, or use radar to see their direction.
03 / Choose
Open a café for details and a walking estimate. Save a favourite for later.
A visible focus state shows which control is selected. Arrow keys move between choices; Enter confirms. In radar mode, the same directional controls cycle between cafés.
How the browser prototype works
Data and filters. OpenStreetMap supplies café information through Overpass. Missing attributes are treated as unknown rather than automatically excluding a café; opening-hours data may be incomplete.
Location updates. Position changes update distances and estimates. New searches are spaced out to avoid unnecessary requests, and compass changes take the shorter rotation path.
Implementation. A single HTML file uses JavaScript, CSS, browser location and orientation APIs, and local storage. Arrow keys and Enter simulate directional input; this browser demonstration is not evidence of on-device validation.
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
A small display needs clear choices, one screen at a time.
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.