Adding dine-in ordering without making it feel like a separate product.
A Swiss delivery platform extended with table-side ordering in restaurants.
- Freelance
- Product Designer
- Freelance
- Consumer · Mobile · Service Design
Ordering from the table is a different job from ordering delivery.
HOP already existed as a delivery product. Each restaurant has its own HOP ordering page with delivery and click & collect. Order & Pay adds a third option, dine-in, so guests can order and pay from their table.
Table-side ordering had to feel like part of the same service, not a second app that turned the restaurant into a checkout flow.
The main path had to stay short.
The flow starts in two places: guests already in the restaurant, possibly from a QR code, and guests who are not there yet. Both arrive at the same path: menu, start the order, table number, customise, confirm, follow the order.
One field, explored three times.
The table number is the one thing dine-in needs that delivery does not. In the final screens it is a single field on the restaurant card, with Continuer enabled once a number is entered.
Entering the table number
Table number
One field, one button.
Before that, the screen was explored in three versions, including errors for a table that is not assigned.
Version 1
The first version.
Version 2
Gains a little space, but loses legibility.
Version 3
An alternative that frees space to give more room to text and information.
The interface should get out of the way of the meal.
Adding a dish takes one tap, and the basket bar stays on screen with the item count and total. Extras are offered once, before payment, and can be skipped.
Choosing and adding to the basket
Menu
Categories as tabs, one button per dish.
The table goes with the order.
The recap carries the order type and the table number, so there is no doubt where the food goes. Guests pay by card, saved card, Apple Pay or on site. In the file, the payment options are marked as still to be thought through.
Paying at the table
Payment method
The same order on a bigger screen.
On the restaurant's site, the basket sits next to the menu. Checkout splits paying now from paying later, and the confirmation offers cashback for creating an account.
Restaurants switch it on themselves.
In the HOP Store Panel, a new Sur place section announces Order & Pay. The restaurant asks for activation, the HOP team gets in touch, and once it is on the restaurant sets VAT and a first-order cashback, or turns it off again.
One service, two contexts.
Delivery and dine-in share a brand and a basket. They do not share the same pace. The design work was to keep that difference without splitting HOP into two products.