MOOO · Customer ordering

Choose delivery & pick a location FINAL UI · 2026-07-27

SS-9166

Consumer Order Flow (SS-9032) · griddle "Find a location" — location select only (ordering moved to SS-9167)

This is the final UI, not a UX sketch: built and browser-verified on the real griddle design/merchant/location-selection-demo.html + design/account/account-demo.html, in the griddle design system. Engineering builds this.

← All screens

📱 Mobile appnative iOS / Android — griddle · Profile addresses → choose Delivery + address → in-range stores

Open the real UI AC1 · 2 · 3 · 5 Find a location — choose Delivery, enter the address, see who delivers. Switch brand, toggle every state. Open the real UI AC4 Account › Delivery Addresses — add / edit / delete, set a Default. Empty, loading and error states included.

The screens below are the spec; the two links above are the build. They are the live griddle demos (griddle-refactor/design/…, copied here 2026-07-27 so the links keep working once published) — interactive, brand-switchable, every state reachable. If the two ever disagree, the demo wins and this page needs re-cutting.

Final UI 2026-07-27Locked. Delivery is now an either/or the backend owns — a brand runs INFI (Uber Direct) delivery or hands off to partners, never both, so the customer is never asked to choose a carrier and this list only ever shows one world. No manual address entry: an address the places provider can't resolve can't be geocoded, range-checked or given to a courier, so unresolvable == undeliverable. Selection no longer uses an accent bar — see the design notes. (2026-07-23: location-select only. Everything about placing the order — add delivery details, live quote, tip, payment, Place order — moved to SS-9167. Kept here (2026-07-22): address-first (enter address → then in-range stores) and the Profile address book (add / edit / delete), mobile & web.

1 Profile · your delivery addresses — add / edit / delete

9:36●●● 5G 88%

Delivery addresses

Maya Rivera

Profile · maya.r@email.com

Saved addresses

219 Pearl St, Apt 4B Default

Boulder, CO 80302 · Ring buzzer 4B

1600 Pearl Pkwy, Ste 200

Boulder, CO 80301

Add a new address

New 2026-07-22Addresses now live in your Profile — add / edit / delete anytime, then reuse them at checkout on mobile & web.

2 Choose Delivery → pick your address first change 1

9:38●●● 5G 88%

Deliver to

Tell us where — then we'll show the stores that deliver to you.

🔒

Logged in — Profile addresses appear below. Guests search / use current location (no saved list) and can log in to save one.

Enter a new address…

Use my current location

From your Profile

219 Pearl St, Apt 4B

Boulder, CO 80302 · Ring buzzer 4B

1600 Pearl Pkwy, Ste 200

Boulder, CO 80301

Add a new address

3 See the stores in range of that address

9:39●●● 5G 88%

Delivers to you

Deliver to

219 Pearl St, Apt 4B

Change

In range

2 stores deliver here · 1 too far

DELIVERS TO YOU

Sunset Grill — Pearl St

1.8 mi

Open · 25–35 min

219 Pearl St, Boulder, CO 80302

Sunset Grill — 29th St

3.4 mi

Open · 30–40 min

1136 29th St, Boulder, CO 80303

Sunset Grill — Table Mesa

12.4 mi

Out of range for this address

4120 Table Mesa Dr, Boulder, CO 80305

AC1 · Guest — enter an address ad-hoc

🔒

Ordering as guest — Log in to save addresses to your Profile.

219 Pearl|

219 Pearl St

Boulder, CO 80302

2190 Pearl St

Boulder, CO 80302

Guests still enter the address first (autocomplete / current location) — they just have no saved Profile list. The address they type still drives the in-range store list.

AC4 · No store in range for this address

Deliver to

4120 Table Mesa Dr

Change

✕ No store delivers here — 12.4 mi from the nearest

Because the address is entered first, out-of-range is caught before a store is picked: no store within ~10 mi delivers to it, so the list is empty and the app suggests Pickup instead. (No quote burned.)

User story

As a customer I want to enter my delivery address first — from my Profile or a new one — then see which stores deliver to me and pick one, so I start ordering from a store that can reach me.

The flow — pick a location rev 2026-07-23

① Profile ▸ Delivery addresses: addresses live in the customer's Profile (mobile & web) — add / edit / delete, mark a Default, reuse anytime. change 2
② Choose Delivery → address FIRST: pick the Delivery dining option, then choose a Profile address / add new / use current location. change 1
③ In-range stores: only the stores that deliver to that address are shown ("Delivers to you · 1.8 mi"); out-of-range stores are greyed. Pick one — no quote burned.
→ Then SS-9167 takes over: add delivery details, live quote, tip, pay & place the order.

Acceptance criteria

AC1I enter my address first (Profile / new / current location) → then I see the stores in range of it ("Delivers to you · 1.8 mi"); no quote burned. (was: pick a store, then address)
AC2Address with no store in range → the list is empty & I'm told why, before picking a store (drawn below).
AC3I can order as a guest (address ad-hoc + Log in nudge) or logged in; logged-in users pick from their Profile addresses.
AC4My delivery addresses live in my Profile (mobile & web) — I can add, edit & delete them and reuse them.
→9167Live quote / countdown, driver tip, place order — moved to SS-9167 (ordering).

Design notes — griddle

Built from real griddle: merchants/ "Find a location" panel — search pill, dining segmented toggle, loc-card "Order Here", teardrop-pin map, "CLOSEST TO YOU" badge, status pill.
Brand colour is scarce, and selection is what spends it. The old rule (selected card = 3px left accent bar) was dropped: .sel and :hover shared the same shadow, so the bar carried the whole signal alone, and it read as applied decoration. Worse, every card had a solid brand button — six brand fills stacked, breaking "one primary per section" and leaving selection nothing to escalate to. Now selection = primacy on three axes: the card is lit by the brand (tinted elevation) + 2px lift, its distance flips to a filled chip, and it holds the list's only solid brand button. No bar, no ring, no tint wash. See proposal-selection-by-primacy.md.
Change 2 — address book in Profile: griddle has no address book yet (today delivery = third-party links). The delivery address now lives in the customer Profile (mobile & web) as a full add / edit / delete list with a Default, reused at order time. Guests enter an address ad-hoc (no saved list); a Log in nudge offers to save it. Instructions are free-text, edited in place (no pencil).
Change 1 — address-first: the customer picks Delivery, then enters the address before any store is shown; the store list is then filtered to what's in range of that address. This reverses the old "browse stores → then address" order and lets out-of-range be caught before a store is chosen — no quote burned.
Address-first, no quote burned: the address step only confirms deliverability inline (in-range check) — the live Uber quote is fetched later on the checkout page (SS-9167), since Uber quotes are single-use & last ~15 min (deck p5/p14). So this page never burns a quote.
One carrier world, never two. INFI (Uber Direct) delivery vs partner hand-off is an either/or the backend owns, so the customer is never asked to pick a carrier and this list is homogeneous by construction — the fulfilment is derived from a brand-level setting, not authored per store. A partner brand keeps today's third-party flow untouched and is never asked for an address (there is no delivery area to evaluate, so an address would derive nothing).
No manual address entry. If the places provider can't resolve it, we can't geocode it, can't range-check it, and can't hand it to a courier. Letting the customer force one through would only move the failure later — into SS-9167, after they've entered their details. Unresolvable == undeliverable.
Out-of-range stores are shown, greyed, inert ("Out of range for this address" / Too far) rather than hidden — seeing them answers "is my usual store just too far?", where hiding leaves the customer unsure we even found it. Bounded to 25 mi: beyond that a store isn't "too far", it's in another city, and rendering "Too far · 1189 mi" reads as a bug.
Contrast, measured not assumed. The teal is a light brand colour, so white-on-brand is only 2.38:1. Labels on a brand fill use near-black (7.35:1) and teal text on tint/sunken uses a darker step (5.06 / 4.78). Two additive tokens, --on-brand-ink + --brand-ink. ⚠ For the DS owner: --on-brand is still hard-coded white globally and every other page in this repo inherits the same failure — the systemic fix is to derive it from the brand's luminance.
Same 3 location steps in both channels, shell only differs (§8.8): mobile = full-screen sheets (Profile addresses → address → in-range); desktop = the same three — Account page, address-first modal, list+map two-pane. Everything after picking the store is on SS-9167.

Revision log · PI-430

2026-07-22 · 1. Flow flipped to address-first — enter the address, then see in-range stores (was: store first, then address). Mobile & web.
2026-07-22 · 2. Delivery address moved into the customer Profile with add / edit / delete. Mobile & web.
2026-07-27 · FINAL UI. Replaced the UX sketch with the built, browser-verified UI from the real griddle demos. Four decisions locked: (1) partner vs INFI delivery is a backend either/or — the mixed "also nearby, order through a partner" section is removed; (2) manual address entry removed (unresolvable == undeliverable); (3) selection redesigned from the 3px accent bar to primacy (brand-lit elevation + filled distance chip + sole solid CTA); (4) contrast fixed — white-on-teal was 2.38:1.
2026-07-23: This page is now location-select only — the Add-details + Checkout screens (live quote, tip, place order) moved to SS-9167.

🖥 Online ordering · websame location-select flow, desktop shell — Account addresses → address-first modal → in-range list + map two-pane (ordering continues on SS-9167)

order.sunsetgrill.com/account/addresses

SSunset Grill

MenuLocationsRewardsAccount

Delivery addresses new · change 2

Manage the addresses saved to your profile — add, edit or delete; they're reused at checkout on web & mobile.

219 Pearl St, Apt 4B Default

Boulder, CO 80302 · Ring buzzer 4B

1600 Pearl Pkwy, Ste 200

Boulder, CO 80301

Add a new address

New 2026-07-22Addresses now live in your Profile — add / edit / delete anytime, then reuse them at checkout on mobile & web.

order.sunsetgrill.com/delivery · step 1 — where to?

SSunset Grill

MenuLocationsRewards

Where should we deliver?

Deliver to step 1 · address first✕

🔒

Logged in — Profile addresses appear below. Guests search / use current location (no saved list) and can log in to save one.

Enter a new address…

Use my current location

From your Profile

219 Pearl St, Apt 4B

Boulder, CO 80302 · Ring buzzer 4B

1600 Pearl Pkwy, Ste 200

Boulder, CO 80301

Add a new address

order.sunsetgrill.com/delivery · step 2 — in range

SSunset Grill

MenuLocationsRewards

Delivers to you

Deliver to

219 Pearl St, Apt 4B

Change

219 Pearl St, Boulder

DELIVERS TO YOU

Sunset Grill — Pearl St

1.8 mi

Open · 25–35 min

219 Pearl St, Boulder, CO 80302

Sunset Grill — 29th St

3.4 mi

Open · 30–40 min

1136 29th St, Boulder, CO 80303

Sunset Grill — Table Mesa

12.4 mi

Out of range for this address

4120 Table Mesa Dr, Boulder, CO 80305

In range

2 stores deliver here · 1 too far