Morsel: see the dish before you go, and before you order
Each photo is linked to a dish on the restaurant’s menu and labeled by source: restaurant or diner.
I designed Morsel and tested the menu flow in six moderated sessions, then retested revised labels with five new participants.
Try it at the table: tap “I’m at a restaurant”, pick Elder & Ash, find a main for under $25, look at its photos, then compare it with one more. Try it before you go: on Nearby, scroll the Restaurants rail to Dum & Dust (“4 photographed · partial menu”), tap it, and read the note before the first dish.
The demo brings together labels revised through the studies and subsequent refinements to Compare navigation, ingredient chips and picker wording. Reset starts a fresh session.
WHERE THIS
STARTED
I kept running into the same problem when looking for somewhere to eat on Google Maps or Yelp: interiors, storefronts and food photos in bad lighting, all mixed together. Even when something looked good, I often couldn’t tell what the dish was called or whether it was still on the menu.
Then I’d get to the restaurant and find a menu with no photos. I wanted choosing what to eat to feel like part of the fun, with less scrolling and second-guessing.
I started with a nearby-dish feed in December 2025, then added the restaurant menu. You can browse dishes to choose a place, then open its menu to decide what to order.
TWO WAYS IN,
ONE MENU
From Nearby, a restaurant card opens its menu. A dish card opens the dish page, with a link to the menu. At the table, “I’m at a restaurant” opens the picker directly, without requesting location. Both routes lead to the same menu.
Elder & Ash has a complete twelve-dish menu with photos for eight. Nine other restaurants carry only their photographed dishes, one to four each. Two restaurants without menu data say “Menu not added yet” and cannot be opened. The same count appears on the card in Nearby and at the top of the menu. The demo is set in Shaw.
CHOOSING A PLACE
FROM ITS DISHES
Nearby shows only dish photos; no restaurant has a picture of its own, so a place is shown by up to three of its dishes and a coverage count: “8 of 12 photographed”, “4 photographed · partial menu” or “Menu not added yet”. Each dish card names its restaurant, price and distance and carries a source tag. A dish opened from Nearby offers “View the full menu”, or “View Dum & Dust’s dishes” for a partial one, and the shortlist can hold dishes from different restaurants, with each column naming its place.
Nearby groups dishes by restaurant and sorts restaurants by distance. In the sample data, that puts eight Elder & Ash dishes first.
THE MENU’S ORDER,
GAPS INCLUDED
The menu keeps the restaurant’s sections and order. Dishes without photos remain available to open and compare; coverage labels distinguish full from partial menus.
A photos-only menu would hide four of Elder & Ash’s twelve dishes. I kept the gaps and made “All photos: Grid view” secondary. The page is less even, but every dish stays in the decision.
WHERE EACH PHOTO
CAME FROM
A restaurant’s styled image and a diner’s photo can show different aspects of the same dish. I kept both and labeled their sources, so people could interpret the images rather than treating every photo as equivalent.
A counter supports browsing multiple photos. Dishes without a contributed image keep their placeholder rather than borrowing a generic food photo.
CHOOSING BETWEEN
DISHES
Diners can shortlist up to three dishes from menu rows or dish pages. Compare puts their prices, descriptions, listed ingredients and photos together. Ordering stays with the restaurant staff.
The shortlist can include dishes from one menu or several restaurants.
Comparison cards reflow with the available width and text size, preserving room for names, descriptions and controls. I chose comparison over a cart: a cart suggests accumulating items, while this task asks diners to weigh alternatives.
READABILITY AND
NAVIGATION
Controls have visible focus rings. Back restores focus and scroll position, including in Compare. Text scales to 140%; full descriptions remain on dish pages. Browser checks covered keyboard paths and photo-label contrast.
FROM A PROTOTYPE
TO A PRODUCT
A first pilot would need a few complete menus, photos matched to named dishes, and an agreement with each restaurant on how updates are checked. Keeping the menu current would be central to the pilot. Nearby raises the same constraint at a larger scale: a feed is only as useful as the number of nearby menus with photos matched to named dishes.
SIX INITIAL SESSIONS,
FIVE-PERSON RETEST
I ran six remote, moderated sessions with diners, then tested revised photo, availability and menu-coverage wording with five new participants. The research helped me distinguish task completion from whether the interface explained what diners were seeing.
Participants found a named restaurant, chose a main under $25, compared dishes and explained what they understood from photos and a partial menu. I recorded completion, assistance, explanations and ease ratings.
Retest, five new participants: Clearer labels, one remaining question.
Neither grid-versus-enlargement confusion nor missing-photo availability confusion recurred. Four described partial coverage unprompted; one needed the same follow-up as in the first round.
The current demo incorporates the revised labels and coverage note. The remaining misunderstanding gives me a specific question for the next round.
Leaving blank photo spaces made the menu less polished, but hiding those dishes would have changed what diners could choose. Keeping the full menu was worth that tradeoff.
SUPPORTING
NOTES
More detail on the flow, alternatives, components and study.