Start a project

Dabba

A restaurant ordering experience, designed end to end.

Type
UI/UX design
Made for
Phone and desktop
Themes
Light and dark
Fig. 01 — Live service for the restaurant team, and the menu for guests at the table.

Scope

What we designed

A complete design system and app screens for a restaurant ordering platform, in light and dark, for phone and desktop.

  • Ordering at the table, from a QR code

  • Ordering ahead and delivery

  • Stamp cards and rewards

  • The restaurant dashboard

  • Design system

  • Light and dark

At the table

Order at the table, from a QR code.

Guests scan the code on their table, join friends who are already ordering, and follow the order until it is served.

Order

  1. Dabba on a phone in light mode after scanning a table code: Welcome to table 4, a Start ordering button and an invite to join friends who are already ordering.

    ScanA welcome screen for the table.

  2. Dabba in dark mode: You're at table 4, with the table's shared order to join or a separate order to start, and popular dishes below.

    JoinFriends at one table order together.

  3. The Dabba menu in light mode: category tabs, a veg-only switch, three starters with photos and prices, and the table's order in a bar at the bottom.

    ChooseThe table’s order stays in view.

  4. A dish in dark mode: paneer tikka with a photo, a choice of spice level, an extra, a note for the kitchen and an Add button.

    CustomiseSpice level, extras and a note for the kitchen.

Fig. 02 — From the table code to a note for the kitchen.

Track and pay

  1. An order's progress in light mode: placed, accepted, cooking with about six minutes left, then ready and served, above the bill and an Ask for the bill button.

    TrackFrom placed to served, in clear steps.

  2. Split the bill in light mode: each person's share by item, who has paid, and a Pay my share button.

    SplitBy item, equally, or one person pays.

Fig. 03 — Follow the order, then split the bill.

Away from the table

Order ahead, follow a delivery, collect stamps.

The same app works from home: book and order ahead, follow a delivery to the door, and keep a stamp card for each place.

  • The Dabba home screen in dark mode: buttons to scan a table code or to book and order ahead, a live order card and free tables nearby.
  • Delivery tracking in dark mode: arriving in nine minutes, a small route map, the order's steps and a handover code.
  • Stamp cards in light mode: one card per restaurant, one of them full with a reward ready to use.
Fig. 04 — Home and a delivery in dark mode, and stamp cards in light mode.

Restaurant

Live service, the floor and the kitchen.

Desktop screens for the restaurant team: who is arriving, which tables are free, and every kitchen ticket in order.

  • The floor view in dark mode: tables grouped by area and marked free, held or busy, with one table's details open and a list of tables waiting for staff.
  • The kitchen board in light mode: tickets in columns, from to start and cooking to ready to serve.
Fig. 05 — The floor in dark mode, every table at a glance, and the kitchen board in light mode.

Design system

One component set, in light and dark.

Restaurant, order, offer, stamp and dish cards, status pills and order steps, each designed in both themes.

Dabba components in light and dark, side by side: restaurant, order, offer, stamp and dish cards, status pills, order steps and list rows.
Fig. 06 — The component set, in light and dark side by side.

Light

The live service dashboard in light mode.

Dark

The same live service dashboard in dark mode.
Fig. 07 — Live service, in light and dark.

Next project

UI/UX design

Zer0

A private messenger, designed for phone and desktop.

UI/UX design

Have a project in mind?

Tell us what you want to build, and we will reply with the next steps.

Start a project See our work