Letting restaurants build the ordering menu their customers see

In Baemingo, products are created once, in the product catalogue (PIM). But a list of products is not a menu. A restaurant needs to decide how the products are grouped and shown to the people ordering: in the ordering app, in a self-service kiosk or at the till.

A layout is that decision: how staff or customers experience the menu when they place an order. In a usability test, users described the order they expected to work in:

1. Create the productsName, price, image, description and ingredients, in the product catalogue.
2. Create a layoutWhich is the menu: the categories and products the customer sees, and how they look.

So the layout builder had to start from products that already exist, and make building a menu feel like arranging it, not like filling in forms.

Building menus was one of the biggest pain points for new restaurants. I designed a first version of the menu builder, tested it with users, and improved it from what we learned.

What we tested

1. Is it easy to understand what to do, and how?Create the first layout: enter a name, and create it.
2. Is it easy to understand the menu layout as a concept?That a layout is how the menu looks to the people ordering, separate from the products themselves.

What we learned

1. Products first, then the menuUsers wanted to first create their products, and then create the layout: the menu.
2. Drag and drop workedThe format, with categories and products sorted by drag and drop, held up as the menu grew.
3. Help with coloursUsers asked for recommended colour palettes instead of typing hex codes.

The rest of this case shows version 2, improved from what we learned.

A new layout needs three things: a name, a sales channel and a menu. The sales channel list only shows the channels the company has activated, and choosing the till (POS) leads to the POS layout. Existing layouts are listed next to the form, so they are easy to find and change later. Click a screen to enlarge it.

The builder shows the menu in two phone previews: the start of the menu with its categories, and the category that is open with its products. Panels for adding and editing open on the right, so the preview always stays in view.

Ideas I noted for the product backlog, beyond this design:

1. Visibility settingsShow a category or product only for a certain service type or time of day, such as lunch.
2. Colour palettesChoose from a palette or a recommended colour combination instead of typing a hex code.
3. SubcategoriesNot supported in this design, and an open question for the next round.
4. App brandingA place to set up the start page and general branding, such as logo and default colours.