LUMA storefront — guest journey
LUMAGROUP Guest storefront — design walkthrough Open live demo ↗
Phuket · editorial template · B-TH-13

A group of six
restaurants, one guest path.

The LUMA Group storefront is a guest-facing витрина for a six-brand restaurant group on Phuket — a warm-paper editorial design that carries a diner from the brand wall through a full order, table booking, and cross-brand loyalty. Below is the whole journey, captured live on the demo stand in both a phone and a desktop viewport.

6 restaurant brands Phuket · THB Pickup · Delivery · Dine in · Room RU · EN · TH Responsive · animated

What we built this round

Real food photography

Every hub card and dish tile now shows a real photo — set in the admin as the card cover / product image, with an honest gradient as the fallback.

Dine in & Room service

Two on-premise order modes with a table- or room-number capture step before checkout, alongside Pickup and Delivery.

Modifiers & combos

Dishes carry topping and option groups — single-choice as radios, multi-select as checkboxes — with a live running total.

LUMA Club loyalty

One point balance shared across all six brands: earn on every order, spend points at checkout, invite a friend.

Table booking

A live reserve-a-table flow — server-computed date window and time-slot grid, wired to the public booking API.

Phuket delivery

Address geocoding tuned to Thailand with seeded Phuket delivery zones, fees, minimums and ETAs per restaurant.

Responsive & motion

The mockup markup became a fluid layout with tasteful entry transitions, from phone to desktop.

Demo / review login

A fixed phone + on-screen code signs in without a live OTP — ready for App Store review and instant demoing.

The guest journey — 13 screens

01

Brand hub

The LUMA Group guest wall for Phuket: city kicker, group wordmark, Pickup/Delivery/Dine in/Room fulfilment chips, all six brand cards with real food photography, and the LUMA Club loyalty strip.

storefront-lab.stage.smenapos.ru/brand/luma
Brand hub — desktop
Brand hub — mobile
02

LUMA Club

The cross-brand loyalty screen — one point balance across all six restaurants, earn (100% back in points), spend (1 point = THB 1 at checkout) and invite-a-friend referral.

storefront-lab.stage.smenapos.ru/brand/luma
LUMA Club — desktop
LUMA Club — mobile
03

Brand menu

OX Meat Place menu with editorial hero, category rail and dish tiles showing real photos, prices in THB, and Add / Choose actions.

storefront-lab.stage.smenapos.ru/brand/luma
Brand menu — desktop
Brand menu — mobile
04

Dish modifiers

Opened modifier sheet for Ribeye 300g: a required single-choice DONENESS radio group and a multi-select SAUCE checkbox group (up to 2), with a live 'Add to cart' total.

storefront-lab.stage.smenapos.ru/brand/luma
Dish modifiers — desktop
Dish modifiers — mobile
05

Cart

Cart with multiple line items, quantity steppers, fulfilment switcher, loyalty-earn hint and running subtotal / total.

storefront-lab.stage.smenapos.ru/brand/luma
Cart — desktop
Cart — mobile
06

Delivery — Phuket geocoding

Delivery address step: a Phuket address is typed and 'Find' returns real geocoded suggestions to pick from.

storefront-lab.stage.smenapos.ru/brand/luma
Delivery — Phuket geocoding — desktop
Delivery — Phuket geocoding — mobile
07

Delivery — resolved quote

Resolved delivery quote: the picked address plots on a Phuket Leaflet/OSM map and the multizone panel shows every brand that delivers there with fee, minimum order and ETA (demo fee resolves to THB 0 for this Bang Tao address).

storefront-lab.stage.smenapos.ru/brand/luma
Delivery — resolved quote — desktop
Delivery — resolved quote — mobile
08

On-premise: table

Dine-in on-premise capture screen ('Your table') with table number 12 entered before continuing to checkout.

storefront-lab.stage.smenapos.ru/brand/luma
On-premise: table — desktop
On-premise: table — mobile
09

On-premise: room

Room-service variant of the on-premise capture screen with a room number entered.

storefront-lab.stage.smenapos.ru/brand/luma
On-premise: room — desktop
On-premise: room — mobile
10

Demo login

Sign-in-to-order screen: phone +66801234567 entered, code requested, and the demo dev-code 424242 shown on screen for verification.

storefront-lab.stage.smenapos.ru/brand/luma
Demo login — desktop
Demo login — mobile
11

Checkout

Editorial checkout after verification: fulfilment recap, name/comment, preorder timing, cutlery/packaging questionnaire, LUMA Club redeem strip and grand total with the place-order button.

storefront-lab.stage.smenapos.ru/brand/luma
Checkout — desktop
Checkout — mobile
12

Order placed

Order status / tracking screen for the placed order (#60): Accepted -> Cooking -> Ready -> Handed over timeline, order items and total.

storefront-lab.stage.smenapos.ru/brand/luma
Order placed — desktop
Order placed — mobile
13

Table booking

Reserve-a-table screen for OX Meat Place: guest stepper, a horizontal date row and a full grid of time slots (past slots disabled) with a Book action.

storefront-lab.stage.smenapos.ru/brand/luma
Table booking — desktop
Table booking — mobile